Remove need for transform toggle (#4604)

src/corePlugins.js

@@ -1,8 +1,26 @@
 import * as plugins from './plugins/index.js'
 import configurePlugins from './util/configurePlugins'
 
+function move(items, item, before) {
+  if (items.indexOf(item) === -1) {
+    return items
+  }
+
+  items = [...items]
+  let fromIndex = items.indexOf(item)
+  let toIndex = items.indexOf(before)
+  items.splice(fromIndex, 1)
+  items.splice(toIndex, 0, item)
+  return items
+}
+
 export default function ({ corePlugins: corePluginConfig }) {
-  return configurePlugins(corePluginConfig, Object.keys(plugins)).map((pluginName) => {
+  let pluginOrder = Object.keys(plugins)
+
+  pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
+  pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')
+
+  return pluginOrder.map((pluginName) => {
     return plugins[pluginName]()
   })
 }

src/plugins/index.js

@@ -33,12 +33,12 @@ export { default as flexGrow } from './flexGrow'
 export { default as tableLayout } from './tableLayout'
 export { default as borderCollapse } from './borderCollapse'
 
-export { default as transform } from './transform'
 export { default as transformOrigin } from './transformOrigin'
 export { default as translate } from './translate'
 export { default as rotate } from './rotate'
 export { default as skew } from './skew'
 export { default as scale } from './scale'
+export { default as transform } from './transform'
 
 export { default as animation } from './animation'
 

src/plugins/rotate.js

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

src/plugins/scale.js

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

src/plugins/skew.js

@@ -1,10 +1,21 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin('skew', [
-    [
-      ['skew-x', ['--tw-skew-x']],
-      ['skew-y', ['--tw-skew-y']],
-    ],
-  ])
+  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)']]],
+        ],
+      ])({ config, ...rest })
+    } else {
+      return createUtilityPlugin('skew', [
+        [
+          ['skew-x', ['--tw-skew-x']],
+          ['skew-y', ['--tw-skew-y']],
+        ],
+      ])({ config, ...rest })
+    }
+  }
 }

src/plugins/transform.js

@@ -1,16 +1,16 @@
 export default function () {
-  return function ({ addUtilities, variants }) {
-    addUtilities(
-      {
-        '.transform': {
+  return function ({ config, addBase, addUtilities, variants }) {
+    if (config('mode') === 'jit') {
+      addBase({
+        '*': {
           '--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: [
+          '--tw-transform': [
             'translateX(var(--tw-translate-x))',
             'translateY(var(--tw-translate-y))',
             'rotate(var(--tw-rotate))',
@@ -20,26 +20,76 @@ export default function () {
             'scaleY(var(--tw-scale-y))',
           ].join(' '),
         },
-        '.transform-gpu': {
-          '--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(--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(' '),
+      })
+      addUtilities(
+        {
+          '.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(' '),
+          },
+          '.transform-gpu': {
+            '--tw-transform': [
+              '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' },
+        },
+        variants('transform')
+      )
+    } else {
+      addUtilities(
+        {
+          '.transform': {
+            '--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(--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': {
+            '--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(--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' },
         },
-        '.transform-none': { transform: 'none' },
-      },
-      variants('transform')
-    )
+        variants('transform')
+      )
+    }
   }
 }

src/plugins/translate.js

@@ -1,10 +1,21 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function () {
-  return createUtilityPlugin('translate', [
-    [
-      ['translate-x', ['--tw-translate-x']],
-      ['translate-y', ['--tw-translate-y']],
-    ],
-  ])
+  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)']]],
+        ],
+      ])({ config, ...rest })
+    } else {
+      return createUtilityPlugin('translate', [
+        [
+          ['translate-x', ['--tw-translate-x']],
+          ['translate-y', ['--tw-translate-y']],
+        ],
+      ])({ config, ...rest })
+    }
+  }
 }

src/util/createUtilityPlugin.js

@@ -24,10 +24,12 @@ export default function createUtilityPlugin(
         group.reduce((obj, [classPrefix, properties]) => {
           return Object.assign(obj, {
             [classPrefix]: (value) => {
-              return properties.reduce(
-                (obj, name) => Object.assign(obj, { [name]: transformValue(value) }),
-                {}
-              )
+              return properties.reduce((obj, name) => {
+                if (Array.isArray(name)) {
+                  return Object.assign(obj, { [name[0]]: name[1] })
+                }
+                return Object.assign(obj, { [name]: transformValue(value) })
+              }, {})
             },
           })
         }, {}),

tests/jit/apply.test.css

@@ -1,3 +1,15 @@
+* {
+  --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;
+  --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));
+}
 *,
 ::before,
 ::after {

tests/jit/arbitrary-values.test.css

@@ -1,3 +1,15 @@
+* {
+  --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;
+  --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));
+}
 *,
 ::before,
 ::after {
@@ -137,21 +149,27 @@
 }
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
+  transform: var(--tw-transform);
 }
 .rotate-\[2\.3rad\] {
   --tw-rotate: 2.3rad;
+  transform: var(--tw-transform);
 }
 .rotate-\[401grad\] {
   --tw-rotate: 401grad;
+  transform: var(--tw-transform);
 }
 .rotate-\[1\.5turn\] {
   --tw-rotate: 1.5turn;
+  transform: var(--tw-transform);
 }
 .skew-x-\[3px\] {
   --tw-skew-x: 3px;
+  transform: var(--tw-transform);
 }
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
+  transform: var(--tw-transform);
 }
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;