From c905c8a2263a22b045800621d182009f1fdaea63 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 1 Jul 2021 08:57:23 -0400
Subject: [PATCH] Interesting

---
 src/jit/lib/resolveDefaultsAtRules.js       |  3 ++-
 tests/jit/resolve-defaults-at-rules.test.js | 29 ++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/jit/lib/resolveDefaultsAtRules.js b/src/jit/lib/resolveDefaultsAtRules.js
index 14e7bf19a..266b19b60 100644
--- a/src/jit/lib/resolveDefaultsAtRules.js
+++ b/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()
diff --git a/tests/jit/resolve-defaults-at-rules.test.js b/tests/jit/resolve-defaults-at-rules.test.js
index 4ca62e163..0628d9c7d 100644
--- a/tests/jit/resolve-defaults-at-rules.test.js
+++ b/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);
+      }
     `)
   })
 })