Description
openedon Feb 10, 2022
Discussed in #17467
Originally posted by Radiance888 February 10, 2022
We're using storybook for preact demos and webpack bundles @emotion/core -> @emotion/cache -> @emotion/sheet which is inserting styles to iframe headers causing multiple CSP errors for styles like below
<head>
<style data-emotion>...</style>
<style data-emotion>...</style>
<style data-emotion>...</style>
<style data-emotion>...</style>
<style data-emotion>...</style>
...
</head>
I tried checking the following docs - https://emotion.sh/docs/cache-provider, https://www.npmjs.com/package/@emotion/sheet/v/10.0.0-really-unsafe-please-do-not-use.1?activeTab=dependents to pass the nonce but we do not create StyleSheet / createCache within any component, but webpack bundles all dependencies from package.json as a part of theme and it applies default options ( nonce - undefined)
I tried adding CacheProvider to storybook decorators globally like below - ( https://storybook.js.org/docs/react/writing-stories/decorators )
// .storybook/preview.js
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import React from 'react';
const styleCache = createCache({
key: 'prefix',
nonce: 'nonce-id',
});
export const decorators = [
(Story) => (
<div id="cache-block">
<CacheProvider value={styleCache}>
<Story />
</CacheProvider>
</div>
),
];
I can see cache-block is rendered but the header styles are not updated with the nonce value.
If I miss anything here or if there's another way to pass nonce for emotion-styles please let me know!
Thanks!