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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
__tests__/applyAtRule.test.js
View File

@ -634,8 +634,8 @@ test('adjacent rules are collapsed after being applied', () => {
`
const expected = `
.foo:hover {
--bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--bg-opacity));
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
opacity: 0.5;
}
.foo {
@ -1055,8 +1055,8 @@ test('you can apply classes in a nested rule', () => {
const expected = `
.selector {
&:hover {
--text-opacity: 1;
color: rgba(255, 255, 255, var(--text-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
}
`

79152
__tests__/fixtures/tailwind-output-flagged.css
View File

File diff suppressed because it is too large Load Diff

79152
__tests__/fixtures/tailwind-output-important.css
View File

File diff suppressed because it is too large Load Diff

40488
__tests__/fixtures/tailwind-output-no-color-opacity.css
View File

File diff suppressed because it is too large Load Diff

79152
__tests__/fixtures/tailwind-output.css
View File

File diff suppressed because it is too large Load Diff

16
__tests__/plugins/boxShadow.test.js
View File

@ -45,24 +45,24 @@ test('box shadow can use DEFAULT keyword and negative prefix syntax', () => {
{
utilities: {
'.shadow': {
'--box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'--tw-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'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)',
},
'.shadow-md': {
'--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'--tw-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'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)',
},
'.-shadow': {
'--box-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
'--tw-shadow': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
'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)',
},
'.-shadow-md': {
'--box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'--tw-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'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)',
},
},
variants: ['responsive'],

52
__tests__/plugins/divideWidth.test.js
View File

@ -22,50 +22,50 @@ test('generating divide width utilities', () => {
[
{
'.divide-y > :not([hidden]) ~ :not([hidden])': {
'--divide-y-reverse': '0',
'border-top-width': 'calc(1px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(1px * var(--divide-y-reverse))',
'--tw-divide-y-reverse': '0',
'border-top-width': 'calc(1px * calc(1 - var(--tw-divide-y-reverse)))',
'border-bottom-width': 'calc(1px * var(--tw-divide-y-reverse))',
},
'.divide-x > :not([hidden]) ~ :not([hidden])': {
'--divide-x-reverse': '0',
'border-right-width': 'calc(1px * var(--divide-x-reverse))',
'border-left-width': 'calc(1px * calc(1 - var(--divide-x-reverse)))',
'--tw-divide-x-reverse': '0',
'border-right-width': 'calc(1px * var(--tw-divide-x-reverse))',
'border-left-width': 'calc(1px * calc(1 - var(--tw-divide-x-reverse)))',
},
'.divide-y-0 > :not([hidden]) ~ :not([hidden])': {
'--divide-y-reverse': '0',
'border-top-width': 'calc(0px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(0px * var(--divide-y-reverse))',
'--tw-divide-y-reverse': '0',
'border-top-width': 'calc(0px * calc(1 - var(--tw-divide-y-reverse)))',
'border-bottom-width': 'calc(0px * var(--tw-divide-y-reverse))',
},
'.divide-x-0 > :not([hidden]) ~ :not([hidden])': {
'--divide-x-reverse': '0',
'border-right-width': 'calc(0px * var(--divide-x-reverse))',
'border-left-width': 'calc(0px * calc(1 - var(--divide-x-reverse)))',
'--tw-divide-x-reverse': '0',
'border-right-width': 'calc(0px * var(--tw-divide-x-reverse))',
'border-left-width': 'calc(0px * calc(1 - var(--tw-divide-x-reverse)))',
},
'.divide-y-2 > :not([hidden]) ~ :not([hidden])': {
'--divide-y-reverse': '0',
'border-top-width': 'calc(2px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(2px * var(--divide-y-reverse))',
'--tw-divide-y-reverse': '0',
'border-top-width': 'calc(2px * calc(1 - var(--tw-divide-y-reverse)))',
'border-bottom-width': 'calc(2px * var(--tw-divide-y-reverse))',
},
'.divide-x-2 > :not([hidden]) ~ :not([hidden])': {
'--divide-x-reverse': '0',
'border-right-width': 'calc(2px * var(--divide-x-reverse))',
'border-left-width': 'calc(2px * calc(1 - var(--divide-x-reverse)))',
'--tw-divide-x-reverse': '0',
'border-right-width': 'calc(2px * var(--tw-divide-x-reverse))',
'border-left-width': 'calc(2px * calc(1 - var(--tw-divide-x-reverse)))',
},
'.divide-y-4 > :not([hidden]) ~ :not([hidden])': {
'--divide-y-reverse': '0',
'border-top-width': 'calc(4px * calc(1 - var(--divide-y-reverse)))',
'border-bottom-width': 'calc(4px * var(--divide-y-reverse))',
'--tw-divide-y-reverse': '0',
'border-top-width': 'calc(4px * calc(1 - var(--tw-divide-y-reverse)))',
'border-bottom-width': 'calc(4px * var(--tw-divide-y-reverse))',
},
'.divide-x-4 > :not([hidden]) ~ :not([hidden])': {
'--divide-x-reverse': '0',
'border-right-width': 'calc(4px * var(--divide-x-reverse))',
'border-left-width': 'calc(4px * calc(1 - var(--divide-x-reverse)))',
'--tw-divide-x-reverse': '0',
'border-right-width': 'calc(4px * var(--tw-divide-x-reverse))',
'border-left-width': 'calc(4px * calc(1 - var(--tw-divide-x-reverse)))',
},
'.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',
},
},
['responsive'],

15
__tests__/plugins/gradientColorStops.test.js
View File

@ -34,22 +34,21 @@ test('opacity variables are given to colors defined as closures', () => {
.then((result) => {
const expected = `
.text-primary {
--text-opacity: 1;
color: rgba(31,31,31,var(--text-opacity,1))
--tw-text-opacity: 1;
color: rgba(31,31,31,var(--tw-text-opacity,1))
}
.text-opacity-50 {
--text-opacity: 0.5
--tw-text-opacity: 0.5
}
.from-primary {
--gradient-from-color: rgb(31,31,31);
--gradient-color-stops: var(--gradient-from-color), var(--gradient-to-color, rgba(31, 31, 31, 0))
--tw-gradient-from: rgb(31,31,31);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0))
}
.via-primary {
--gradient-via-color: rgb(31,31,31);
--gradient-color-stops: var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, rgba(31, 31, 31, 0))
--tw-gradient-stops: var(--tw-gradient-from), rgb(31,31,31), var(--tw-gradient-to, rgba(31, 31, 31, 0))
}
.to-primary {
--gradient-to-color: rgb(31,31,31)
--tw-gradient-to: rgb(31,31,31)
}
`

4
__tests__/plugins/ringColor.test.js
View File

@ -19,8 +19,8 @@ test('defining color as a function', () => {
[
{
'.ring-black': {
'--ring-opacity': '1',
'--ring-color': 'black',
'--tw-ring-opacity': '1',
'--tw-ring-color': 'black',
},
},
[],

2
__tests__/plugins/ringOffsetColor.test.js
View File

@ -19,7 +19,7 @@ test('defining color as a function', () => {
[
{
'.ring-offset-black': {
'--ring-offset-color': 'black',
'--tw-ring-offset-color': 'black',
},
},
[],

76
__tests__/plugins/space.test.js
View File

@ -24,70 +24,70 @@ test('generating space utilities', () => {
[
{
'.space-y-0 > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '0',
'margin-top': 'calc(0px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(0px * var(--space-y-reverse))',
'--tw-space-y-reverse': '0',
'margin-top': 'calc(0px * calc(1 - var(--tw-space-y-reverse)))',
'margin-bottom': 'calc(0px * var(--tw-space-y-reverse))',
},
'.space-x-0 > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '0',
'margin-right': 'calc(0px * var(--space-x-reverse))',
'margin-left': 'calc(0px * calc(1 - var(--space-x-reverse)))',
'--tw-space-x-reverse': '0',
'margin-right': 'calc(0px * var(--tw-space-x-reverse))',
'margin-left': 'calc(0px * calc(1 - var(--tw-space-x-reverse)))',
},
'.space-y-1 > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '0',
'margin-top': 'calc(1px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(1px * var(--space-y-reverse))',
'--tw-space-y-reverse': '0',
'margin-top': 'calc(1px * calc(1 - var(--tw-space-y-reverse)))',
'margin-bottom': 'calc(1px * var(--tw-space-y-reverse))',
},
'.space-x-1 > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '0',
'margin-right': 'calc(1px * var(--space-x-reverse))',
'margin-left': 'calc(1px * calc(1 - var(--space-x-reverse)))',
'--tw-space-x-reverse': '0',
'margin-right': 'calc(1px * var(--tw-space-x-reverse))',
'margin-left': 'calc(1px * calc(1 - var(--tw-space-x-reverse)))',
},
'.space-y-2 > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '0',
'margin-top': 'calc(2px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(2px * var(--space-y-reverse))',
'--tw-space-y-reverse': '0',
'margin-top': 'calc(2px * calc(1 - var(--tw-space-y-reverse)))',
'margin-bottom': 'calc(2px * var(--tw-space-y-reverse))',
},
'.space-x-2 > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '0',
'margin-right': 'calc(2px * var(--space-x-reverse))',
'margin-left': 'calc(2px * calc(1 - var(--space-x-reverse)))',
'--tw-space-x-reverse': '0',
'margin-right': 'calc(2px * var(--tw-space-x-reverse))',
'margin-left': 'calc(2px * calc(1 - var(--tw-space-x-reverse)))',
},
'.space-y-4 > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '0',
'margin-top': 'calc(4px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(4px * var(--space-y-reverse))',
'--tw-space-y-reverse': '0',
'margin-top': 'calc(4px * calc(1 - var(--tw-space-y-reverse)))',
'margin-bottom': 'calc(4px * var(--tw-space-y-reverse))',
},
'.space-x-4 > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '0',
'margin-right': 'calc(4px * var(--space-x-reverse))',
'margin-left': 'calc(4px * calc(1 - var(--space-x-reverse)))',
'--tw-space-x-reverse': '0',
'margin-right': 'calc(4px * var(--tw-space-x-reverse))',
'margin-left': 'calc(4px * calc(1 - var(--tw-space-x-reverse)))',
},
'.-space-y-2 > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '0',
'margin-top': 'calc(-2px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(-2px * var(--space-y-reverse))',
'--tw-space-y-reverse': '0',
'margin-top': 'calc(-2px * calc(1 - var(--tw-space-y-reverse)))',
'margin-bottom': 'calc(-2px * var(--tw-space-y-reverse))',
},
'.-space-x-2 > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '0',
'margin-right': 'calc(-2px * var(--space-x-reverse))',
'margin-left': 'calc(-2px * calc(1 - var(--space-x-reverse)))',
'--tw-space-x-reverse': '0',
'margin-right': 'calc(-2px * var(--tw-space-x-reverse))',
'margin-left': 'calc(-2px * calc(1 - var(--tw-space-x-reverse)))',
},
'.-space-y-1 > :not([hidden]) ~ :not([hidden])': {
'--space-y-reverse': '0',
'margin-top': 'calc(-1px * calc(1 - var(--space-y-reverse)))',
'margin-bottom': 'calc(-1px * var(--space-y-reverse))',
'--tw-space-y-reverse': '0',
'margin-top': 'calc(-1px * calc(1 - var(--tw-space-y-reverse)))',
'margin-bottom': 'calc(-1px * var(--tw-space-y-reverse))',
},
'.-space-x-1 > :not([hidden]) ~ :not([hidden])': {
'--space-x-reverse': '0',
'margin-right': 'calc(-1px * var(--space-x-reverse))',
'margin-left': 'calc(-1px * calc(1 - var(--space-x-reverse)))',
'--tw-space-x-reverse': '0',
'margin-right': 'calc(-1px * var(--tw-space-x-reverse))',
'margin-left': 'calc(-1px * calc(1 - var(--tw-space-x-reverse)))',
},
'.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',
},
},
['responsive'],

30
__tests__/withAlphaVariable.test.js
View File

@ -2,10 +2,10 @@ import withAlphaVariable from '../src/util/withAlphaVariable'
test('it adds the right custom property', () => {
expect(
withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--text-opacity' })
withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--tw-text-opacity' })
).toEqual({
'--text-opacity': '1',
color: 'rgba(255, 0, 0, var(--text-opacity))',
'--tw-text-opacity': '1',
color: 'rgba(255, 0, 0, var(--tw-text-opacity))',
})
})
@ -14,7 +14,7 @@ test('it ignores colors that cannot be parsed', () => {
withAlphaVariable({
color: 'currentColor',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': 'currentColor',
@ -26,7 +26,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: '#ff0000ff',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': '#ff0000ff',
@ -35,7 +35,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: '#ff000080',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': '#ff000080',
@ -44,7 +44,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: '#f00a',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': '#f00a',
@ -53,7 +53,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: '#f00f',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': '#f00f',
@ -62,7 +62,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: 'rgba(255, 255, 255, 1)',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': 'rgba(255, 255, 255, 1)',
@ -71,7 +71,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: 'rgba(255, 255, 255, 0.5)',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': 'rgba(255, 255, 255, 0.5)',
@ -80,7 +80,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: 'hsla(240, 100%, 50%, 1)',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': 'hsla(240, 100%, 50%, 1)',
@ -89,7 +89,7 @@ test('it ignores colors that already have an alpha channel', () => {
withAlphaVariable({
color: 'hsla(240, 100%, 50%, 0.5)',
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'background-color': 'hsla(240, 100%, 50%, 0.5)',
@ -101,10 +101,10 @@ test('it allows a closure to be passed', () => {
withAlphaVariable({
color: ({ opacityVariable }) => `rgba(0, 0, 0, var(${opacityVariable}))`,
property: 'background-color',
variable: '--bg-opacity',
variable: '--tw-bg-opacity',
})
).toEqual({
'--bg-opacity': '1',
'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
'--tw-bg-opacity': '1',
'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))',
})
})

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']],
])
}

16
stubs/defaultConfig.stub.js
View File

@ -74,14 +74,14 @@ module.exports = {
backgroundColor: (theme) => theme('colors'),
backgroundImage: {
none: 'none',
'gradient-to-t': 'linear-gradient(to top, var(--gradient-color-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--gradient-color-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--gradient-color-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--gradient-color-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--gradient-color-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--gradient-color-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--gradient-color-stops))',
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
},
backgroundOpacity: (theme) => theme('opacity'),
backgroundPosition: {