Refactor injectCSPNonce to return new config object

- Change injectCSPNonce from mutating to returning new object
- Follow functional programming principles
- Preserve existing csp config with spread operator
- Update all call sites to use returned value

Author: zombieJ

src/hooks/useCSSVarRegister.ts

@@ -71,14 +71,14 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
       if (!cssVarsStr) {
         return;
       }
-      const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
+      let mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
         mark: ATTR_MARK,
         prepend: 'queue',
         attachTo: container,
         priority: -999,
       };
 
-      injectCSPNonce(mergedCSSConfig, nonce);
+      mergedCSSConfig = injectCSPNonce(mergedCSSConfig, nonce);
 
       const style = updateCSS(cssVarsStr, styleId, mergedCSSConfig);
 

src/hooks/useCacheToken.tsx

@@ -7,7 +7,13 @@ import StyleContext, {
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
 import type Theme from '../theme/Theme';
-import { flattenToken, injectCSPNonce, 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';
@@ -226,16 +232,20 @@ export default function useCacheToken<
       if (!cssVarsStr) {
         return;
       }
-      const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
+      let mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
         mark: ATTR_MARK,
         prepend: 'queue',
         attachTo: container,
         priority: -999,
       };
 
-      injectCSPNonce(mergedCSSConfig, nonce);
+      mergedCSSConfig = injectCSPNonce(mergedCSSConfig, nonce);
 
-      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), mergedCSSConfig);
+      const style = updateCSS(
+        cssVarsStr,
+        hash(`css-var-${themeKey}`),
+        mergedCSSConfig,
+      );
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

src/hooks/useStyleRegister.tsx

@@ -15,7 +15,13 @@ import StyleContext, {
   ATTR_MARK,
   CSS_IN_JS_INSTANCE,
 } from '../StyleContext';
-import { injectCSPNonce, isClientSide, isNonNullable, toStyleStr, where } from '../util';
+import {
+  injectCSPNonce,
+  isClientSide,
+  isNonNullable,
+  toStyleStr,
+  where,
+} from '../util';
 import {
   CSS_FILE_STYLE,
   existPath,
@@ -456,14 +462,14 @@ export default function useStyleRegister(
     (cacheValue) => {
       const [styleStr, styleId, effectStyle, , priority] = cacheValue;
       if (isMergedClientSide && styleStr !== CSS_FILE_STYLE) {
-        const mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
+        let mergedCSSConfig: Parameters<typeof updateCSS>[2] = {
           mark: ATTR_MARK,
           prepend: enableLayer ? false : 'queue',
           attachTo: container,
           priority,
         };
 
-        injectCSPNonce(mergedCSSConfig, nonce);
+        mergedCSSConfig = injectCSPNonce(mergedCSSConfig, nonce);
 
         // ================= Split Effect Style =================
         // We will split effectStyle here since @layer should be at the top level

src/util/index.ts

@@ -213,9 +213,16 @@ export type Nonce = string | (() => string);
 export function injectCSPNonce<T extends { csp?: { nonce?: string } }>(
   config: T,
   nonce: Nonce | undefined,
-) {
+): T {
   const nonceStr = typeof nonce === 'function' ? nonce() : nonce;
   if (nonceStr) {
-    config.csp = { ...config.csp, nonce: nonceStr };
+    return {
+      ...config,
+      csp: {
+        ...config.csp,
+        nonce: nonceStr,
+      },
+    };
   }
+  return config;
 }