archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Update all core plugins to use the same class name generation strategy

Browse Source
This commit is contained in:
Adam Wathan 2020-10-16 10:24:16 -04:00
parent e897e40189
commit 11690b4c9b
48 changed files with 172 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
__tests__/plugins/letterSpacing.test.js
View File

@ -41,10 +41,12 @@ test('letter spacing can use negative prefix syntax', () => {
expect(addedUtilities).toEqual([
{
utilities: {
'.-tracking-1': { 'letter-spacing': '-0.025em' },
'.tracking-1': { 'letter-spacing': '0.025em' },
},
utilities: [
{
'.-tracking-1': { letterSpacing: '-0.025em' },
'.tracking-1': { letterSpacing: '0.025em' },
},
],
variants: ['responsive'],
},
])

14
__tests__/plugins/zIndex.test.js
View File

@ -43,12 +43,14 @@ test('z index can use negative prefix syntax', () => {
expect(addedUtilities).toEqual([
{
utilities: {
'.-z-20': { 'z-index': '-20' },
'.-z-10': { 'z-index': '-10' },
'.z-10': { 'z-index': '10' },
'.z-20': { 'z-index': '20' },
},
utilities: [
{
'.-z-20': { zIndex: '-20' },
'.-z-10': { zIndex: '-10' },
'.z-10': { zIndex: '10' },
'.z-20': { zIndex: '20' },
},
],
variants: ['responsive'],
},
])

2
__tests__/sanity.test.js
View File

@ -4,7 +4,7 @@ import postcss from 'postcss'
import tailwind from '../src/index'
import config from '../stubs/defaultConfig.stub.js'
it('generates the right CSS', () => {
it('generates the right CSS using the default settings', () => {
const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
const input = fs.readFileSync(inputPath, 'utf8')

3
src/plugins/backgroundColor.js
View File

@ -2,6 +2,7 @@ import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
import toColorValue from '../util/toColorValue'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants, corePlugins }) {
@ -21,7 +22,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [`.${e(`bg-${modifier}`)}`, getProperties(value)]
return [nameClass('bg', modifier), getProperties(value)]
})
)

3
src/plugins/backgroundImage.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundImage'), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
nameClass('bg', modifier),
{
'background-image': value,
},

3
src/plugins/backgroundPosition.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundPosition'), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
nameClass('bg', modifier),
{
'background-position': value,
},

3
src/plugins/backgroundSize.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backgroundSize'), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
nameClass('bg', modifier),
{
'background-size': value,
},

3
src/plugins/borderColor.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
@ -21,7 +22,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
return [`.${e(`border-${modifier}`)}`, getProperties(value)]
return [nameClass('border', modifier), getProperties(value)]
})
)

21
src/plugins/borderRadius.js
View File

@ -1,40 +1,41 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(value, modifier) => ({
[`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` },
[nameClass('rounded', modifier)]: { borderRadius: `${value}` },
}),
(value, modifier) => ({
[`.${e(`rounded-t${modifier}`)}`]: {
[nameClass('rounded-t', modifier)]: {
borderTopLeftRadius: `${value}`,
borderTopRightRadius: `${value}`,
},
[`.${e(`rounded-r${modifier}`)}`]: {
[nameClass('rounded-r', modifier)]: {
borderTopRightRadius: `${value}`,
borderBottomRightRadius: `${value}`,
},
[`.${e(`rounded-b${modifier}`)}`]: {
[nameClass('rounded-b', modifier)]: {
borderBottomRightRadius: `${value}`,
borderBottomLeftRadius: `${value}`,
},
[`.${e(`rounded-l${modifier}`)}`]: {
[nameClass('rounded-l', modifier)]: {
borderTopLeftRadius: `${value}`,
borderBottomLeftRadius: `${value}`,
},
}),
(value, modifier) => ({
[`.${e(`rounded-tl${modifier}`)}`]: { borderTopLeftRadius: `${value}` },
[`.${e(`rounded-tr${modifier}`)}`]: { borderTopRightRadius: `${value}` },
[`.${e(`rounded-br${modifier}`)}`]: { borderBottomRightRadius: `${value}` },
[`.${e(`rounded-bl${modifier}`)}`]: { borderBottomLeftRadius: `${value}` },
[nameClass('rounded-tl', modifier)]: { borderTopLeftRadius: `${value}` },
[nameClass('rounded-tr', modifier)]: { borderTopRightRadius: `${value}` },
[nameClass('rounded-br', modifier)]: { borderBottomRightRadius: `${value}` },
[nameClass('rounded-bl', modifier)]: { borderBottomLeftRadius: `${value}` },
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('borderRadius'), (value, modifier) => {
return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`)
return generator(value, modifier)
})
})

13
src/plugins/borderWidth.js
View File

@ -1,22 +1,23 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(value, modifier) => ({
[`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` },
[nameClass('border', modifier)]: { borderWidth: `${value}` },
}),
(value, modifier) => ({
[`.${e(`border-t${modifier}`)}`]: { borderTopWidth: `${value}` },
[`.${e(`border-r${modifier}`)}`]: { borderRightWidth: `${value}` },
[`.${e(`border-b${modifier}`)}`]: { borderBottomWidth: `${value}` },
[`.${e(`border-l${modifier}`)}`]: { borderLeftWidth: `${value}` },
[nameClass('border-t', modifier)]: { borderTopWidth: `${value}` },
[nameClass('border-r', modifier)]: { borderRightWidth: `${value}` },
[nameClass('border-b', modifier)]: { borderBottomWidth: `${value}` },
[nameClass('border-l', modifier)]: { borderLeftWidth: `${value}` },
}),
]
const utilities = _.flatMap(generators, generator => {
return _.flatMap(theme('borderWidth'), (value, modifier) => {
return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`)
return generator(value, modifier)
})
})

6
src/plugins/boxShadow.js
View File

@ -1,14 +1,12 @@
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('boxShadow'), (value, modifier) => {
const className =
modifier === 'DEFAULT' ? 'shadow' : `${e(prefixNegativeModifiers('shadow', modifier))}`
return [
`.${className}`,
nameClass('shadow', modifier),
{
'box-shadow': value,
},

3
src/plugins/cursor.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('cursor'), (value, modifier) => {
return [
`.${e(`cursor-${modifier}`)}`,
nameClass('cursor', modifier),
{
cursor: value,
},

3
src/plugins/divideColor.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
@ -22,7 +23,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(_.omit(colors, 'DEFAULT'), (value, modifier) => {
return [
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
`${nameClass('divide', modifier)} > :not(template) ~ :not(template)`,
getProperties(value),
]
})

3
src/plugins/divideOpacity.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('divideOpacity'), (value, modifier) => {
return [
`.${e(`divide-opacity-${modifier}`)} > :not(template) ~ :not(template)`,
`${nameClass('divide-opacity', modifier)} > :not(template) ~ :not(template)`,
{
'--divide-opacity': value,
},

9
src/plugins/divideWidth.js
View File

@ -1,17 +1,18 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
return function({ addUtilities, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
[`${nameClass('divide-y', modifier)} > :not(template) ~ :not(template)`]: {
'--divide-y-reverse': '0',
'border-top-width': `calc(${
size === '0' ? '0px' : size
} * calc(1 - var(--divide-y-reverse)))`,
'border-bottom-width': `calc(${size === '0' ? '0px' : size} * var(--divide-y-reverse))`,
},
[`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
[`${nameClass('divide-x', modifier)} > :not(template) ~ :not(template)`]: {
'--divide-x-reverse': '0',
'border-right-width': `calc(${size === '0' ? '0px' : size} * var(--divide-x-reverse))`,
'border-left-width': `calc(${
@ -24,7 +25,7 @@ export default function() {
const utilities = _.flatMap(generators, generator => {
return [
..._.flatMap(theme('divideWidth'), (value, modifier) => {
return generator(value, modifier === 'DEFAULT' ? '' : `-${modifier}`)
return generator(value, modifier)
}),
{
'.divide-y-reverse > :not(template) ~ :not(template)': {

3
src/plugins/fill.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
export default function() {
@ -8,7 +9,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [`.${e(`fill-${modifier}`)}`, { fill: toColorValue(value) }]
return [nameClass('fill', modifier), { fill: toColorValue(value) }]
})
)

3
src/plugins/flex.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('flex'), (value, modifier) => {
return [
`.${e(`flex-${modifier}`)}`,
nameClass('flex', modifier),
{
flex: value,
},

4
src/plugins/flexGrow.js
View File

@ -1,13 +1,13 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
addUtilities(
_.fromPairs(
_.map(theme('flexGrow'), (value, modifier) => {
const className = modifier === 'DEFAULT' ? 'flex-grow' : `flex-grow-${modifier}`
return [
`.${e(className)}`,
nameClass('flex-grow', modifier),
{
'flex-grow': value,
},

4
src/plugins/flexShrink.js
View File

@ -1,13 +1,13 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
addUtilities(
_.fromPairs(
_.map(theme('flexShrink'), (value, modifier) => {
const className = modifier === 'DEFAULT' ? 'flex-shrink' : `flex-shrink-${modifier}`
return [
`.${e(className)}`,
nameClass('flex-shrink', modifier),
{
'flex-shrink': value,
},

25
src/plugins/fontFamily.js
View File

@ -1,18 +1,13 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('fontFamily'), (value, modifier) => {
return [
`.${e(`font-${modifier}`)}`,
{
'font-family': Array.isArray(value) ? value.join(', ') : value,
},
]
})
)
addUtilities(utilities, variants('fontFamily'))
}
return createUtilityPlugin('fontFamily', [
[
'font',
['fontFamily'],
value => {
return Array.isArray(value) ? value.join(', ') : value
},
],
])
}

3
src/plugins/fontSize.js
View File

@ -1,4 +1,5 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -12,7 +13,7 @@ export default function() {
}
return [
`.${e(`text-${modifier}`)}`,
nameClass('text', modifier),
{
'font-size': fontSize,
...(lineHeight === undefined

17
src/plugins/fontWeight.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('fontWeight'), (value, modifier) => {
return [
`.${e(`font-${modifier}`)}`,
{
'font-weight': value,
},
]
})
)
addUtilities(utilities, variants('fontWeight'))
}
return createUtilityPlugin('fontWeight', [['font', ['fontWeight']]])
}

7
src/plugins/gradientColorStops.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
import { toRgba } from '../util/withAlphaVariable'
@ -24,21 +25,21 @@ export default function() {
return [
[
`.${e(`from-${modifier}`)}`,
nameClass('from', modifier),
{
'--gradient-from-color': toColorValue(value, 'from'),
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
},
],
[
`.${e(`via-${modifier}`)}`,
nameClass('via', modifier),
{
'--gradient-via-color': toColorValue(value, 'via'),
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`,
},
],
[
`.${e(`to-${modifier}`)}`,
nameClass('to', modifier),
{
'--gradient-to-color': toColorValue(value, 'to'),
},

17
src/plugins/height.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('height'), (value, modifier) => {
return [
`.${e(`h-${modifier}`)}`,
{
height: value,
},
]
})
)
addUtilities(utilities, variants('height'))
}
return createUtilityPlugin('height', [['h', ['height']]])
}

18
src/plugins/inset.js
View File

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

18
src/plugins/letterSpacing.js
View File

@ -1,19 +1,5 @@
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, theme, variants, e }) {
const utilities = _.fromPairs(
_.map(theme('letterSpacing'), (value, modifier) => {
return [
`.${e(prefixNegativeModifiers('tracking', modifier))}`,
{
'letter-spacing': value,
},
]
})
)
addUtilities(utilities, variants('letterSpacing'))
}
return createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]])
}

17
src/plugins/lineHeight.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('lineHeight'), (value, modifier) => {
return [
`.${e(`leading-${modifier}`)}`,
{
'line-height': value,
},
]
})
)
addUtilities(utilities, variants('lineHeight'))
}
return createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]])
}

17
src/plugins/listStyleType.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('listStyleType'), (value, modifier) => {
return [
`.${e(`list-${modifier}`)}`,
{
'list-style-type': value,
},
]
})
)
addUtilities(utilities, variants('listStyleType'))
}
return createUtilityPlugin('listStyleType', [['list', ['listStyleType']]])
}

16
src/plugins/margin.js
View File

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

17
src/plugins/maxHeight.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('maxHeight'), (value, modifier) => {
return [
`.${e(`max-h-${modifier}`)}`,
{
'max-height': value,
},
]
})
)
addUtilities(utilities, variants('maxHeight'))
}
return createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]])
}

17
src/plugins/maxWidth.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('maxWidth'), (value, modifier) => {
return [
`.${e(`max-w-${modifier}`)}`,
{
'max-width': value,
},
]
})
)
addUtilities(utilities, variants('maxWidth'))
}
return createUtilityPlugin('maxWidth', [['max-w', ['maxWidth']]])
}

17
src/plugins/minHeight.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('minHeight'), (value, modifier) => {
return [
`.${e(`min-h-${modifier}`)}`,
{
'min-height': value,
},
]
})
)
addUtilities(utilities, variants('minHeight'))
}
return createUtilityPlugin('minHeight', [['min-h', ['minHeight']]])
}

17
src/plugins/minWidth.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('minWidth'), (value, modifier) => {
return [
`.${e(`min-w-${modifier}`)}`,
{
'min-width': value,
},
]
})
)
addUtilities(utilities, variants('minWidth'))
}
return createUtilityPlugin('minWidth', [['min-w', ['minWidth']]])
}

17
src/plugins/objectPosition.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('objectPosition'), (value, modifier) => {
return [
`.${e(`object-${modifier}`)}`,
{
'object-position': value,
},
]
})
)
addUtilities(utilities, variants('objectPosition'))
}
return createUtilityPlugin('objectPosition', [['object', ['objectPosition']]])
}

17
src/plugins/opacity.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('opacity'), (value, modifier) => {
return [
`.${e(`opacity-${modifier}`)}`,
{
opacity: value,
},
]
})
)
addUtilities(utilities, variants('opacity'))
}
return createUtilityPlugin('opacity', [['opacity', ['opacity']]])
}

17
src/plugins/order.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('order'), (value, modifier) => {
return [
`.${e(`order-${modifier}`)}`,
{
order: value,
},
]
})
)
addUtilities(utilities, variants('order'))
}
return createUtilityPlugin('order', [['order', ['order']]])
}

3
src/plugins/outline.js
View File

@ -1,4 +1,5 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -7,7 +8,7 @@ export default function() {
const [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
return [
`.${e(`outline-${modifier}`)}`,
nameClass('outline', modifier),
{
outline,
outlineOffset,

15
src/plugins/padding.js
View File

@ -1,20 +1,21 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(`p-${modifier}`)}`]: { padding: `${size}` },
[nameClass('p', modifier)]: { padding: `${size}` },
}),
(size, modifier) => ({
[`.${e(`py-${modifier}`)}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
[`.${e(`px-${modifier}`)}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
[nameClass('py', modifier)]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` },
[nameClass('px', modifier)]: { 'padding-left': `${size}`, 'padding-right': `${size}` },
}),
(size, modifier) => ({
[`.${e(`pt-${modifier}`)}`]: { 'padding-top': `${size}` },
[`.${e(`pr-${modifier}`)}`]: { 'padding-right': `${size}` },
[`.${e(`pb-${modifier}`)}`]: { 'padding-bottom': `${size}` },
[`.${e(`pl-${modifier}`)}`]: { 'padding-left': `${size}` },
[nameClass('pt', modifier)]: { 'padding-top': `${size}` },
[nameClass('pr', modifier)]: { 'padding-right': `${size}` },
[nameClass('pb', modifier)]: { 'padding-bottom': `${size}` },
[nameClass('pl', modifier)]: { 'padding-left': `${size}` },
}),
]

3
src/plugins/placeholderColor.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
@ -21,7 +22,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [`.${e(`placeholder-${modifier}`)}::placeholder`, getProperties(value)]
return [`${nameClass('placeholder', modifier)}::placeholder`, getProperties(value)]
})
)

3
src/plugins/placeholderOpacity.js
View File

@ -1,11 +1,12 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('placeholderOpacity'), (value, modifier) => {
return [
`.${e(`placeholder-opacity-${modifier}`)}::placeholder`,
`${nameClass('placeholder-opacity', modifier)}::placeholder`,
{
'--placeholder-opacity': value,
},

6
src/plugins/space.js
View File

@ -1,16 +1,16 @@
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
import nameClass from '../util/nameClass'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const generators = [
(size, modifier) => ({
[`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {
[`${nameClass('space-y', modifier)} > :not(template) ~ :not(template)`]: {
'--space-y-reverse': '0',
'margin-top': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-y-reverse)))`,
'margin-bottom': `calc(${size === '0' ? '0px' : size} * var(--space-y-reverse))`,
},
[`.${e(prefixNegativeModifiers('space-x', modifier))} > :not(template) ~ :not(template)`]: {
[`${nameClass('space-x', modifier)} > :not(template) ~ :not(template)`]: {
'--space-x-reverse': '0',
'margin-right': `calc(${size === '0' ? '0px' : size} * var(--space-x-reverse))`,
'margin-left': `calc(${size === '0' ? '0px' : size} * calc(1 - var(--space-x-reverse)))`,

3
src/plugins/stroke.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
export default function() {
@ -8,7 +9,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [`.${e(`stroke-${modifier}`)}`, { stroke: toColorValue(value) }]
return [nameClass('stroke', modifier), { stroke: toColorValue(value) }]
})
)

17
src/plugins/strokeWidth.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('strokeWidth'), (value, modifier) => {
return [
`.${e(`stroke-${modifier}`)}`,
{
strokeWidth: value,
},
]
})
)
addUtilities(utilities, variants('strokeWidth'))
}
return createUtilityPlugin('strokeWidth', [['stroke', ['strokeWidth']]])
}

3
src/plugins/textColor.js
View File

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import nameClass from '../util/nameClass'
import toColorValue from '../util/toColorValue'
import withAlphaVariable from '../util/withAlphaVariable'
@ -21,7 +22,7 @@ export default function() {
const utilities = _.fromPairs(
_.map(colors, (value, modifier) => {
return [`.${e(`text-${modifier}`)}`, getProperties(value)]
return [nameClass('text', modifier), getProperties(value)]
})
)

17
src/plugins/width.js
View File

@ -1,18 +1,5 @@
import _ from 'lodash'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('width'), (value, modifier) => {
return [
`.${e(`w-${modifier}`)}`,
{
width: value,
},
]
})
)
addUtilities(utilities, variants('width'))
}
return createUtilityPlugin('width', [['w', ['width']]])
}

18
src/plugins/zIndex.js
View File

@ -1,19 +1,5 @@
import _ from 'lodash'
import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return function({ addUtilities, e, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('zIndex'), (value, modifier) => {
return [
`.${e(prefixNegativeModifiers('z', modifier))}`,
{
'z-index': value,
},
]
})
)
addUtilities(utilities, variants('zIndex'))
}
return createUtilityPlugin('zIndex', [['z', ['zIndex']]])
}

17
src/util/createUtilityPlugin.js
View File

@ -2,27 +2,16 @@ import identity from 'lodash/identity'
import fromPairs from 'lodash/fromPairs'
import toPairs from 'lodash/toPairs'
import castArray from 'lodash/castArray'
function className(classPrefix, key) {
if (key === 'DEFAULT') {
return classPrefix
}
if (key.startsWith('-')) {
return `-${classPrefix}${key}`
}
return `${classPrefix}-${key}`
}
import nameClass from './nameClass'
export default function createUtilityPlugin(themeKey, utilityVariations) {
return function({ e, addUtilities, variants, theme }) {
return function({ addUtilities, variants, theme }) {
const utilities = utilityVariations.map(
([classPrefix, properties, transformValue = identity]) => {
return fromPairs(
toPairs(theme(themeKey)).map(([key, value]) => {
return [
`.${e(className(classPrefix, key))}`,
nameClass(classPrefix, key),
fromPairs(castArray(properties).map(property => [property, transformValue(value)])),
]
})

21
src/util/nameClass.js Normal file
View File

@ -0,0 +1,21 @@
import escapeClassName from './escapeClassName'
function asClass(name) {
return `.${escapeClassName(name)}`
}
export default function nameClass(classPrefix, key) {
if (key === 'DEFAULT') {
return asClass(classPrefix)
}
if (key === '-') {
return asClass(`-${classPrefix}`)
}
if (key.startsWith('-')) {
return asClass(`-${classPrefix}${key}`)
}
return asClass(`${classPrefix}-${key}`)
}