WIP

src/jit/lib/optimizeUniversalRules.js

@@ -1,3 +1,4 @@
+import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 
 let elementSelectorParser = selectorParser((selectors) => {
@@ -26,27 +27,25 @@ export default function collapseAdjacentRules() {
     let variableNodeMap = new Map()
     let universals = new Set()
 
-    root.walkDecls((decl) => {
-      if (!decl.prop.startsWith('--')) {
+    root.walkAtRules('defaults', (rule) => {
+      if (rule.nodes.length > 0) {
+        universals.add(rule)
         return
       }
 
-      if (decl.parent.selector === '*::tailwind') {
-        universals.add(decl.parent)
-        return
-      }
-
-      let variable = decl.prop
-
+      let variable = rule.params
       if (!variableNodeMap.has(variable)) {
         variableNodeMap.set(variable, new Set())
       }
 
-      variableNodeMap.get(variable).add(decl.parent)
+      variableNodeMap.get(variable).add(rule.parent)
+
+      rule.remove()
     })
 
     for (let universal of universals) {
       let selectors = new Set()
+      let rule = postcss.rule()
 
       universal.walkDecls((decl) => {
         let variable = decl.prop
@@ -58,7 +57,10 @@ export default function collapseAdjacentRules() {
         }
       })
 
-      universal.selectors = [...selectors]
+      rule.selectors = [...selectors]
+      rule.append(universal.clone().nodes)
+      universal.before(rule)
+      universal.remove()
     }
   }
 }

src/jit/processTailwindFeatures.js

@@ -46,7 +46,9 @@ export default function processTailwindFeatures(setupContext) {
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)
+    console.time('Optimizer')
     optimizeUniversalRules(context)(root, result)
+    console.timeEnd('Optimizer')
     collapseAdjacentRules(context)(root, result)
   }
 }

src/plugins/borderColor.js

@@ -6,13 +6,13 @@ export default function () {
     if (config('mode') === 'jit') {
       if (!corePlugins('borderOpacity')) {
         addBase({
-          '*::tailwind': {
+          '@defaults --tw-border-opacity': {
             'border-color': theme('borderColor.DEFAULT', 'currentColor'),
           },
         })
       } else {
         addBase({
-          '*::tailwind': withAlphaVariable({
+          '@defaults --tw-border-opacity': withAlphaVariable({
             color: theme('borderColor.DEFAULT', 'currentColor'),
             property: 'border-color',
             variable: '--tw-border-opacity',

src/plugins/borderWidth.js

@@ -5,7 +5,7 @@ export default function () {
   return createUtilityPlugin(
     'borderWidth',
     [
-      ['border', ['border-width']],
+      ['border', ['border-width', ['@defaults --tw-border-opacity', {}]]],
       [
         ['border-t', ['border-top-width']],
         ['border-r', ['border-right-width']],

src/plugins/boxShadow.js

@@ -11,7 +11,9 @@ export default function () {
   return function ({ config, matchUtilities, addBase, addUtilities, theme, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*::tailwind': {
+        '@defaults --tw-shadow': {
+          '--tw-ring-offset-shadow': '0 0 #0000',
+          '--tw-ring-shadow': '0 0 #0000',
           '--tw-shadow': '0 0 #0000',
         },
       })
@@ -32,6 +34,7 @@ export default function () {
           value = transformValue(value)
 
           return {
+            ...(config('mode') === 'jit' ? { '@defaults --tw-shadow': {} } : {}),
             '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
             'box-shadow': defaultBoxShadow,
           }

src/plugins/filter.js

@@ -2,7 +2,7 @@ export default function () {
   return function ({ config, addBase, addUtilities, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*::tailwind': {
+        '@defaults --tw-filter': {
           '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@@ -27,7 +27,7 @@ export default function () {
       })
       addUtilities(
         {
-          '.filter': { filter: 'var(--tw-filter)' },
+          '.filter': { '@defaults --tw-filter': {}, filter: 'var(--tw-filter)' },
           '.filter-none': { filter: 'none' },
         },
         variants('filter')

src/plugins/ringWidth.js

@@ -11,13 +11,14 @@ export default function () {
 
     if (config('mode') === 'jit') {
       addBase({
-        '*::tailwind': {
+        '@defaults --tw-ring-shadow': {
           '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
           '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
           '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
           '--tw-ring-color': ringColorDefault,
           '--tw-ring-offset-shadow': '0 0 #0000',
           '--tw-ring-shadow': '0 0 #0000',
+          '--tw-shadow': '0 0 #0000',
         },
       })
     } else {
@@ -40,6 +41,7 @@ export default function () {
       {
         ring: (value) => {
           return {
+            ...(config('mode') === 'jit' ? { '@defaults --tw-ring-shadow': {} } : {}),
             '--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': [
@@ -57,6 +59,14 @@ export default function () {
       }
     )
 
-    addUtilities({ '.ring-inset': { '--tw-ring-inset': 'inset' } }, variants('ringWidth'))
+    addUtilities(
+      {
+        '.ring-inset': {
+          ...(config('mode') === 'jit' ? { '@defaults --tw-ring-shadow': {} } : {}),
+          '--tw-ring-inset': 'inset',
+        },
+      },
+      variants('ringWidth')
+    )
   }
 }

src/plugins/rotate.js

@@ -4,7 +4,10 @@ export default function () {
   return function ({ config, ...rest }) {
     if (config('mode') === 'jit') {
       return createUtilityPlugin('rotate', [
-        ['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
+        [
+          'rotate',
+          [['@defaults --tw-transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']],
+        ],
       ])({ config, ...rest })
     } else {
       return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })

src/plugins/scale.js

@@ -4,10 +4,32 @@ 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-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
-          ['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
+          'scale',
+          [
+            ['@defaults --tw-transform', {}],
+            '--tw-scale-x',
+            '--tw-scale-y',
+            ['transform', 'var(--tw-transform)'],
+          ],
+        ],
+        [
+          [
+            'scale-x',
+            [
+              ['@defaults --tw-transform', {}],
+              '--tw-scale-x',
+              ['transform', 'var(--tw-transform)'],
+            ],
+          ],
+          [
+            'scale-y',
+            [
+              ['@defaults --tw-transform', {}],
+              '--tw-scale-y',
+              ['transform', 'var(--tw-transform)'],
+            ],
+          ],
         ],
       ])({ config, ...rest })
     } else {

src/plugins/skew.js

@@ -5,8 +5,14 @@ export default function () {
     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',
+            [['@defaults --tw-transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
+          ],
+          [
+            'skew-y',
+            [['@defaults --tw-transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+          ],
         ],
       ])({ config, ...rest })
     } else {

src/plugins/transform.js

@@ -2,7 +2,7 @@ export default function () {
   return function ({ config, addBase, addUtilities, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*::tailwind': {
+        '@defaults --tw-transform': {
           '--tw-translate-x': '0',
           '--tw-translate-y': '0',
           '--tw-rotate': '0',
@@ -24,6 +24,7 @@ export default function () {
       addUtilities(
         {
           '.transform': {
+            '@defaults --tw-transform': {},
             transform: 'var(--tw-transform)',
           },
           '.transform-cpu': {