fix: handle scenario where stylis has a functionality gap

styled-components · May 4, 2023 · 6cee6c2 · 6cee6c2
1 parent 16c5649
commit 6cee6c2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json
@@ -66,7 +66,7 @@
     "@emotion/unitless": "^0.8.0",
     "css-to-react-native": "^3.2.0",
     "shallowequal": "^1.1.0",
-    "stylis": "^4.1.3",
+    "stylis": "^4.1.4",
     "tslib": "^2.5.0"
   },
   "peerDependencies": {

diff --git a/packages/styled-components/src/test/styles.test.tsx b/packages/styled-components/src/test/styles.test.tsx
@@ -92,6 +92,10 @@ describe('with styles', () => {
       .foo > & {
         color: green;
       }
+
+      &:not(& ~ &) {
+        color: cornflowerblue;
+      }
     `;
     TestRenderer.create(
       <React.Fragment>
@@ -134,6 +138,9 @@ describe('with styles', () => {
       .foo > .a {
         color: green;
       }
+      .a:not(.a ~ .a) {
+        color: cornflowerblue;
+      }
       .b {
         background: red;
         color: red;
@@ -167,6 +174,9 @@ describe('with styles', () => {
       }
       .foo > .b {
         color: green;
+      }
+      .b:not(.b ~ .b) {
+        color: cornflowerblue;
       }"
     `);
   });

diff --git a/packages/styled-components/src/utils/stylis.ts b/packages/styled-components/src/utils/stylis.ts
@@ -4,6 +4,7 @@ import { EMPTY_ARRAY, EMPTY_OBJECT } from './empties';
 import throwStyledError from './error';
 import { phash, SEED } from './hash';
 
+const AMP_REGEX = /&/g;
 const COMMENT_REGEX = /^\s*\/\/.*$/gm;
 
 export type ICreateStylisInstance = {
@@ -60,7 +61,6 @@ export default function createStylisInstance(
   let _componentId: string;
   let _selector: string;
   let _selectorRegexp: RegExp;
-  let _consecutiveSelfRefRegExp: RegExp;
 
   const selfReferenceReplacer: Parameters<String['replace']>[1] = (match, offset, string) => {
     if (
@@ -95,10 +95,10 @@ export default function createStylisInstance(
    */
   const selfReferenceReplacementPlugin: Middleware = element => {
     if (element.type === RULESET && element.value.includes('&')) {
-      (element.props as string[])[0] = element.props[0].replace(
-        _selectorRegexp,
-        selfReferenceReplacer
-      );
+      (element.props as string[])[0] = element.props[0]
+        // catch any hanging references that stylis missed
+        .replace(AMP_REGEX, _selector)
+        .replace(_selectorRegexp, selfReferenceReplacer);
     }
   };
 
@@ -128,7 +128,6 @@ export default function createStylisInstance(
     _componentId = componentId;
     _selector = selector;
     _selectorRegexp = new RegExp(`\\${_selector}\\b`, 'g');
-    _consecutiveSelfRefRegExp = new RegExp(`(\\${_selector}\\b){2,}`);
 
     const flatCSS = css.replace(COMMENT_REGEX, '');
     let compiled = compile(prefix || selector ? `${prefix} ${selector} { ${flatCSS} }` : flatCSS);

diff --git a/yarn.lock b/yarn.lock
@@ -9083,7 +9083,7 @@ style-loader@^3.3.1:
     "@emotion/unitless" "^0.8.0"
     css-to-react-native "^3.2.0"
     shallowequal "^1.1.0"
-    stylis "^4.1.3"
+    stylis "^4.1.4"
     tslib "^2.5.0"
 
 styled-jsx@5.0.7:
@@ -9130,11 +9130,16 @@ stylis-plugin-rtl@^2.1.1:
   dependencies:
     cssjanus "^2.0.1"
 
-stylis@4.1.3, stylis@^4.1.3:
+stylis@4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
 
+stylis@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.4.tgz#9cb60e7153d8ac6d02d773552bf51c7a0344535b"
+  integrity sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ==
+
 sudo-prompt@^9.0.0:
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd"