WIP

src/jit/lib/optimizeUniversalRules.js

@@ -0,0 +1,67 @@
+import selectorParser from 'postcss-selector-parser'
+
+let elementSelectorParser = selectorParser((selectors) => {
+  return selectors
+    .map((s) => {
+      return s
+        .split((n) => n.type === 'combinator')
+        .pop()
+        .filter((n) => n.type !== 'pseudo' || n.value.startsWith('::'))
+        .join('')
+    })
+    .join(', ')
+})
+
+function extractElementSelector(selector) {
+  return elementSelectorParser.transformSync(selector)
+}
+
+export default function collapseAdjacentRules() {
+  return (root) => {
+    // Walk all custom properties
+    //   Collect into a map, where key is the custom property name
+    //   Value is list of nodes
+    // Walk '*::tailwind' rules
+    //   Get list of selectors per custom property
+    //     Compute element selector (remove pseudo-classes, leading selectors, etc.)
+    //   Collect selectors into Set
+    //   Replace '*::tailwind' with selectors from Set
+
+    let variableNodeMap = new Map()
+    let universals = new Set()
+
+    root.walkDecls((decl) => {
+      if (!decl.prop.startsWith('--')) {
+        return
+      }
+
+      if (decl.parent.selector === '*::tailwind') {
+        universals.add(decl.parent)
+        return
+      }
+
+      let variable = decl.prop
+
+      if (!variableNodeMap.has(variable)) {
+        variableNodeMap.set(variable, new Set())
+      }
+
+      variableNodeMap.get(variable).add(decl.parent)
+    })
+
+    for (let universal of universals) {
+      let selectors = new Set()
+
+      universal.walkDecls((decl) => {
+        let variable = decl.prop
+
+        for (let node of variableNodeMap.get(variable) ?? []) {
+          let elementSelector = extractElementSelector(node.selector)
+          selectors.add(extractElementSelector(node.selector))
+        }
+      })
+
+      universal.selectors = [...selectors]
+    }
+  }
+}

src/jit/processTailwindFeatures.js

@@ -3,6 +3,7 @@ import expandTailwindAtRules from './lib/expandTailwindAtRules'
 import expandApplyAtRules from './lib/expandApplyAtRules'
 import evaluateTailwindFunctions from '../lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from '../lib/substituteScreenAtRules'
+import optimizeUniversalRules from './lib/optimizeUniversalRules'
 import collapseAdjacentRules from './lib/collapseAdjacentRules'
 import { createContext } from './lib/setupContextUtils'
 import log from '../util/log'
@@ -45,6 +46,7 @@ export default function processTailwindFeatures(setupContext) {
     expandApplyAtRules(context)(root, result)
     evaluateTailwindFunctions(context)(root, result)
     substituteScreenAtRules(context)(root, result)
+    optimizeUniversalRules(context)(root, result)
     collapseAdjacentRules(context)(root, result)
   }
 }

src/plugins/transform.js

@@ -2,7 +2,7 @@ export default function () {
   return function ({ config, addBase, addUtilities, variants }) {
     if (config('mode') === 'jit') {
       addBase({
-        '*, ::before, ::after': {
+        '*::tailwind': {
           '--tw-translate-x': '0',
           '--tw-translate-y': '0',
           '--tw-rotate': '0',

tests/jit/optimize-universal-selectors.test.js

@@ -0,0 +1,315 @@
+import postcss from 'postcss'
+import path from 'path'
+import tailwind from '../../src/jit/index.js'
+
+function run(input, config = {}) {
+  const { currentTestName } = expect.getState()
+
+  return postcss(tailwind(config)).process(input, {
+    from: `${path.resolve(__filename)}?test=${currentTestName}`,
+  })
+}
+
+test('basic utilities', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="scale-x-110 rotate-3 skew-y-6"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .rotate-3,
+      .skew-y-6,
+      .scale-x-110 {
+        --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));
+      }
+      /* --- */
+      .rotate-3 {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+      .skew-y-6 {
+        --tw-skew-y: 6deg;
+        transform: var(--tw-transform);
+      }
+      .scale-x-110 {
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with pseudo-class variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="hover:scale-x-110 focus:rotate-3 hover:focus:skew-y-6"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .focus\\:rotate-3,
+      .hover\\:focus\\:skew-y-6,
+      .hover\\:scale-x-110 {
+        --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));
+      }
+      /* --- */
+      .hover\\:scale-x-110:hover {
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .focus\\:rotate-3:focus {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+      .hover\\:focus\\:skew-y-6:hover:focus {
+        --tw-skew-y: 6deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with pseudo-element variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="before:scale-x-110 after:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .after\\:rotate-3::after,
+      .before\\:scale-x-110::before {
+        --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\\:scale-x-110::before {
+        content: "";
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .after\\:rotate-3::after {
+        content: "";
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with multi-class variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="group-hover:scale-x-110 peer-focus:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .peer-focus\\:rotate-3,
+      .group-hover\\:scale-x-110 {
+        --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));
+      }
+      /* --- */
+      .group:hover .group-hover\\:scale-x-110 {
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .peer:focus ~ .peer-focus\\:rotate-3 {
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with multi-class pseudo-element variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="group-hover:before:scale-x-110 peer-focus:after:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .peer-focus\\:after\\:rotate-3::after,
+      .group-hover\\:before\\:scale-x-110::before {
+        --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));
+      }
+      /* --- */
+      .group:hover .group-hover\\:before\\:scale-x-110::before {
+        content: "";
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .peer:focus ~ .peer-focus\\:after\\:rotate-3::after {
+        content: "";
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})
+
+test('with multi-class pseudo-element and pseudo-class variants', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: '<div class="group-hover:hover:before:scale-x-110 peer-focus:focus:after:rotate-3"></div>',
+      },
+    ],
+    theme: {},
+    plugins: [],
+    corePlugins: ['transform', 'scale', 'rotate', 'skew'],
+  }
+
+  let css = `
+    @tailwind base;
+    /* --- */
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .peer-focus\\:focus\\:after\\:rotate-3::after,
+      .group-hover\\:hover\\:before\\:scale-x-110::before {
+        --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));
+      }
+      /* --- */
+      .group:hover .group-hover\\:hover\\:before\\:scale-x-110:hover::before {
+        content: "";
+        --tw-scale-x: 1.1;
+        transform: var(--tw-transform);
+      }
+      .peer:focus ~ .peer-focus\\:focus\\:after\\:rotate-3:focus::after {
+        content: "";
+        --tw-rotate: 3deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})