Interesting

src/jit/lib/resolveDefaultsAtRules.js

@@ -2,6 +2,7 @@ import postcss from 'postcss'
 import selectorParser from 'postcss-selector-parser'
 
 let elementSelectorParser = selectorParser((selectors) => {
+  return selectors.map((s) => s.toString())
   return selectors.map((s) => {
     return s
       .split((n) => n.type === 'combinator')
@@ -60,7 +61,7 @@ export default function resolveDefaultsAtRules() {
       }
 
       let universalRule = postcss.rule()
-      universalRule.selectors = [...selectors]
+      universalRule.selector = `:where(${[...selectors].join(', ')})`
       universalRule.append(universal.nodes)
       universal.before(universalRule)
       universal.remove()

tests/jit/resolve-defaults-at-rules.test.js

@@ -368,6 +368,18 @@ test('with apply', async () => {
     .recursive {
       @apply foo;
     }
+
+    [data-attr="foo"] {
+      @apply rotate-45;
+    }
+
+    #app {
+      @apply rotate-45;
+    }
+
+    span#app {
+      @apply rotate-45;
+    }
   `
 
   return run(css, config).then((result) => {
@@ -382,7 +394,10 @@ test('with apply', async () => {
       .c,
       .a::before,
       .b::after,
-      .recursive {
+      .recursive,
+      [data-attr="foo"],
+      #app,
+      span#app {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -440,6 +455,18 @@ test('with apply', async () => {
         --tw-rotate: 3deg;
         transform: var(--tw-transform);
       }
+      [data-attr="foo"] {
+        --tw-rotate: 45deg;
+        transform: var(--tw-transform);
+      }
+      #app {
+        --tw-rotate: 45deg;
+        transform: var(--tw-transform);
+      }
+      span#app {
+        --tw-rotate: 45deg;
+        transform: var(--tw-transform);
+      }
     `)
   })
 })