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

Remove var reads from universal selectors

Browse source
This commit is contained in:
Adam Wathan 2021-06-29 17:02:16 -04:00
parent b417e33638
commit f90763ac55
28 changed files with 161 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/plugins/backdropBlur.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-blur': (value) => {
return {
'--tw-backdrop-blur': `blur(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropBrightness.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-brightness': (value) => {
return {
'--tw-backdrop-brightness': `brightness(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropContrast.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-contrast': (value) => {
return {
'--tw-backdrop-contrast': `contrast(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

73
src/plugins/backdropFilter.js
View file

@ -1,33 +1,34 @@
export let filterVars = [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' ')
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*, ::before, ::after': {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-filter': [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' '),
'--tw-backdrop-blur': ' ',
'--tw-backdrop-brightness': ' ',
'--tw-backdrop-contrast': ' ',
'--tw-backdrop-grayscale': ' ',
'--tw-backdrop-hue-rotate': ' ',
'--tw-backdrop-invert': ' ',
'--tw-backdrop-opacity': ' ',
'--tw-backdrop-saturate': ' ',
'--tw-backdrop-sepia': ' ',
},
})
addUtilities(
{
'.backdrop-filter': { 'backdrop-filter': 'var(--tw-backdrop-filter)' },
'.backdrop-filter': { 'backdrop-filter': filterVars },
'.backdrop-filter-none': { 'backdrop-filter': 'none' },
},
variants('backdropFilter')
@ -36,26 +37,16 @@ export default function () {
addUtilities(
{
'.backdrop-filter': {
'--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'backdrop-filter': [
'var(--tw-backdrop-blur)',
'var(--tw-backdrop-brightness)',
'var(--tw-backdrop-contrast)',
'var(--tw-backdrop-grayscale)',
'var(--tw-backdrop-hue-rotate)',
'var(--tw-backdrop-invert)',
'var(--tw-backdrop-opacity)',
'var(--tw-backdrop-saturate)',
'var(--tw-backdrop-sepia)',
].join(' '),
'--tw-backdrop-blur': ' ',
'--tw-backdrop-brightness': ' ',
'--tw-backdrop-contrast': ' ',
'--tw-backdrop-grayscale': ' ',
'--tw-backdrop-hue-rotate': ' ',
'--tw-backdrop-invert': ' ',
'--tw-backdrop-opacity': ' ',
'--tw-backdrop-saturate': ' ',
'--tw-backdrop-sepia': ' ',
'backdrop-filter': filterVars,
},
'.backdrop-filter-none': { 'backdrop-filter': 'none' },
},

4
src/plugins/backdropGrayscale.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-grayscale': (value) => {
return {
'--tw-backdrop-grayscale': `grayscale(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropHueRotate.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-hue-rotate': (value) => {
return {
'--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropInvert.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-invert': (value) => {
return {
'--tw-backdrop-invert': `invert(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropOpacity.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-opacity': (value) => {
return {
'--tw-backdrop-opacity': `opacity(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropSaturate.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-saturate': (value) => {
return {
'--tw-backdrop-saturate': `saturate(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/backdropSepia.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './backdropFilter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'backdrop-sepia': (value) => {
return {
'--tw-backdrop-sepia': `sepia(${value})`,
...(config('mode') === 'jit' ? { 'backdrop-filter': 'var(--tw-backdrop-filter)' } : {}),
...(config('mode') === 'jit' ? { 'backdrop-filter': filterVars } : {}),
}
},
},

4
src/plugins/blur.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
blur: (value) => {
return {
'--tw-blur': `blur(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

30
src/plugins/borderColor.js
View file

@ -3,21 +3,21 @@ import withAlphaVariable from '../util/withAlphaVariable'
export default function () {
return function ({ config, addBase, matchUtilities, theme, variants, corePlugins }) {
if (!corePlugins('borderOpacity')) {
addBase({
'*, ::before, ::after': {
'border-color': theme('borderColor.DEFAULT', 'currentColor'),
},
})
} else {
addBase({
'*, ::before, ::after': withAlphaVariable({
color: theme('borderColor.DEFAULT', 'currentColor'),
property: 'border-color',
variable: '--tw-border-opacity',
}),
})
}
// if (!corePlugins('borderOpacity')) {
addBase({
'*, ::before, ::after': {
'border-color': theme('borderColor.DEFAULT', 'currentColor'),
},
})
// } else {
// addBase({
// '*, ::before, ::after': withAlphaVariable({
// color: theme('borderColor.DEFAULT', 'currentColor'),
// property: 'border-color',
// variable: '--tw-border-opacity',
// }),
// })
// }
matchUtilities(
{

4
src/plugins/brightness.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
brightness: (value) => {
return {
'--tw-brightness': `brightness(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

4
src/plugins/contrast.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
contrast: (value) => {
return {
'--tw-contrast': `contrast(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

3
src/plugins/dropShadow.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { filterVars } from './filter'
export default function () {
return function ({ config, addUtilities, theme, variants }) {
@ -11,7 +12,7 @@ export default function () {
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
},
]
})

73
src/plugins/filter.js
View file

@ -1,33 +1,34 @@
export let filterVars = [
'var(--tw-blur)',
'var(--tw-brightness)',
'var(--tw-contrast)',
'var(--tw-grayscale)',
'var(--tw-hue-rotate)',
'var(--tw-invert)',
'var(--tw-saturate)',
'var(--tw-sepia)',
'var(--tw-drop-shadow)',
].join(' ')
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*, ::before, ::after': {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-filter': [
'var(--tw-blur)',
'var(--tw-brightness)',
'var(--tw-contrast)',
'var(--tw-grayscale)',
'var(--tw-hue-rotate)',
'var(--tw-invert)',
'var(--tw-saturate)',
'var(--tw-sepia)',
'var(--tw-drop-shadow)',
].join(' '),
'--tw-blur': ' ',
'--tw-brightness': ' ',
'--tw-contrast': ' ',
'--tw-grayscale': ' ',
'--tw-hue-rotate': ' ',
'--tw-invert': ' ',
'--tw-saturate': ' ',
'--tw-sepia': ' ',
'--tw-drop-shadow': ' ',
},
})
addUtilities(
{
'.filter': { filter: 'var(--tw-filter)' },
'.filter': { filter: filterVars },
'.filter-none': { filter: 'none' },
},
variants('filter')
@ -36,26 +37,16 @@ export default function () {
addUtilities(
{
'.filter': {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
filter: [
'var(--tw-blur)',
'var(--tw-brightness)',
'var(--tw-contrast)',
'var(--tw-grayscale)',
'var(--tw-hue-rotate)',
'var(--tw-invert)',
'var(--tw-saturate)',
'var(--tw-sepia)',
'var(--tw-drop-shadow)',
].join(' '),
'--tw-blur': ' ',
'--tw-brightness': ' ',
'--tw-contrast': ' ',
'--tw-grayscale': ' ',
'--tw-hue-rotate': ' ',
'--tw-invert': ' ',
'--tw-saturate': ' ',
'--tw-sepia': ' ',
'--tw-drop-shadow': ' ',
filter: filterVars,
},
'.filter-none': { filter: 'none' },
},

10
src/plugins/fontVariantNumeric.js
View file

@ -4,11 +4,11 @@ export default function () {
{
'.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions':
{
'--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,/*!*/ /*!*/)',
'--tw-ordinal': ' ',
'--tw-slashed-zero': ' ',
'--tw-numeric-figure': ' ',
'--tw-numeric-spacing': ' ',
'--tw-numeric-fraction': ' ',
'font-variant-numeric':
'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
},

4
src/plugins/grayscale.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
grayscale: (value) => {
return {
'--tw-grayscale': `grayscale(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

4
src/plugins/hueRotate.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
'hue-rotate': (value) => {
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

4
src/plugins/invert.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
invert: (value) => {
return {
'--tw-invert': `invert(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

2
src/plugins/ringWidth.js
View file

@ -11,7 +11,7 @@ export default function () {
let ringReset = {
'*, ::before, ::after': {
'--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-ring-inset': ' ',
'--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
'--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
'--tw-ring-color': ringColorDefault,

3
src/plugins/rotate.js
View file

@ -1,10 +1,11 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { transformVars } from './transform'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('rotate', [
['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
['rotate', ['--tw-rotate', ['transform', transformVars]]],
])({ config, ...rest })
} else {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })

4
src/plugins/saturate.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
saturate: (value) => {
return {
'--tw-saturate': `saturate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

7
src/plugins/scale.js
View file

@ -1,13 +1,14 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { transformVars } from './transform'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', transformVars]]],
[
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
['scale-x', ['--tw-scale-x', ['transform', transformVars]]],
['scale-y', ['--tw-scale-y', ['transform', transformVars]]],
],
])({ config, ...rest })
} else {

4
src/plugins/sepia.js
View file

@ -1,3 +1,5 @@
import { filterVars } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
@ -5,7 +7,7 @@ export default function () {
sepia: (value) => {
return {
'--tw-sepia': `sepia(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
...(config('mode') === 'jit' ? { filter: filterVars } : {}),
}
},
},

5
src/plugins/skew.js
View file

@ -1,12 +1,13 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { transformVars } from './transform'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
['skew-x', ['--tw-skew-x', ['transform', transformVars]]],
['skew-y', ['--tw-skew-y', ['transform', transformVars]]],
],
])({ config, ...rest })
} else {

29
src/plugins/transform.js
View file

@ -1,3 +1,13 @@
export let transformVars = [
'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(' ')
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
@ -10,15 +20,6 @@ export default function () {
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
'--tw-transform': [
'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(' '),
},
})
addUtilities(
@ -27,15 +28,7 @@ export default function () {
transform: 'var(--tw-transform)',
},
'.transform-cpu': {
'--tw-transform': [
'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(' '),
'--tw-transform': transformVars,
},
'.transform-gpu': {
'--tw-transform': [

5
src/plugins/translate.js
View file

@ -1,12 +1,13 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
import { transformVars } from './transform'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
['translate-x', ['--tw-translate-x', ['transform', transformVars]]],
['translate-y', ['--tw-translate-y', ['transform', transformVars]]],
],
])({ config, ...rest })
} else {