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

Cleanup custom properties (#2771)

Browse source 
* prefix custom properties with tw-

* prefix custom properties with tw- in tests

* prefix gradient values in the defaultConfig

* inline gradient-via-color

* simplify --tw-tailwind-empty to --tw-empty

* replace the long --tw-font-variant-numeric-... to the way shorter --tw-fvn-...

* Rename --tw-box-shadow to --tw-shadow

To match class name.

* Rename font-variant-numeric variables

* Remove 'transform' from transform variables

* Shorten gradient variables

* Fix style

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Robin Malfait 2020-11-16 17:45:55 +01:00 • committed by GitHub
parent f57fbb62ae
commit b86bdbcd7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 136158 additions and 142205 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/plugins/backgroundColor.js
View file

@ -13,7 +13,7 @@ export default function () {
return withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
}

2
src/plugins/backgroundOpacity.js
View file

@ -1,5 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])
return createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--tw-bg-opacity']]])
}

2
src/plugins/borderColor.js
View file

@ -13,7 +13,7 @@ export default function () {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
variable: '--tw-border-opacity',
})
}

2
src/plugins/borderOpacity.js
View file

@ -1,5 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])
return createUtilityPlugin('borderOpacity', [['border-opacity', ['--tw-border-opacity']]])
}

8
src/plugins/boxShadow.js
View file

@ -8,11 +8,11 @@ export default function () {
return [
nameClass('shadow', modifier),
{
'--box-shadow': value === 'none' ? '0 0 #0000' : value,
'--tw-shadow': value === 'none' ? '0 0 #0000' : value,
'box-shadow': [
`var(--ring-offset-shadow, 0 0 #0000)`,
`var(--ring-shadow, 0 0 #0000)`,
`var(--box-shadow)`,
`var(--tw-ring-offset-shadow, 0 0 #0000)`,
`var(--tw-ring-shadow, 0 0 #0000)`,
`var(--tw-shadow)`,
].join(', '),
},
]

2
src/plugins/divideColor.js
View file

@ -13,7 +13,7 @@ export default function () {
return withAlphaVariable({
color: value,
property: 'border-color',
variable: '--divide-opacity',
variable: '--tw-divide-opacity',
})
}

2
src/plugins/divideOpacity.js
View file

@ -8,7 +8,7 @@ export default function () {
return [
`${nameClass('divide-opacity', modifier)} > :not([hidden]) ~ :not([hidden])`,
{
'--divide-opacity': value,
'--tw-divide-opacity': value,
},
]
})

16
src/plugins/divideWidth.js
View file

@ -8,14 +8,14 @@ export default function () {
const size = _size === '0' ? '0px' : _size
return {
[`${nameClass('divide-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--divide-y-reverse': '0',
'border-top-width': `calc(${size} * calc(1 - var(--divide-y-reverse)))`,
'border-bottom-width': `calc(${size} * var(--divide-y-reverse))`,
'--tw-divide-y-reverse': '0',
'border-top-width': `calc(${size} * calc(1 - var(--tw-divide-y-reverse)))`,
'border-bottom-width': `calc(${size} * var(--tw-divide-y-reverse))`,
},
[`${nameClass('divide-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--divide-x-reverse': '0',
'border-right-width': `calc(${size} * var(--divide-x-reverse))`,
'border-left-width': `calc(${size} * calc(1 - var(--divide-x-reverse)))`,
'--tw-divide-x-reverse': '0',
'border-right-width': `calc(${size} * var(--tw-divide-x-reverse))`,
'border-left-width': `calc(${size} * calc(1 - var(--tw-divide-x-reverse)))`,
},
}
},
@ -28,10 +28,10 @@ export default function () {
}),
{
'.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--divide-y-reverse': '1',
'--tw-divide-y-reverse': '1',
},
'.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--divide-x-reverse': '1',
'--tw-divide-x-reverse': '1',
},
},
]

28
src/plugins/fontVariantNumeric.js
View file

