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 的调用路径

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

@@ -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,19 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
       if (!cssVarsStr) {
         return;
       }
-      const style = updateCSS(cssVarsStr, styleId, {
+      const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
         mark: ATTR_MARK,
         prepend: 'queue',
         attachTo: container,
         priority: -999,
-      });
+      };
+
+      const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
+      if (nonceStr) {
+        mergedCSSConfig.csp = { nonce: nonceStr };
+      }
+
+      const style = updateCSS(cssVarsStr, styleId, mergedCSSConfig);
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

src/hooks/useCacheToken.tsx

@@ -161,6 +161,7 @@ export default function useCacheToken<
     cache: { instanceId },
     container,
     hashPriority,
+    nonce,
   } = useContext(StyleContext);
   const {
     salt = '',
@@ -219,12 +220,19 @@ export default function useCacheToken<
       if (!cssVarsStr) {
         return;
       }
-      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), {
+      const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
         mark: ATTR_MARK,
         prepend: 'queue',
         attachTo: container,
         priority: -999,
-      });
+      };
+
+      const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
+      if (nonceStr) {
+        mergedCSSConfig.csp = { nonce: nonceStr };
+      }
+
+      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), mergedCSSConfig);
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

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: {