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

This reverts commit ec07fb1.

Author: zombieJ

src/StyleContext.tsx

@@ -78,11 +78,9 @@ 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, mergeCSSConfig, toStyleStr } from '../util';
+import { isClientSide, toStyleStr } from '../util';
 import type { TokenWithCSSVar } from '../util/css-variables';
 import { transformToken } from '../util/css-variables';
 import type { ExtractStyle } from './useGlobalCache';
@@ -39,7 +39,6 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
     cache: { instanceId },
     container,
     hashPriority,
-    nonce,
   } = useContext(StyleContext);
   const { _tokenKey: tokenKey } = token;
 
@@ -71,17 +70,12 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
       if (!cssVarsStr) {
         return;
       }
-      const mergedCSSConfig = mergeCSSConfig<Parameters<typeof updateCSS>[2]>(
-        {
-          mark: ATTR_MARK,
-          prepend: 'queue',
-          attachTo: container,
-          priority: -999,
-        },
-        nonce,
-      );
-
-      const style = updateCSS(cssVarsStr, styleId, mergedCSSConfig);
+      const style = updateCSS(cssVarsStr, styleId, {
+        mark: ATTR_MARK,
+        prepend: 'queue',
+        attachTo: container,
+        priority: -999,
+      });
 
       (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, mergeCSSConfig, token2key, toStyleStr } from '../util';
+import { flattenToken, memoResult, token2key, toStyleStr } from '../util';
 import { transformToken } from '../util/css-variables';
 import type { ExtractStyle } from './useGlobalCache';
 import useGlobalCache from './useGlobalCache';
@@ -161,7 +161,6 @@ export default function useCacheToken<
     cache: { instanceId },
     container,
     hashPriority,
-    nonce,
   } = useContext(StyleContext);
   const {
     salt = '',
@@ -220,17 +219,12 @@ export default function useCacheToken<
       if (!cssVarsStr) {
         return;
       }
-      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);
+      const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), {
+        mark: ATTR_MARK,
+        prepend: 'queue',
+        attachTo: container,
+        priority: -999,
+      });
 
       (style as any)[CSS_IN_JS_INSTANCE] = instanceId;
 

src/util/index.ts

@@ -155,28 +155,6 @@ 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,28 +507,6 @@ 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: {