@ -3,40 +3,40 @@ export default function () {
addUtilities(
{
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions': {
'--font-variant-numeric-ordinal': 'var(--tailwind-empty,/*!*/ /*!*/)',
'--font-variant-numeric-slashed-zero': 'var(--tailwind-empty,/*!*/ /*!*/)',
'--font-variant-numeric-figure': 'var(--tailwind-empty,/*!*/ /*!*/)',
'--font-variant-numeric-spacing': 'var(--tailwind-empty,/*!*/ /*!*/)',
'--font-variant-numeric-fraction': 'var(--tailwind-empty,/*!*/ /*!*/)',
'--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
'font-variant-numeric':
'var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction)',
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
},
'.normal-nums': {
'font-variant-numeric': 'normal',
},
'.ordinal': {
'--font-variant-numeric-ordinal': 'ordinal',
'--tw-ordinal': 'ordinal',
},
'.slashed-zero': {
'--font-variant-numeric-slashed-zero': 'slashed-zero',
'--tw-slashed-zero': 'slashed-zero',
},
'.lining-nums': {
'--font-variant-numeric-figure': 'lining-nums',
'--tw-numeric-figure': 'lining-nums',
},
'.oldstyle-nums': {
'--font-variant-numeric-figure': 'oldstyle-nums',
'--tw-numeric-figure': 'oldstyle-nums',
},
'.proportional-nums': {
'--font-variant-numeric-spacing': 'proportional-nums',
'--tw-numeric-spacing': 'proportional-nums',
},
'.tabular-nums': {
'--font-variant-numeric-spacing': 'tabular-nums',
'--tw-numeric-spacing': 'tabular-nums',
},
'.diagonal-fractions': {
'--font-variant-numeric-fraction': 'diagonal-fractions',
'--tw-numeric-fraction': 'diagonal-fractions',
},
'.stacked-fractions': {
'--font-variant-numeric-fraction': 'stacked-fractions',
'--tw-numeric-fraction': 'stacked-fractions',
},
},
variants('fontVariantNumeric')

12
src/plugins/gradientColorStops.js
View file

@ -27,21 +27,23 @@ export default function () {
[
nameClass('from', modifier),
{
'--gradient-from-color': toColorValue(value, 'from'),
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
'--tw-gradient-from': toColorValue(value, 'from'),
'--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentTo})`,
},
],
[
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})`,
'--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
value,
'via'
)}, var(--tw-gradient-to, ${transparentTo})`,
},
],
[
nameClass('to', modifier),
{
'--gradient-to-color': toColorValue(value, 'to'),
'--tw-gradient-to': toColorValue(value, 'to'),
},
],
]

2
src/plugins/placeholderColor.js
View file

@ -13,7 +13,7 @@ export default function () {
return withAlphaVariable({
color: value,
property: 'color',
variable: '--placeholder-opacity',
variable: '--tw-placeholder-opacity',
})
}

2
src/plugins/placeholderOpacity.js
View file

@ -8,7 +8,7 @@ export default function () {
return [
`${nameClass('placeholder-opacity', modifier)}::placeholder`,
{
'--placeholder-opacity': value,
'--tw-placeholder-opacity': value,
},
]
})

4
src/plugins/ringColor.js
View file

@ -10,8 +10,8 @@ export default function () {
const getProperties = (value) => {
return withAlphaVariable({
color: value,
property: '--ring-color',
variable: '--ring-opacity',
property: '--tw-ring-color',
variable: '--tw-ring-opacity',
})
}

2
src/plugins/ringOffsetColor.js
View file

@ -11,7 +11,7 @@ export default function () {
return [
nameClass('ring-offset', modifier),
{
'--ring-offset-color': toColorValue(value),
'--tw-ring-offset-color': toColorValue(value),
},
]
})

2
src/plugins/ringOffsetWidth.js
View file

@ -8,7 +8,7 @@ export default function () {
return [
nameClass('ring-offset', modifier),
{
'--ring-offset-width': value,
'--tw-ring-offset-width': value,
},
]
})

2
src/plugins/ringOpacity.js
View file

@ -8,7 +8,7 @@ export default function () {
return [
nameClass('ring-opacity', modifier),
{
'--ring-opacity': value,
'--tw-ring-opacity': value,
},
]
})

20
src/plugins/ringWidth.js
View file

@ -21,16 +21,16 @@ export default function () {
return [
nameClass('ring', modifier),
{
'--ring-inset': 'var(--tailwind-empty,/*!*/ /*!*/)',
'--ring-offset-width': '0px',
'--ring-offset-color': '#fff',
'--ring-color': ringColorDefault,
'--ring-offset-shadow': `var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color)`,
'--ring-shadow': `var(--ring-inset) 0 0 0 calc(${value} + var(--ring-offset-width)) var(--ring-color)`,
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-offset-width': '0px',
'--tw-ring-offset-color': '#fff',
'--tw-ring-color': ringColorDefault,
'--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
'--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
'box-shadow': [
`var(--ring-offset-shadow)`,
`var(--ring-shadow)`,
`var(--box-shadow, 0 0 #0000)`,
`var(--tw-ring-offset-shadow)`,
`var(--tw-ring-shadow)`,
`var(--tw-shadow, 0 0 #0000)`,
].join(', '),
},
]
@ -41,7 +41,7 @@ export default function () {
utilities,
{
'.ring-inset': {
'--ring-inset': 'inset',
'--tw-ring-inset': 'inset',
},
},
],

2
src/plugins/rotate.js
View file

@ -1,5 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('rotate', [['rotate', ['--transform-rotate']]])
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])
}

