diff --git a/src/StyleContext.tsx b/src/StyleContext.tsx index ee261ee..42152e5 100644 --- a/src/StyleContext.tsx +++ b/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({ diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts index 8ace839..2ae399c 100644 --- a/src/hooks/useCSSVarRegister.ts +++ b/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 = >( cache: { instanceId }, container, hashPriority, - nonce, } = useContext(StyleContext); const { _tokenKey: tokenKey } = token; @@ -71,17 +70,12 @@ const useCSSVarRegister = >( if (!cssVarsStr) { return; } - const mergedCSSConfig = mergeCSSConfig[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; diff --git a/src/hooks/useCacheToken.tsx b/src/hooks/useCacheToken.tsx index 847d7bc..2873af2 100644 --- a/src/hooks/useCacheToken.tsx +++ b/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[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; diff --git a/src/util/index.ts b/src/util/index.ts index b00252b..eaac037 100644 --- a/src/util/index.ts +++ b/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( - 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`; diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx index a8ba370..d69f633 100644 --- a/tests/index.spec.tsx +++ b/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( - - - , - ); - - 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: {