Why is my Webpack nonce only applied to the first style tag and not all styles in the document?

Question

I’m working with both a basic Webpack setup and a Laravel Mix project that includes React. I’m trying to apply a nonce attribute to all tags to comply with my Content Security Policy (CSP), but I’m encountering an issue where the nonce is only applied to the first tag generated by Webpack and not the subsequent ones. I first attempted this with my Laravel Mix project, but after failing there, I set up a simple Webpack project to isolate the issue. While I managed to apply the nonce to one style tag in the basic Webpack setup, the rest of the styles generated do not receive the nonce, and multiple tags appear in the without the nonce.

Working Webpack configuration (simplified JS-only setup):

const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              attributes: {
                nonce: '12345678',  // This is where I add the nonce
              },
            },
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },
});

In this setup, the nonce is applied to the first tag, but not to the rest. I’m not sure why only one style tag receives the nonce.

Laravel Mix Setup with React:

const mix = require('laravel-mix');
const webpack = require('webpack');

// Define the nonce value
const STYLE_NONCE = JSON.stringify('your-generated-nonce-value');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            attributes: {
                                nonce: STYLE_NONCE,
                            },
                        },
                    },
                    'css-loader',
                    'postcss-loader',
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.STYLE_NONCE': STYLE_NONCE,
        }),
    ],
});

mix.sass('resources/sass/app.scss', 'public/css')
    .js('resources/js/app.js', 'public/js').react()
    .js('resources/js/company.js', 'public/js')
    .version();

In both setups (Webpack and Laravel Mix), only the first tag gets the nonce. I’ve tried several approaches, but I’m still stuck. How can I ensure that the nonce is applied to all generated tags? Is there something I might be missing with the style-loader or the Webpack configuration in general?

Any insights or suggestions would be greatly appreciated!

You can post this version of your question on StackOverflow, and hopefully, it will attract attention from developers familiar with Webpack and CSP configurations.

Even though in laravel its giving an error.

[![✖ Mix
  Compiled with some errors in 15.69s

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
ERROR in ./node_modules/react-date-range/dist/styles.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??ruleSet\[1\].rules\[6\].oneOf\[1\].use\[1\]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??ruleSet\[1\].rules\[6\].oneOf\[1\].use\[2\]!./node_modules/style-loader/dist/cjs.js??ruleSet\[1\].rules\[11\].use\[0\]!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/react-date-range/dist/styles.css)
Module build failed (from ./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /Users/rudra/Documents/pfiq/pfiq-web-app/node_modules/react-date-range/dist/styles.css Unknown word

  1 | 
> 2 |       import API from "!../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../style-loader/dist/runtime/insertBySelector.js";

ERROR in ./node_modules/react-date-range/dist/theme/default.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??ruleSet\[1\].rules\[6\].oneOf\[1\].use\[1\]!./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js??ruleSet\[1\].rules\[6\].oneOf\[1\].use\[2\]!./node_modules/style-loader/dist/cjs.js??ruleSet\[1\].rules\[11\].use\[0\]!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/react-date-range/dist/theme/default.css)
Module build failed (from ./node_modules/laravel-mix/node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(2:7) /Users/rudra/Documents/pfiq/pfiq-web-app/node_modules/react-date-range/dist/theme/default.css Unknown word

  1 | 
> 2 |       import API from "!../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../../style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../../style-loader/dist/runtime/insertBySelector.js";][1]][1]