JIT: Replace @tailwind screens with @tailwind variants (#4356)

* Update CHANGELOG

* JIT: Replace `@tailwind screens` with `@tailwind variants`

src/jit/index.js

@@ -3,7 +3,7 @@ import postcss from 'postcss'
 import evaluateTailwindFunctions from '../lib/evaluateTailwindFunctions'
 import substituteScreenAtRules from '../lib/substituteScreenAtRules'
 
-import rewriteTailwindImports from './lib/rewriteTailwindImports'
+import normalizeTailwindDirectives from './lib/normalizeTailwindDirectives'
 import setupContext from './lib/setupContext'
 import removeLayerAtRules from './lib/removeLayerAtRules'
 import expandTailwindAtRules from './lib/expandTailwindAtRules'
@@ -30,7 +30,7 @@ export default function (configOrPath = {}) {
         })
       }
 
-      let tailwindDirectives = rewriteTailwindImports(root)
+      let tailwindDirectives = normalizeTailwindDirectives(root)
 
       let context = setupContext(configOrPath, tailwindDirectives)(result, root)
 

src/jit/lib/expandTailwindAtRules.js

@@ -83,12 +83,12 @@ function buildStylesheet(rules, context) {
     base: new Set(),
     components: new Set(),
     utilities: new Set(),
-    screens: new Set(),
+    variants: new Set(),
   }
 
   for (let [sort, rule] of sortedRules) {
     if (sort >= context.minimumScreen) {
-      returnValue.screens.add(rule)
+      returnValue.variants.add(rule)
       continue
     }
 
@@ -121,7 +121,7 @@ export default function expandTailwindAtRules(context, registerDependency, tailw
       base: null,
       components: null,
       utilities: null,
-      screens: null,
+      variants: null,
     }
 
     // Make sure this file contains Tailwind directives. If not, we can save
@@ -141,8 +141,8 @@ export default function expandTailwindAtRules(context, registerDependency, tailw
         layerNodes.utilities = rule
       }
 
-      if (rule.params === 'screens') {
-        layerNodes.screens = rule
+      if (rule.params === 'variants') {
+        layerNodes.variants = rule
       }
     })
 
@@ -242,7 +242,7 @@ export default function expandTailwindAtRules(context, registerDependency, tailw
       base: baseNodes,
       components: componentNodes,
       utilities: utilityNodes,
-      screens: screenNodes,
+      variants: screenNodes,
     } = context.stylesheetCache
 
     // ---
@@ -264,9 +264,9 @@ export default function expandTailwindAtRules(context, registerDependency, tailw
       layerNodes.utilities.remove()
     }
 
-    if (layerNodes.screens) {
-      layerNodes.screens.before(cloneNodes([...screenNodes]))
-      layerNodes.screens.remove()
+    if (layerNodes.variants) {
+      layerNodes.variants.before(cloneNodes([...screenNodes]))
+      layerNodes.variants.remove()
     } else {
       root.append(cloneNodes([...screenNodes]))
     }

src/jit/lib/rewriteTailwindImports.js → src/jit/lib/normalizeTailwindDirectives.js

@@ -1,4 +1,4 @@
-export default function rewriteTailwindImports(root) {
+export default function normalizeTailwindDirectives(root) {
   root.walkAtRules('import', (atRule) => {
     if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
       atRule.name = 'tailwind'
@@ -17,16 +17,21 @@ export default function rewriteTailwindImports(root) {
       atRule.params = 'utilities'
     } else if (
       atRule.params === '"tailwindcss/screens"' ||
-      atRule.params === "'tailwindcss/screens'"
+      atRule.params === "'tailwindcss/screens'" ||
+      atRule.params === '"tailwindcss/variants"' ||
+      atRule.params === "'tailwindcss/variants'"
     ) {
       atRule.name = 'tailwind'
-      atRule.params = 'screens'
+      atRule.params = 'variants'
     }
   })
 
   let tailwindDirectives = new Set()
 
   root.walkAtRules('tailwind', (rule) => {
+    if (rule.params === 'screens') {
+      rule.params = 'variants'
+    }
     tailwindDirectives.add(rule.params)
   })
 

tests/jit/tailwind-screens.test.js

@@ -0,0 +1,91 @@
+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('class variants are inserted at `@tailwind variants`', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: `font-bold hover:font-bold md:font-bold`,
+      },
+    ],
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind utilities;
+    @tailwind variants;
+    .foo {
+      color: black;
+    }
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .font-bold {
+        font-weight: 700;
+      }
+      .hover\\:font-bold:hover {
+        font-weight: 700;
+      }
+      @media (min-width: 768px) {
+        .md\\:font-bold {
+          font-weight: 700;
+        }
+      }
+      .foo {
+        color: black;
+      }
+    `)
+  })
+})
+
+test('`@tailwind screens` works as an alias for `@tailwind variants`', async () => {
+  let config = {
+    mode: 'jit',
+    purge: [
+      {
+        raw: `font-bold hover:font-bold md:font-bold`,
+      },
+    ],
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind utilities;
+    @tailwind screens;
+    .foo {
+      color: black;
+    }
+  `
+
+  return run(css, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(`
+      .font-bold {
+        font-weight: 700;
+      }
+      .hover\\:font-bold:hover {
+        font-weight: 700;
+      }
+      @media (min-width: 768px) {
+        .md\\:font-bold {
+          font-weight: 700;
+        }
+      }
+      .foo {
+        color: black;
+      }
+    `)
+  })
+})

variants.css

@@ -0,0 +1 @@
+@tailwind variants;