Add nonce support for css-variables and injectCSPNonce helper

- Extract injectCSPNonce helper function to unify nonce injection logic
- Add nonce parameter support to useCacheToken hook with type definition
- Add nonce parameter support to useCSSVarRegister hook
- Refactor useStyleRegister to use new injectCSPNonce helper
- Add comprehensive tests for nonce functionality (string and function types)

This provides better CSP security by allowing nonce configuration for style elements.

Author: zombieJ

src/hooks/useCSSVarRegister.ts

@@ -5,7 +5,7 @@ import StyleContext, {
   ATTR_TOKEN,
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
-import { isClientSide, toStyleStr } from '../util';
+import { injectCSPNonce, isClientSide, toStyleStr } from '../util';
 import type { TokenWithCSSVar } from '../util/css-variables';
 import { transformToken } from '../util/css-variables';
 import type { ExtractStyle } from './useGlobalCache';
@@ -31,10 +31,11 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
     scope?: string | string[];
     token: any;
     hashId?: string;
+    nonce?: string | (() => string);
   },
   fn: () => T,
 ) => {
-  const { key, prefix, unitless, ignore, token, hashId, scope } = config;
+  const { key, prefix, unitless, ignore, token, hashId, scope, nonce } = config;
   const {
     cache: { instanceId },
     container,
@@ -70,12 +71,16 @@ 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,
-      });
+      };
+
+      injectCSPNonce(mergedCSSConfig, 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, injectCSPNonce, memoResult, token2key, toStyleStr } from '../util';
 import { transformToken } from '../util/css-variables';
 import type { ExtractStyle } from './useGlobalCache';
 import useGlobalCache from './useGlobalCache';
@@ -68,6 +68,12 @@ export interface Option<DerivativeToken, DesignToken> {
     /** Key for current theme. Useful for customizing and should be unique */
     key: string;
   };
+
+  /**
+   * CSP nonce for style element.
+   * Can be a string or a function that returns a string.
+   */
+  nonce?: string | (() => string);
 }
 
 const tokenKeys = new Map<string, number>();
@@ -168,6 +174,7 @@ export default function useCacheToken<
     formatToken,
     getComputedToken: compute,
     cssVar,
+    nonce,
   } = option;
 
   // Basic - We do basic cache here
@@ -219,12 +226,16 @@ 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,
-      });
+      };
+
+      injectCSPNonce(mergedCSSConfig, nonce);
+
+      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), mergedCSSConfig);
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

src/hooks/useStyleRegister.tsx

@@ -15,7 +15,7 @@ import StyleContext, {
   ATTR_MARK,
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
-import { isClientSide, isNonNullable, toStyleStr, where } from '../util';
+import { injectCSPNonce, isClientSide, isNonNullable, toStyleStr, where } from '../util';
 import {
   CSS_FILE_STYLE,
   existPath,
@@ -463,11 +463,7 @@ export default function useStyleRegister(
           priority,
         };
 
-        const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
-
-        if (nonceStr) {
-          mergedCSSConfig.csp = { nonce: nonceStr };
-        }
+        injectCSPNonce(mergedCSSConfig, nonce);
 
         // ================= Split Effect Style =================
         // We will split effectStyle here since @layer should be at the top level

src/util/index.ts

@@ -204,3 +204,18 @@ export function where(options?: {
 export const isNonNullable = <T>(val: T): val is NonNullable<T> => {
   return val !== undefined && val !== null;
 };
+
+export type Nonce = string | (() => string);
+
+/**
+ * Get nonce value and inject it into CSS config if available.
+ */
+export function injectCSPNonce<T extends { csp?: { nonce?: string } }>(
+  config: T,
+  nonce: Nonce | undefined,
+) {
+  const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
+  if (nonceStr) {
+    config.csp = { nonce: nonceStr };
+  }
+}

tests/css-variables.spec.tsx

@@ -14,6 +14,7 @@ import {
   useCSSVarRegister,
   useStyleRegister,
 } from '../src';
+import { ATTR_TOKEN } from '../src/StyleContext';
 
 export interface DesignToken {
   primaryColor: string;
@@ -580,4 +581,96 @@ describe('CSS Variables', () => {
       /\.orange\.box,\s*\.orange\.container\{/,
     );
   });
+
+  describe('nonce', () => {
+    function testCacheTokenNonce(
+      name: string,
+      nonce: string | (() => string),
+    ) {
+      it(`useCacheToken - ${name}`, () => {
+        const CacheTokenNonceBox = () => {
+          useCacheToken<DerivativeToken, DesignToken>(
+            theme,
+            [defaultDesignToken],
+            {
+              salt: '',
+              cssVar: {
+                prefix: 'rc',
+                key: 'nonce-cache-token',
+              },
+              nonce,
+            },
+          );
+
+          return <div />;
+        };
+
+        render(
+          <StyleProvider cache={createCache()}>
+            <CacheTokenNonceBox />
+          </StyleProvider>,
+        );
+
+        const styles = Array.from(document.head.querySelectorAll('style'));
+        const cacheTokenStyle = styles.find((style) =>
+          style.getAttribute(ATTR_TOKEN) === 'nonce-cache-token',
+        );
+        expect(cacheTokenStyle).toBeDefined();
+        expect(cacheTokenStyle!.nonce).toBe('bamboo');
+      });
+    }
+
+    testCacheTokenNonce('string', 'bamboo');
+    testCacheTokenNonce('function', () => 'bamboo');
+
+    function testCSSVarRegisterNonce(
+      name: string,
+      nonce: string | (() => string),
+    ) {
+      it(`useCSSVarRegister - ${name}`, () => {
+        const CSSVarNonceBox = () => {
+          const [token, hashId, realToken] = useCacheToken<
+            DerivativeToken,
+            DesignToken
+          >(theme, [defaultDesignToken], {
+            salt: '',
+            cssVar: {
+              prefix: 'rc',
+              key: 'nonce-css-var',
+            },
+          });
+
+          useCSSVarRegister(
+            {
+              path: ['NonceBox'],
+              key: 'nonce-css-var',
+              token: realToken,
+              prefix: 'rc-nonce',
+              hashId,
+              nonce,
+            },
+            () => ({ testColor: '#ff0000' }),
+          );
+
+          return <div />;
+        };
+
+        render(
+          <StyleProvider cache={createCache()}>
+            <CSSVarNonceBox />
+          </StyleProvider>,
+        );
+
+        const styles = Array.from(document.head.querySelectorAll('style'));
+        const cssVarStyle = styles.find((style) =>
+          style.textContent?.includes('--rc-nonce-test-color'),
+        );
+        expect(cssVarStyle).toBeDefined();
+        expect(cssVarStyle!.nonce).toBe('bamboo');
+      });
+    }
+
+    testCSSVarRegisterNonce('string', 'bamboo');
+    testCSSVarRegisterNonce('function', () => 'bamboo');
+  });
 });