fix: css var prefix should affect style hash (#155)

ant-design · Oct 31, 2023 · 741cfbf · 741cfbf
1 parent 71a7238
commit 741cfbf
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 8 deletions.
diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts
@@ -37,15 +37,14 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
   const {
     cache: { instanceId },
     container,
-    autoClear,
   } = useContext(StyleContext);
   const { _tokenKey: tokenKey } = token;
 
-  const stylePath = [...config.path, key, scope];
+  const stylePath = [...config.path, key, scope, tokenKey];
 
   const cache = useGlobalCache<CSSVarCacheValue<T>>(
     CSS_VAR_PREFIX,
-    [...stylePath, tokenKey],
+    stylePath,
     () => {
       const originToken = fn();
       const [mergedToken, cssVarsStr] = transformToken(originToken, key, {
@@ -57,8 +56,8 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
       const styleId = uniqueHash(stylePath, cssVarsStr);
       return [mergedToken, cssVarsStr, styleId, key];
     },
-    ([, , styleId], fromHMR) => {
-      if ((fromHMR || autoClear) && isClientSide) {
+    ([, , styleId]) => {
+      if (isClientSide) {
         removeCSS(styleId, { mark: ATTR_MARK });
       }
     },

diff --git a/src/hooks/useCacheToken.tsx b/src/hooks/useCacheToken.tsx
@@ -209,7 +209,7 @@ export default function useCacheToken<
       recordCleanToken(themeKey);
 
       const hashId = cssVar
-        ? `${hashPrefix}-${hash(salt)}`
+        ? `${hashPrefix}-${hash(`${salt}${cssVar.prefix ?? ''}`)}`
         : `${hashPrefix}-${hash(tokenKey)}`;
       mergedDerivativeToken._hashId = hashId; // Not used
 

diff --git a/tests/__snapshots__/css-variables.spec.tsx.snap b/tests/__snapshots__/css-variables.spec.tsx.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CSS Variables > support ssr 1`] = `"<style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"8y225z\\">.apple{--rc-primary-color:#1890ff;--rc-text-color:#333333;--rc-border-radius:2px;--rc-border-color:black;--rc-border-width:1px;--rc-line-height:1.5;--rc-primary-color-disabled:rgba(24, 144, 255, 0.5);}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"16lqo6h\\">.apple.box{--rc-box-box-color:#5c21ff;}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"0\\" data-token-hash=\\"302na3\\" data-css-hash=\\"1eso9od\\">:where(.css-dev-only-do-not-override-0).box{line-height:var(--rc-line-height);border:var(--rc-border-width) solid var(--rc-border-color);color:var(--rc-box-box-color);background-color:var(--rc-primary-color);}</style><style data-ant-cssinjs-cache-path=\\"data-ant-cssinjs-cache-path\\">.data-ant-cssinjs-cache-path{content:\\"302na3|Box:1eso9od\\";}</style>"`;
+exports[`CSS Variables > support ssr 1`] = `"<style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"8y225z\\">.apple{--rc-primary-color:#1890ff;--rc-text-color:#333333;--rc-border-radius:2px;--rc-border-color:black;--rc-border-width:1px;--rc-line-height:1.5;--rc-primary-color-disabled:rgba(24, 144, 255, 0.5);}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"j9jql8\\">.apple.box{--rc-box-box-color:#5c21ff;}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"0\\" data-token-hash=\\"302na3\\" data-css-hash=\\"nq18cu\\">:where(.css-dev-only-do-not-override-xcmczj).box{line-height:var(--rc-line-height);border:var(--rc-border-width) solid var(--rc-border-color);color:var(--rc-box-box-color);background-color:var(--rc-primary-color);}</style><style data-ant-cssinjs-cache-path=\\"data-ant-cssinjs-cache-path\\">.data-ant-cssinjs-cache-path{content:\\"302na3|Box:nq18cu\\";}</style>"`;
diff --git a/tests/css-variables.spec.tsx b/tests/css-variables.spec.tsx
@@ -60,6 +60,7 @@ type DesignTokenProviderProps = {
   hashed?: string | boolean;
   cssVar?: {
     key: string;
+    prefix?: string;
   };
 };
 
@@ -110,7 +111,7 @@ function useToken(): [DerivativeToken, string, string, DerivativeToken] {
   >(theme, [defaultDesignToken, rootDesignToken], {
     salt: typeof hashed === 'string' ? hashed : '',
     cssVar: cssVar && {
-      prefix: 'rc',
+      prefix: cssVar.prefix ?? 'rc',
       key: cssVar.key,
       unitless: {
         lineHeight: true,
@@ -403,4 +404,50 @@ describe('CSS Variables', () => {
 
     expect(extractStyle(cache)).toMatchSnapshot();
   });
+
+  it('css var prefix should regenerate component style', () => {
+    const { rerender } = render(
+      <DesignTokenProvider
+        theme={{
+          cssVar: {
+            key: 'apple',
+            prefix: 'app',
+          },
+        }}
+      >
+        <Box className="target" />
+      </DesignTokenProvider>,
+    );
+
+    let styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles.length).toBe(3);
+    expect(
+      styles.some((style) => style.textContent?.includes('var(--app-')),
+    ).toBe(true);
+    expect(
+      styles.some((style) => style.textContent?.includes('var(--bank-')),
+    ).toBe(false);
+
+    rerender(
+      <DesignTokenProvider
+        theme={{
+          cssVar: {
+            key: 'apple',
+            prefix: 'bank',
+          },
+        }}
+      >
+        <Box className="target" />
+      </DesignTokenProvider>,
+    );
+
+    styles = Array.from(document.head.querySelectorAll('style'));
+    expect(styles.length).toBe(4);
+    expect(
+      styles.some((style) => style.textContent?.includes('var(--app-')),
+    ).toBe(true);
+    expect(
+      styles.some((style) => style.textContent?.includes('var(--bank-')),
+    ).toBe(true);
+  });
 });