fix: apply StyleProvider nonce to CSS variable styles (#252)

* fix: apply StyleProvider nonce to CSS variable styles

修复了当通过 StyleProvider 传递 nonce 时，CSS 变量样式未获得 nonce 属性的问题。

Changes:
- 在 StyleContextProps 中添加 nonce 配置支持
- 在 useCacheToken 中应用 nonce 到 CSS var 样式注入
- 在 useCSSVarRegister 中应用 nonce 到 CSS var 样式注入
- 为 StyleProvider nonce 功能添加测试用例

用户现在可以一致地在所有样式注入点使用 StyleProvider 配置 nonce。

改进建议（未来优化）：
- 提取 nonce 处理逻辑为共享函数以减少代码重复
- 当前测试已覆盖 useCacheToken → useCSSVarRegister 的调用路径

* refactor: extract nonce handling logic into shared function

提取了 useCacheToken 和 useCSSVarRegister 中重复的 nonce 处理逻辑为 mergeCSSConfig 共享函数，减少代码重复并提高可维护性。

Changes:
- 在 util/index.ts 中添加 mergeCSSConfig 工具函数
- useCacheToken 使用 mergeCSSConfig 代替重复代码
- useCSSVarRegister 使用 mergeCSSConfig 代替重复代码

* fix: correct mergeCSSConfig generic type constraint

修复了 mergeCSSConfig 的泛型约束，使其支持 Options | undefined 类型，而不是只接受 Record<string, any>。

Changes:
- 移除 mergeCSSConfig 的泛型约束 `T extends Record<string, any>`
- 改为泛型 `T` 以支持任何类型

Author: zombieJ

src/StyleContext.tsx

@@ -78,9 +78,11 @@ export interface StyleContextProps {
   linters?: Linter[];
   /** Wrap css in a layer to avoid global style conflict */
   layer?: boolean;
-
   /** Hardcode here since transformer not support take effect on serialize currently */
   autoPrefix?: boolean;
+
+  /** Nonce for CSP (Content Security Policy) */
+  nonce?: string | (() => string);
 }
 
 const StyleContext = React.createContext<StyleContextProps>({

src/hooks/useCSSVarRegister.ts

@@ -5,7 +5,7 @@ import StyleContext, {
   ATTR_TOKEN,
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
-import { isClientSide, toStyleStr } from '../util';
+import { isClientSide, mergeCSSConfig, toStyleStr } from '../util';
 import type { TokenWithCSSVar } from '../util/css-variables';
 import { transformToken } from '../util/css-variables';
 import type { ExtractStyle } from './useGlobalCache';
@@ -39,6 +39,7 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
     cache: { instanceId },
     container,
     hashPriority,
+    nonce,
   } = useContext(StyleContext);
   const { _tokenKey: tokenKey } = token;
 
@@ -70,12 +71,17 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
       if (!cssVarsStr) {
         return;
       }
-      const style = updateCSS(cssVarsStr, styleId, {
-        mark: ATTR_MARK,
-        prepend: 'queue',
-        attachTo: container,
-        priority: -999,
-      });
+      const mergedCSSConfig = mergeCSSConfig<Parameters<typeof updateCSS>[2]>(
+        {
+          mark: ATTR_MARK,
+          prepend: 'queue',
+          attachTo: container,
+          priority: -999,
+        },
+        nonce,
+      );
+
+      const style = updateCSS(cssVarsStr, styleId, mergedCSSConfig);
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

src/hooks/useCacheToken.tsx

@@ -7,7 +7,7 @@ import StyleContext, {
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
 import type Theme from '../theme/Theme';
-import { flattenToken, memoResult, token2key, toStyleStr } from '../util';
+import { flattenToken, memoResult, mergeCSSConfig, token2key, toStyleStr } from '../util';
 import { transformToken } from '../util/css-variables';
 import type { ExtractStyle } from './useGlobalCache';
 import useGlobalCache from './useGlobalCache';
@@ -161,6 +161,7 @@ export default function useCacheToken<
     cache: { instanceId },
     container,
     hashPriority,
+    nonce,
   } = useContext(StyleContext);
   const {
     salt = '',
@@ -219,12 +220,17 @@ export default function useCacheToken<
       if (!cssVarsStr) {
         return;
       }
-      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), {
-        mark: ATTR_MARK,
-        prepend: 'queue',
-        attachTo: container,
-        priority: -999,
-      });
+      const mergedCSSConfig = mergeCSSConfig<Parameters<typeof updateCSS>[2]>(
+        {
+          mark: ATTR_MARK,
+          prepend: 'queue',
+          attachTo: container,
+          priority: -999,
+        },
+        nonce,
+      );
+
+      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), mergedCSSConfig);
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

src/util/index.ts

@@ -155,6 +155,28 @@ export function supportLogicProps(): boolean {
 
 export const isClientSide = canUseDom();
 
+/**
+ * Merge CSS injection configuration with nonce support
+ */
+/**
+ * Merge CSS injection configuration with nonce support
+ */
+export function mergeCSSConfig<T>(
+  config: T,
+  nonce?: string | (() => string),
+): T {
+  if (!nonce) {
+    return config;
+  }
+  
+  const mergedConfig = { ...config };
+  const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
+  if (nonceStr) {
+    (mergedConfig as any).csp = { nonce: nonceStr };
+  }
+  
+  return mergedConfig;
+}
 export function unit(num: string | number) {
   if (typeof num === 'number') {
     return `${num}px`;

tests/index.spec.tsx

@@ -507,6 +507,28 @@ describe('csssinjs', () => {
     test('function', () => 'bamboo');
   });
 
+  describe('StyleProvider nonce for CSS var', () => {
+    function testWithStyleProvider(name: string, nonce: string | (() => string)) {
+      it(name, () => {
+        const { unmount } = render(
+          <StyleProvider cache={createCache()} nonce={nonce}>
+            <Box />
+          </StyleProvider>,
+        );
+
+        const styles = Array.from(document.head.querySelectorAll('style'));
+        // Box 组件使用 useCacheToken 注册 CSS var，应该有 nonce
+        const cssVarStyle = styles.find(s => s.innerHTML.includes('--primary-color'));
+        expect(cssVarStyle).toBeDefined();
+        expect(cssVarStyle?.nonce).toBe('bamboo');
+        // unmount 后样式清理行为取决于 cache 配置
+      });
+    }
+
+    testWithStyleProvider('string', 'bamboo');
+    testWithStyleProvider('function', () => 'bamboo');
+  });
+
   it('should not insert style with different instanceId', () => {
     const genDemoStyle = (token: DerivativeToken): CSSInterpolation => ({
       div: {