wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge pull request #874 from tailwindcss/widen-negative-value-support

Browse source 
Remove 'className' from plugin API
This commit is contained in:
Adam Wathan 2019-04-26 08:22:24 -04:00 • committed by GitHub
commit 07f411a04a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 29 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

60
__tests__/processPlugins.test.js
View file

@ -597,66 +597,6 @@ test('plugins can create rules with escaped selectors', () => {
`)
})
test('plugins can create class names accounting for special naming rules easily', () => {
const { components, utilities } = processPlugins(
[
function({ className, addUtilities }) {
addUtilities({
[className('rotate', '1/4')]: {
transform: 'rotate(90deg)',
},
[className('rotate', '-1/4')]: {
transform: 'rotate(-90deg)',
},
[className('rotate', 'default')]: {
transform: 'rotate(180deg)',
},
})
},
],
makeConfig()
)
expect(components.length).toBe(0)
expect(css(utilities)).toMatchCss(`
@variants {
.rotate-1\\/4 {
transform: rotate(90deg)
}
.-rotate-1\\/4 {
transform: rotate(-90deg)
}
.rotate {
transform: rotate(180deg)
}
}
`)
})
test('the second parameter in className is optional', () => {
const { components, utilities } = processPlugins(
[
function({ className, addUtilities }) {
addUtilities({
[className('rotate')]: {
transform: 'rotate(180deg)',
},
})
},
],
makeConfig()
)
expect(components.length).toBe(0)
expect(css(utilities)).toMatchCss(`
@variants {
.rotate {
transform: rotate(180deg)
}
}
`)
})
test('plugins can access the current config', () => {
const { components, utilities } = processPlugins(
[

23
src/plugins/inset.js
View file

@ -1,10 +1,11 @@
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
export default function() {
return function({ addUtilities, className, theme, variants }) {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[className('inset', modifier)]: {
[`.${e(prefixNegativeModifiers('inset', modifier))}`]: {
top: `${size}`,
right: `${size}`,
bottom: `${size}`,
@ -12,14 +13,20 @@ export default function() {
},
}),
(size, modifier) => ({
[className('inset-y', modifier)]: { top: `${size}`, bottom: `${size}` },
[className('inset-x', modifier)]: { right: `${size}`, left: `${size}` },
[`.${e(prefixNegativeModifiers('inset-y', modifier))}`]: {
top: `${size}`,
bottom: `${size}`,
},
[`.${e(prefixNegativeModifiers('inset-x', modifier))}`]: {
right: `${size}`,
left: `${size}`,
},
}),
(size, modifier) => ({
[className('top', modifier)]: { top: `${size}` },
[className('right', modifier)]: { right: `${size}` },
[className('bottom', modifier)]: { bottom: `${size}` },
[className('left', modifier)]: { left: `${size}` },
[`.${e(prefixNegativeModifiers('top', modifier))}`]: { top: `${size}` },
[`.${e(prefixNegativeModifiers('right', modifier))}`]: { right: `${size}` },
[`.${e(prefixNegativeModifiers('bottom', modifier))}`]: { bottom: `${size}` },
[`.${e(prefixNegativeModifiers('left', modifier))}`]: { left: `${size}` },
}),
]

17
src/plugins/margin.js
View file

@ -1,26 +1,27 @@
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
export default function() {
return function({ addUtilities, className, theme, variants }) {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[className('m', modifier)]: { margin: `${size}` },
[`.${e(prefixNegativeModifiers('m', modifier))}`]: { margin: `${size}` },
}),
(size, modifier) => ({
[className('my', modifier)]: {
[`.${e(prefixNegativeModifiers('my', modifier))}`]: {
'margin-top': `${size}`,
'margin-bottom': `${size}`,
},
[className('mx', modifier)]: {
[`.${e(prefixNegativeModifiers('mx', modifier))}`]: {
'margin-left': `${size}`,
'margin-right': `${size}`,
},
}),
(size, modifier) => ({
[className('mt', modifier)]: { 'margin-top': `${size}` },
[className('mr', modifier)]: { 'margin-right': `${size}` },
[className('mb', modifier)]: { 'margin-bottom': `${size}` },
[className('ml', modifier)]: { 'margin-left': `${size}` },
[`.${e(prefixNegativeModifiers('mt', modifier))}`]: { 'margin-top': `${size}` },
[`.${e(prefixNegativeModifiers('mr', modifier))}`]: { 'margin-right': `${size}` },
[`.${e(prefixNegativeModifiers('mb', modifier))}`]: { 'margin-bottom': `${size}` },
[`.${e(prefixNegativeModifiers('ml', modifier))}`]: { 'margin-left': `${size}` },
}),
]

13
src/util/className.js
View file

@ -1,13 +0,0 @@
import _ from 'lodash'
import escapeClassName from './escapeClassName'
export default function className(base, modifier = 'default') {
const name = (() => {
if (modifier === 'default') {
return base
}
return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`
})()
return `.${escapeClassName(name)}`
}

5
src/util/prefixNegativeModifiers.js Normal file
View file

@ -0,0 +1,5 @@
import _ from 'lodash'
export default function prefixNegativeModifiers(base, modifier) {
return _.startsWith(modifier, '-') ? `-${base}-${modifier.slice(1)}` : `${base}-${modifier}`
}

2
src/util/processPlugins.js
View file

@ -2,7 +2,6 @@ import _ from 'lodash'
import postcss from 'postcss'
import Node from 'postcss/lib/node'
import escapeClassName from '../util/escapeClassName'
import className from '../util/className'
import generateVariantFunction from '../util/generateVariantFunction'
import parseObjectStyles from '../util/parseObjectStyles'
import prefixSelector from '../util/prefixSelector'
@ -40,7 +39,6 @@ export default function(plugins, config) {
return getConfigValue(`variants.${path}`, defaultValue)
},
e: escapeClassName,
className,
prefix: applyConfiguredPrefix,
addUtilities: (utilities, options) => {
const defaultOptions = { variants: [], respectPrefix: true, respectImportant: true }