Merge pull request #65 from shlensky/ignore_unknown_at_rules

ignore media rules nested to unknown at rules

Author: theKashey

__tests__/extraction.spec.tsx

@@ -178,6 +178,36 @@ describe('extraction stories', () => {
     `);
   });
 
+  it('should ignore media rules nested to unknown at rules', async () => {
+    const styles: StyleDefinition = loadStyleDefinitions(
+      () => ['test.css'],
+      () => `
+@supports (display:grid) {
+  .a { display: grid; }
+
+  @media only print {
+    .a { color: red; }
+  }
+}
+`
+    );
+    await styles;
+
+    const extracted = getCriticalRules('<div class="a">', styles);
+
+    expect(extracted).toMatchInlineSnapshot(`
+        "
+        /* test.css */
+        @supports (display:grid) {
+          .a { display: grid; }
+
+          @media only print {
+            .a { color: red; }
+          }
+        }"
+      `);
+  });
+
   describe('CSS Cascade Layers', () => {
     it('handles CSS Cascade Layers', async () => {
       const styles = loadStyleDefinitions(

__tests__/media.spec.ts

@@ -38,7 +38,7 @@ describe('media selectors', () => {
     expect(css).toEqual('');
   });
 
-  it('should extract unmatable parts', () => {
+  it('should extract unmatchable parts', () => {
     const css = extractUnmatchableFromAst({ ast });
 
     expect(css[0].css).toEqual(`body { color: red; }

src/parser/toAst.ts

@@ -95,6 +95,12 @@ export const buildAst = (CSS: string, file = ''): SingleStyleAst => {
       return;
     }
 
+    if (atParents.has(rule.parent)) {
+      atParents.add(rule);
+
+      return;
+    }
+
     if (rule.name !== 'media' && !isCascadeLayerStyles(rule)) {
       atParents.add(rule);