fix: root selector with single &

ant-design · Aug 22, 2024 · 63d6a2e · 63d6a2e
1 parent 284226f
commit 63d6a2e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
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);
@@ -251,7 +254,7 @@ export const parseStyle = (
             // and finally we will get `{color:red;}` as css, which is wrong.
             // So we need to remove key in root, and treat child `{ a: { color: 'red' } }` as root.
             mergedKey = '';
-            nextRoot = true;
+            nextRoot = !hashId;
           }
 
           const [parsedStr, childEffectStyle] = parseStyle(

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -778,7 +778,7 @@ describe('csssinjs', () => {
     });
   });
 
-  it('hash & nest style', () => {
+  it.only('hash & nest style', () => {
     const genHashStyle = (): CSSInterpolation => ({
       '&': {
         a: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -778,7 +778,7 @@ describe('csssinjs', () => { @@
         });
       });
-      it('hash & nest style', () => {
+      it.only('hash & nest style', () => {
         const genHashStyle = (): CSSInterpolation => ({
           '&': {
             a: {
@@ Expand Down @@