Emit defaults from apply in css modules

Author: thecrypticace

src/lib/expandTailwindAtRules.js

@@ -140,17 +140,28 @@ export default function expandTailwindAtRules(context) {
       variants: null,
     }
 
-    // Make sure this file contains Tailwind directives. If not, we can save
-    // a lot of work and bail early. Also we don't have to register our touch
-    // file as a dependency since the output of this CSS does not depend on
-    // the source of any templates. Think Vue <style> blocks for example.
-    root.walkAtRules('tailwind', (rule) => {
-      if (Object.keys(layerNodes).includes(rule.params)) {
-        layerNodes[rule.params] = rule
+    let hasApply = false
+
+    root.walkAtRules((rule) => {
+      // Make sure this file contains Tailwind directives. If not, we can save
+      // a lot of work and bail early. Also we don't have to register our touch
+      // file as a dependency since the output of this CSS does not depend on
+      // the source of any templates. Think Vue <style> blocks for example.
+      if (rule.name === 'tailwind') {
+        if (Object.keys(layerNodes).includes(rule.params)) {
+          layerNodes[rule.params] = rule
+        }
+      }
+
+      // We also want to check for @apply because the user can
+      // apply classes in an isolated environment like CSS
+      // modules and we still need to inject defaults
+      if (rule.name === 'apply') {
+        hasApply = true
       }
     })
 
-    if (Object.values(layerNodes).every((n) => n === null)) {
+    if (Object.values(layerNodes).every((n) => n === null) && !hasApply) {
       return root
     }
 

tests/apply.test.js

@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js'
 
 import { run, html, css } from './util/run'
 
@@ -810,3 +811,39 @@ it('should be possible to apply user css without tailwind directives', () => {
     `)
   })
 })
+
+fit('apply can emit defaults in isolated environments without @tailwind directives', () => {
+  let config = {
+    [DEFAULTS_LAYER]: true,
+    experimental: { optimizeUniversalDefaults: true },
+
+    content: [{ raw: html`<div class="foo"></div>` }],
+  }
+
+  let input = css`
+    .foo {
+      @apply focus:rotate-90;
+    }
+  `
+
+  return run(input, config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .foo {
+        --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));
+      }
+      .foo:focus {
+        --tw-rotate: 90deg;
+        transform: var(--tw-transform);
+      }
+    `)
+  })
+})