Fix issue styled-components#245 with recursive filtering

nhardy · Feb 3, 2021 · 0ee1968 · 0ee1968
1 parent 5448282
commit 0ee1968
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
+.vscode
 node_modules
diff --git a/src/styleSheetSerializer.js b/src/styleSheetSerializer.js
@@ -52,22 +52,18 @@ const includesClassNames = (classNames, selectors) =>
 const filterRules = classNames => rule =>
   rule.type === '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'
+      || (rule.type === 'rule' && includesClassNames(classNames, rule.selectors) && rule.declarations.length)
+  )
+  .map(rule => (rule.type === "rule" ? rule : Object.assign({}, rule, { rules: getAllRules(rule.rules, classNames) })));
 
 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);
 };
@@ -93,8 +89,8 @@ const replaceClassNames = (result, classNames, style) =>
     .reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result);
 
 const stripUnreferencedClassNames = (result, classNames) =>
-    classNames
-      .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`,'g'), ''), result);
+  classNames
+    .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`, 'g'), ''), result);
 
 const replaceHashes = (result, hashes) =>
   hashes.reduce(

diff --git a/test/__snapshots__/styleSheetSerializer.spec.js.snap b/test/__snapshots__/styleSheetSerializer.spec.js.snap
@@ -727,15 +727,6 @@ exports[`supported css: mount 1`] = `
   background: palevioletred;
 }
 
-.c0 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c0 {
     background: tomato;
@@ -744,6 +735,21 @@ html.test .c0 {
   .c0:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c0 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c0 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <styled.div>
@@ -767,15 +773,6 @@ exports[`supported css: react-test-renderer 1`] = `
   background: palevioletred;
 }
 
-.c0 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c0 {
     background: tomato;
@@ -784,6 +781,21 @@ html.test .c0 {
   .c0:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c0 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c0 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <div
@@ -805,15 +817,6 @@ exports[`supported css: react-testing-library 1`] = `
   background: palevioletred;
 }
 
-.c0 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c0 {
     background: tomato;
@@ -822,6 +825,21 @@ html.test .c0 {
   .c0:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c0 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c0 > p {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+html.test .c0 {
+  display: none;
 }
 
 <div
@@ -843,15 +861,6 @@ exports[`supported css: shallow 1`] = `
   background: palevioletred;
 }
 
-.c0 > p {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-html.test .c0 {
-  display: none;
-}
-
 @media (max-width:600px) {
   .c0 {
     background: tomato;
@@ -860,6 +869,21 @@ html.test .c0 {
   .c0:hover {
     background: yellow;
   }
+
+@supports (top:max(1px,0px)) {
+    .c0 {
+      padding-left: max(1em,env(safe-area-inset-left,0px));
+    }
+}
+}
+
+.c0 > 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 {