✨ isolation for all the grouping selector (#833)

umijs · Aug 7, 2020 · a191d51 · a191d51 · github-actions · Aug 7, 2020
1 parent db31e9d
commit a191d51
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/sandbox/patchers/__tests__/css.test.ts b/src/sandbox/patchers/__tests__/css.test.ts
@@ -112,6 +112,16 @@ test('should rewrite root-level correctly [2]', () => {
   expect(removeWs(styleNode.textContent)).toBe(removeWs(expectValue));
 });
 
+test('should rewrite root-level correctly [3]', () => {
+  const actualValue = `html button[type="reset"] {color: #fff}`;
+  const expectValue = `div[data-qiankun=react15] button[type="reset"]{color:#fff;}`;
+
+  const styleNode = fakeStyleNode(actualValue);
+  CSSProcessor.process(styleNode, 'div[data-qiankun=react15]');
+
+  expect(removeWs(styleNode.textContent)).toBe(removeWs(expectValue));
+});
+
 test('should not replace body/html if body is part of class [1]', () => {
   const actualValue = '.ant-card-body {color: #eee}';
   const expectValue = 'div[data-qiankun=react15] .ant-card-body {color: #eee;}';
@@ -204,7 +214,7 @@ test('should handle root-level grouping selector [1]', () => {
 
 test('should handle root-level grouping selector [2]', () => {
   const actualValue = 'body,html,div {color: #eee;}';
-  const expectValue = 'div[data-qiankun=react15],div {color: #eee;}';
+  const expectValue = 'div[data-qiankun=react15],div[data-qiankun=react15]div{color:#eee;}';
 
   const styleNode = fakeStyleNode(actualValue);
   CSSProcessor.process(styleNode, 'div[data-qiankun=react15]');
@@ -214,7 +224,7 @@ test('should handle root-level grouping selector [2]', () => {
 
 test('should handle root-level grouping selector [3]', () => {
   const actualValue = 'a,body,html,div {color: #eee;}';
-  const expectValue = 'a,div[data-qiankun=react15],div {color: #eee;}';
+  const expectValue = 'div[data-qiankun=react15]a,div[data-qiankun=react15],div[data-qiankun=react15]div{color:#eee;}';
 
   const styleNode = fakeStyleNode(actualValue);
   CSSProcessor.process(styleNode, 'div[data-qiankun=react15]');

diff --git a/src/sandbox/patchers/css.ts b/src/sandbox/patchers/css.ts
@@ -134,20 +134,29 @@ class ScopedCSS {
       }
     }
 
-    if (rootSelectorRE.test(rule.selectorText)) {
-      // handle div,body,span { ... }
-      return cssText.replace(rootSelectorRE, m => {
-        // do not discard valid previous character, such as body,html or *:not(:root)
-        const whitePrevChars = [',', '('];
-
-        if (m && whitePrevChars.includes(m[0])) {
-          return `${m[0]}${prefix}`;
+    // handle grouping selector, a,span,p,div { ... }
+    cssText = cssText.replace(/^[^]+{/, selectors =>
+      selectors.replace(/(^|,\n?)([^,]+)/g, (item, p, s) => {
+        // handle div,body,span { ... }
+        if (rootSelectorRE.test(item)) {
+          return item.replace(rootSelectorRE, m => {
+            // do not discard valid previous character, such as body,html or *:not(:root)
+            const whitePrevChars = [',', '('];
+
+            if (m && whitePrevChars.includes(m[0])) {
+              return `${m[0]}${prefix}`;
+            }
+
+            // replace root selector with prefix
+            return prefix;
+          });
         }
-        return prefix;
-      });
-    }
 
-    return `${prefix} ${cssText}`;
+        return `${p}${prefix} ${s}`;
+      }),
+    );
+
+    return cssText;
   }
 
   // handle case: