Flatten responsive/variants at-rules for better BC behavior

Author: adamwathan

src/lib/removeLayerAtRules.js

@@ -1,7 +1,9 @@
 function removeLayerAtRules(context) {
   return (root) => {
-    root.walkAtRules('layer', (rule) => {
-      rule.remove()
+    root.walkAtRules((rule) => {
+      if (['layer', 'responsive', 'variants'].includes(rule.name)) {
+        rule.remove()
+      }
     })
   }
 }

src/lib/setupContext.js

@@ -507,6 +507,56 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
   }
 }
 
+function extractVariantAtRules(node) {
+  node.walkAtRules((atRule) => {
+    if (['responsive', 'variants'].includes(atRule.name)) {
+      extractVariantAtRules(atRule)
+      atRule.before(atRule.nodes)
+      atRule.remove()
+    }
+  })
+}
+
+function collectLayerPlugins(root) {
+  let layerPlugins = []
+
+  root.each((node) => {
+    if (node.type === 'atrule' && ['responsive', 'variants'].includes(node.name)) {
+      node.name = 'layer'
+      node.params = 'utilities'
+    }
+  })
+
+  // Walk @layer rules and treat them like plugins
+  root.walkAtRules('layer', (layerNode) => {
+    extractVariantAtRules(layerNode)
+
+    if (layerNode.params === 'base') {
+      for (let node of layerNode.nodes) {
+        layerPlugins.push(function ({ addBase }) {
+          addBase(node, { respectPrefix: false })
+        })
+      }
+    }
+    if (layerNode.params === 'components') {
+      for (let node of layerNode.nodes) {
+        layerPlugins.push(function ({ addComponents }) {
+          addComponents(node, { respectPrefix: false })
+        })
+      }
+    }
+    if (layerNode.params === 'utilities') {
+      for (let node of layerNode.nodes) {
+        layerPlugins.push(function ({ addUtilities }) {
+          addUtilities(node, { respectPrefix: false })
+        })
+      }
+    }
+  })
+
+  return layerPlugins
+}
+
 function registerPlugins(tailwindConfig, plugins, context) {
   let variantList = []
   let variantMap = new Map()
@@ -703,32 +753,7 @@ function setupContext(configOrPath) {
       return typeof plugin === 'function' ? plugin : plugin.handler
     })
 
-    let layerPlugins = []
-
-    // Walk @layer rules and treat them like plugins
-    root.walkAtRules('layer', (layerNode) => {
-      if (layerNode.params === 'base') {
-        for (let node of layerNode.nodes) {
-          layerPlugins.push(function ({ addBase }) {
-            addBase(node, { respectPrefix: false })
-          })
-        }
-      }
-      if (layerNode.params === 'components') {
-        for (let node of layerNode.nodes) {
-          layerPlugins.push(function ({ addComponents }) {
-            addComponents(node, { respectPrefix: false })
-          })
-        }
-      }
-      if (layerNode.params === 'utilities') {
-        for (let node of layerNode.nodes) {
-          layerPlugins.push(function ({ addUtilities }) {
-            addUtilities(node, { respectPrefix: false })
-          })
-        }
-      }
-    })
+    let layerPlugins = collectLayerPlugins(root)
 
     // TODO: This is a workaround for backwards compatibility, since custom variants
     // were historically sorted before screen/stackable variants.

tests/07-responsive-and-variants-atrules.test.css

@@ -0,0 +1,65 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+.responsive-in-components {
+  color: blue;
+}
+.variants-in-components {
+  color: red;
+}
+.both-in-components {
+  color: green;
+}
+.responsive-in-utilities {
+  color: blue;
+}
+.variants-in-utilities {
+  color: red;
+}
+.both-in-utilities {
+  color: green;
+}
+.responsive-at-root {
+  color: white;
+}
+.variants-at-root {
+  color: orange;
+}
+.both-at-root {
+  color: pink;
+}
+@media (min-width: 768px) {
+  .md\:focus\:responsive-in-components:focus {
+    color: blue;
+  }
+  .md\:focus\:variants-in-components:focus {
+    color: red;
+  }
+  .md\:focus\:both-in-components:focus {
+    color: green;
+  }
+  .md\:focus\:responsive-in-utilities:focus {
+    color: blue;
+  }
+  .md\:focus\:variants-in-utilities:focus {
+    color: red;
+  }
+  .md\:focus\:both-in-utilities:focus {
+    color: green;
+  }
+  .md\:focus\:responsive-at-root:focus {
+    color: white;
+  }
+  .md\:focus\:variants-at-root:focus {
+    color: orange;
+  }
+  .md\:focus\:both-at-root:focus {
+    color: pink;
+  }
+}

tests/07-responsive-and-variants-atrules.test.html

@@ -0,0 +1,18 @@
+<div class="responsive-in-utilities"></div>
+<div class="variants-in-utilities"></div>
+<div class="both-in-utilities"></div>
+<div class="responsive-at-root"></div>
+<div class="variants-at-root"></div>
+<div class="both-at-root"></div>
+<div class="responsive-in-components"></div>
+<div class="variants-in-components"></div>
+<div class="both-in-components"></div>
+<div class="md:focus:responsive-in-utilities"></div>
+<div class="md:focus:variants-in-utilities"></div>
+<div class="md:focus:both-in-utilities"></div>
+<div class="md:focus:responsive-at-root"></div>
+<div class="md:focus:variants-at-root"></div>
+<div class="md:focus:both-at-root"></div>
+<div class="md:focus:responsive-in-components"></div>
+<div class="md:focus:variants-in-components"></div>
+<div class="md:focus:both-in-components"></div>

tests/07-responsive-and-variants-atrules.test.js

@@ -0,0 +1,88 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('responsive and variants atrules', () => {
+  let config = {
+    purge: [path.resolve(__dirname, './07-responsive-and-variants-atrules.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+
+    @layer utilities {
+      @responsive {
+        .responsive-in-utilities {
+          color: blue;
+        }
+      }
+      @variants {
+        .variants-in-utilities {
+          color: red;
+        }
+      }
+      @responsive {
+        @variants {
+          .both-in-utilities {
+            color: green;
+          }
+        }
+      }
+    }
+
+    @responsive {
+      .responsive-at-root {
+        color: white;
+      }
+    }
+    @variants {
+      .variants-at-root {
+        color: orange;
+      }
+    }
+    @responsive {
+      @variants {
+        .both-at-root {
+          color: pink;
+        }
+      }
+    }
+
+    @layer components {
+      @responsive {
+        .responsive-in-components {
+          color: blue;
+        }
+      }
+      @variants {
+        .variants-in-components {
+          color: red;
+        }
+      }
+      @responsive {
+        @variants {
+          .both-in-components {
+            color: green;
+          }
+        }
+      }
+    }
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './07-responsive-and-variants-atrules.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})