fix: root selector with single & (#193)

* test: add break test * fix: root selector with single & * chore: code clean --------- Co-authored-by: 二货机器人 <[email protected]>
ant-design · Aug 22, 2024 · d026b85 · d026b85
1 parent c717049
commit d026b85
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "classnames": "^2.3.1",
     "csstype": "^3.1.3",
     "rc-util": "^5.35.0",
-    "stylis": "^4.0.13"
+    "stylis": "^4.3.3"
   },
   "devDependencies": {
     "@ctrl/tinycolor": "^3.4.0",

diff --git a/src/hooks/useStyleRegister.tsx b/src/hooks/useStyleRegister.tsx
@@ -236,6 +236,9 @@ export const parseStyle = (
             if (mergedKey.startsWith('@')) {
               // 略过媒体查询，交给子节点继续插入 hashId
               subInjectHash = true;
+            } else if (mergedKey === '&') {
+              // 抹掉 root selector 上的单个 &
+              mergedKey = injectSelectorHash('', hashId, hashPriority);
             } else {
               // 注入 hashId
               mergedKey = injectSelectorHash(key, hashId, hashPriority);

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -777,4 +777,38 @@ describe('csssinjs', () => {
       });
     });
   });
+
+  it('hash & nest style', () => {
+    const genHashStyle = (): CSSInterpolation => ({
+      '&': {
+        a: {
+          color: 'red',
+        },
+      },
+    });
+
+    const Holder = () => {
+      const [token, hashId] = useCacheToken<DerivativeToken>(theme, [], {
+        salt: 'test',
+      });
+
+      useStyleRegister({ theme, token, hashId, path: ['holder'] }, () => [
+        genHashStyle(),
+      ]);
+
+      return <div className={classNames('box', hashId)} />;
+    };
+
+    const { unmount } = render(<Holder />);
+
+    const styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles).toHaveLength(1);
+
+    const style = styles[0];
+    expect(style.innerHTML).toContain(
+      ':where(.css-dev-only-do-not-override-1ldpa3u) a{color:red;}',
+    );
+
+    unmount();
+  });
 });