Emit defaults from apply in css modules

Author: thecrypticace

src/lib/expandTailwindAtRules.js

@@ -150,7 +150,16 @@ export default function expandTailwindAtRules(context) {
       }
     })
 
-    if (Object.values(layerNodes).every((n) => n === null)) {
+    // 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
+    let hasApply = false
+
+    root.walkAtRules('apply', () => {
+      hasApply = true
+    })
+
+    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);
+      }
+    `)
+  })
+})