Unable to use styled-components

[linonetwo]

styled-components.browser.esm.js:133 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

It is unable to add style now.

I tried to add

  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        'Content-Security-Policy': ["default-src 'self' 'unsafe-inline' 'unsafe-eval'"],
        ...details.responseHeaders,
      },
    });
  });

But still can't get around this.

[linonetwo]

Use

new CspHtmlWebpackPlugin({
      'base-uri': ["'self'"],
      'object-src': ["'none'"],
      'script-src': ["'self'"],
      'style-src': ["'self' 'unsafe-inline'"],
      'frame-src': ["'none'"],
      'worker-src': ["'none'"],
    }),

[reZach]

@linonetwo You can also pull the latest and use the mini-css-extract-plugin to load css files if you are loading css as described on this page. You were just a few hours behind me beginning to work on this! The plus side about this approach is webpack already configures your css in it's own bundle (you can configure with mini css extract plugin options if you'd like) and it has it's own nonce which matches the CSP.

This commit added this into the template. Essentially:

package.json

"devDependencies": {
    "mini-css-extract-plugin": "^0.9.0"
}

webpack.[development|production].js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(base, {
  // existing
  plugins: [
    new MiniCssExtractPlugin(), // Add this!
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "app/src/index.html"),
      filename: "index.html"
    }),
    new CspHtmlWebpackPlugin({
      "base-uri": ["'self'"],
      "object-src": ["'none'"],
      "script-src": ["'self'"],
      "style-src": ["'self'"], // don't need to add 'unsafe-inline'!
      "frame-src": ["'none'"],
      "worker-src": ["'none'"]
    })
  ]
})

[linonetwo]

Thanks for your solution, that really works for .css file.

But styled-components won't generate .css file, so it won't be loaded by the css loaders. It injects <style> tag to the header:

Do you know the possible solution?

[reZach]

Can you explain what styled-components you are speaking of?

I also omitted (by accident!) another file you must change. In order to use mini-css-extract-plugin, you have to take out style-loader (as it is the package inserting the style tags in your HTML). Here is what you need to modify in webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // other options
  module: {
    rules: [
      // other loaders
      // loads .css files
      {
        test: /\.css$/,
        include: [path.resolve(__dirname, "app/src")],
        use: [
          MiniCssExtractPlugin.loader, // Changed!
          {
            loader: "css-loader"
          }
        ],
        resolve: {
          extensions: [".css"]
        }
      }
    ]
  }
};

[linonetwo]

I followed your commit and changed that file also.

Please try this lib https://www.npmjs.com/package/styled-components

And simply do so to add style:

import styled from 'styled-components`

const Button = styled.button`
  color: grey;
`;

export default function App() {
  return <Button>aaa</Button>
}

It is a widely used way to add style to react components.

[reZach]

This is a new library for me, thank you for sharing. I take it with your earlier modification adding 'unsafe-inline' is the way to go to use styled-components. Thank you for sharing your solution with us here.

[Nantris]

Relevant to #53