JIT: Replace @tailwind screens with @tailwind variants

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update `modern-normalize` to v1.1 ([#4287](https://github.com/tailwindlabs/tailwindcss/pull/4287))
 - Implement `theme` function internally, remove `postcss-functions` dependency ([#4317](https://github.com/tailwindlabs/tailwindcss/pull/4317))
 - Add `screen` function to improve nesting plugin compatibility ([#4318](https://github.com/tailwindlabs/tailwindcss/pull/4318))
+- JIT: Add universal shorthand color opacity syntax ([#4348](https://github.com/tailwindlabs/tailwindcss/pull/4348))
 
 ### Fixed
 
@@ -123,7 +124,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `5` and `95` to opacity scale ([#2747](https://github.com/tailwindlabs/tailwindcss/pull/2747))
 - Add support for default duration and timing function values whenever enabling transitions ([#2755](https://github.com/tailwindlabs/tailwindcss/pull/2755))
 
-
 ### Changed
 
 - Completely redesign color palette ([#2623](https://github.com/tailwindlabs/tailwindcss/pull/2623), [700866c](https://github.com/tailwindlabs/tailwindcss/commit/700866ce5e0c0b8d140be161c4d07fc6f31242bc), [#2633](https://github.com/tailwindlabs/tailwindcss/pull/2633))
@@ -398,7 +398,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
--  Fix issue where using `theme` with default line-heights did not resolve correctly
+- Fix issue where using `theme` with default line-heights did not resolve correctly
 
 ## [1.9.4] - 2020-10-17
 
@@ -448,6 +448,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Use `word-wrap` instead of `overflow-wrap` in `ie11` target mode ([#2391](https://github.com/tailwindlabs/tailwindcss/pull/2391))
 
 ### Experimental
+
 - Add experimental `2xl` breakpoint ([#2468](https://github.com/tailwindlabs/tailwindcss/pull/2468))
 - Rename `{u}-max-content` and `{u}-min-content` utilities to `{u}-max` and `{u}-min` in experimental extended spacing scale ([#2532](https://github.com/tailwindlabs/tailwindcss/pull/2532))
 - Support disabling dark mode variants globally ([#2530](https://github.com/tailwindlabs/tailwindcss/pull/2530))

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;