6
src/plugins/scale.js
View file

@ -2,8 +2,8 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('scale', [
['scale', ['--transform-scale-x', '--transform-scale-y']],
['scale-x', ['--transform-scale-x']],
['scale-y', ['--transform-scale-y']],
['scale', ['--tw-scale-x', '--tw-scale-y']],
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
])
}

4
src/plugins/skew.js
View file

@ -2,7 +2,7 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('skew', [
['skew-x', ['--transform-skew-x']],
['skew-y', ['--transform-skew-y']],
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
])
}

16
src/plugins/space.js
View file

@ -8,14 +8,14 @@ export default function () {
const size = _size === '0' ? '0px' : _size
return {
[`${nameClass('space-y', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--space-y-reverse': '0',
'margin-top': `calc(${size} * calc(1 - var(--space-y-reverse)))`,
'margin-bottom': `calc(${size} * var(--space-y-reverse))`,
'--tw-space-y-reverse': '0',
'margin-top': `calc(${size} * calc(1 - var(--tw-space-y-reverse)))`,
'margin-bottom': `calc(${size} * var(--tw-space-y-reverse))`,
},
[`${nameClass('space-x', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
'--space-x-reverse': '0',
'margin-right': `calc(${size} * var(--space-x-reverse))`,
'margin-left': `calc(${size} * calc(1 - var(--space-x-reverse)))`,
'--tw-space-x-reverse': '0',
'margin-right': `calc(${size} * var(--tw-space-x-reverse))`,
'margin-left': `calc(${size} * calc(1 - var(--tw-space-x-reverse)))`,
},
}
},
@ -26,10 +26,10 @@ export default function () {
..._.flatMap(theme('space'), generator),
{
'.space-y-reverse > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '1',
'--tw-space-y-reverse': '1',
},
'.space-x-reverse > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '1',
'--tw-space-x-reverse': '1',
},
},
]

2
src/plugins/textColor.js
View file

@ -13,7 +13,7 @@ export default function () {
return withAlphaVariable({
color: value,
property: 'color',
variable: '--text-opacity',
variable: '--tw-text-opacity',
})
}

2
src/plugins/textOpacity.js
View file

@ -1,5 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('textOpacity', [['text-opacity', ['--text-opacity']]])
return createUtilityPlugin('textOpacity', [['text-opacity', ['--tw-text-opacity']]])
}

54
src/plugins/transform.js
View file

@ -3,38 +3,38 @@ export default function () {
addUtilities(
{
'.transform': {
'--transform-translate-x': '0',
'--transform-translate-y': '0',
'--transform-rotate': '0',
'--transform-skew-x': '0',
'--transform-skew-y': '0',
'--transform-scale-x': '1',
'--transform-scale-y': '1',
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'translateX(var(--transform-translate-x))',
'translateY(var(--transform-translate-y))',
'rotate(var(--transform-rotate))',
'skewX(var(--transform-skew-x))',
'skewY(var(--transform-skew-y))',
'scaleX(var(--transform-scale-x))',
'scaleY(var(--transform-scale-y))',
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--transform-translate-x': '0',
'--transform-translate-y': '0',
'--transform-rotate': '0',
'--transform-skew-x': '0',
'--transform-skew-y': '0',
'--transform-scale-x': '1',
'--transform-scale-y': '1',
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
'--tw-skew-x': '0',
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'translate3d(var(--transform-translate-x), var(--transform-translate-y), 0)',
'rotate(var(--transform-rotate))',
'skewX(var(--transform-skew-x))',
'skewY(var(--transform-skew-y))',
'scaleX(var(--transform-scale-x))',
'scaleY(var(--transform-scale-y))',
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
'skewY(var(--tw-skew-y))',
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-none': { transform: 'none' },

4
src/plugins/translate.js
View file

@ -2,7 +2,7 @@ import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('translate', [
['translate-x', ['--transform-translate-x']],
['translate-y', ['--transform-translate-y']],
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
])
}