Fix issue styled-components#245 with recursive filtering

nhardy · Jul 19, 2021 · 0112bcf · 0112bcf
1 parent e1be59f
commit 0112bcf
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
+.vscode
 node_modules
 yarn-error.log
diff --git a/src/styleSheetSerializer.js b/src/styleSheetSerializer.js
@@ -62,22 +62,19 @@ const filterRules = (classNames) => (rule) =>
   includesClassNames(classNames, rule.selectors) &&
   rule.declarations.length;
 
-const getAtRules = (ast, filter) =>
-  ast.stylesheet.rules
-    .filter((rule) => rule.type === 'media' || rule.type === 'supports')
-    .reduce((acc, atRule) => {
-      atRule.rules = atRule.rules.filter(filter);
-
-      return acc.concat(atRule);
-    }, []);
+const getAllRules = (rules, classNames) => rules
+  .filter(
+    (rule) => rule.type === 'media'
+      || rule.type === 'supports'
+      || filterRules(classNames)(rule)
+  )
+  .map(rule => (rule.type === "rule" ? rule : Object.assign({}, rule, { rules: getAllRules(rule.rules, classNames) })))
+  .filter(rule => (rule.type === "rule" && rule.declarations.length) || rule.rules.length);
 
 const getStyle = (classNames) => {
   const ast = getCSS();
-  const filter = filterRules(classNames);
-  const rules = ast.stylesheet.rules.filter(filter);
-  const atRules = getAtRules(ast, filter);
 
-  ast.stylesheet.rules = rules.concat(atRules);
+  ast.stylesheet.rules = getAllRules(ast.stylesheet.rules, classNames);
 
   return css.stringify(ast);
 };

diff --git a/test/__snapshots__/styleSheetSerializer.spec.js.snap b/test/__snapshots__/styleSheetSerializer.spec.js.snap
@@ -838,15 +838,6 @@ exports[`supported css: mount 1`] = `
   background: palevioletred;
 }
 
-.c1 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c1 {
     background: tomato;
@@ -855,6 +846,21 @@ html.test .c0 {
   .c1:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c1 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c1 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <styled.div>
@@ -878,15 +884,6 @@ exports[`supported css: react-test-renderer 1`] = `
   background: palevioletred;
 }
 
-.c1 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c1 {
     background: tomato;
@@ -895,6 +892,21 @@ html.test .c0 {
   .c1:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c1 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c1 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <div
@@ -916,15 +928,6 @@ exports[`supported css: react-testing-library 1`] = `
   background: palevioletred;
 }
 
-.c1 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c1 {
     background: tomato;
@@ -933,6 +936,21 @@ html.test .c0 {
   .c1:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c1 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c1 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <div
@@ -954,15 +972,6 @@ exports[`supported css: shallow 1`] = `
   background: palevioletred;
 }
 
-.c1 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c1 {
     background: tomato;
@@ -971,6 +980,21 @@ html.test .c0 {
   .c1:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c1 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c1 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <div

diff --git a/test/styleSheetSerializer.spec.js b/test/styleSheetSerializer.spec.js
@@ -179,6 +179,10 @@ it('supported css', () => {
       &:hover {
         background: yellow;
       }
+
+      @supports (top: max(1px, 0px)) {
+        padding-left: max(1em, env(safe-area-inset-left, 0px));
+      }
     }
 
     > p {