We're adding style src 'self' to the HTML page and emotion is generating styles dynamically to the header like below
<head>
<style data-emotion>
...
</style>
<style data-emotion>
...
</style>
<style data-emotion>
...
</style>
<style data-emotion>
...
</style>
...
</head>
How to generate nonce for above styles with the below such storybook webpack config
const path = require('path');
// Export a function. Accept the base config as the only param.
module.exports = {
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// Make whatever fine-grained changes you need
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
// Return the altered config
return config;
},
};
https://storybook.js.org/docs/react/configure/webpack
Generally for generating nonce in webpack we do like - https://github.com/cssinjs/jss/issues/559
Emotion has the below link which tells that we can add nonce using CacheProvider, but not very clear how to implement the same - https://emotion.sh/docs/@emotion/cache#nonce
It will be helpful if anyone can tell hints regarding setting nonce in storybook webpack config for emotion styles