fix(transform): support for @media selectors inside :global (#88)

Anber · May 23, 2024 · 3cadae5 · 3cadae5
1 parent b407f83
commit 3cadae5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/.changeset/slimy-bulldogs-dress.md b/.changeset/slimy-bulldogs-dress.md
@@ -0,0 +1,6 @@
+---
+'@wyw-in-js/transform': patch
+'wyw-in-js': patch
+---
+
+Support for @media selectors inside :global selectors.
diff --git a/packages/transform/src/transform/generators/__tests__/createStylisProcessor.test.ts b/packages/transform/src/transform/generators/__tests__/createStylisProcessor.test.ts
@@ -246,5 +246,21 @@ describe('stylisGlobalPlugin', () => {
         `".globalA .component {color:red;}.globalB .component {color:blue;}"`
       );
     });
+
+    it('@media', () => {
+      const cssRule = dedent(`
+        .component :global() {
+          @media (prefers-color-scheme: dark) {
+            html {
+              color-scheme: dark;
+            }
+          }
+        }
+      `);
+
+      expect(compileRule(cssRule)).toMatchInlineSnapshot(
+        `"@media (prefers-color-scheme: dark){html {color-scheme:dark;}}"`
+      );
+    });
   });
 });
diff --git a/packages/transform/src/transform/generators/createStylisPreprocessor.ts b/packages/transform/src/transform/generators/createStylisPreprocessor.ts
@@ -116,12 +116,26 @@ const isRuleset = (element: Element): element is Ruleset => {
   return element.type === RULESET && propsAreStrings(element.props);
 };
 
+function nonMediaParent(element: Element): Element | null {
+  let { parent } = element;
+
+  while (parent) {
+    if (parent.type !== '@media') {
+      return parent;
+    }
+
+    parent = parent.parent;
+  }
+
+  return null;
+}
+
 /**
  * Stylis plugin that mimics :global() selector behavior from Stylis v3.
  */
 export const stylisGlobalPlugin: Middleware = (element) => {
   function getGlobalSelectorModifiers(el: Element): IGlobalSelectorModifiers {
-    const { parent } = el;
+    const parent = nonMediaParent(el);
 
     const value = getOriginalElementValue(el);
     const parentValue = getOriginalElementValue(parent);