chore(deps): update webpack (major)

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
css-loader	^6.8.1 -> ^7.1.2
postcss-loader	^7.3.3 -> ^8.2.0
style-loader	^3.3.3 -> ^4.0.0
webpack-cli (source)	^5.1.4 -> ^6.0.1

---

Release Notes

webpack-contrib/css-loader (css-loader)

v7.1.2

Compare Source

v7.1.1

Compare Source

v7.1.0

Compare Source

Features

• added the getJSON option to output CSS modules mapping (#​1577) (af834b4)

v7.0.0

Compare Source

⚠ BREAKING CHANGES

• The modules.namedExport option is true by default if you enable the esModule option

Migration guide:

Before:

import style from "./style.css";

console.log(style.myClass);

After:

import * as style from "./style.css";

console.log(style.myClass);

To restore 6.x behavior, please use:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            namedExport: false,
            exportLocalsConvention: 'as-is',
            //
            // or, if you prefer camelcase style
            //
            // exportLocalsConvention: 'camel-case-only'
          },
        },
      },
    ],
  },
};

Typescript migration:

Before:

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

After:

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export = classes;
}

• The modules.exportLocalsConvention has the value as-is when the modules.namedExport option is true and you don't specify a value
• Minimum supported webpack version is 5.27.0
• Minimum supported Node.js version is 18.12.0

Features

• The modules.namedExports option works fine with any modules.exportLocalsConvention values (f96a110)
• Added dashed variants for the modules.exportLocalsConvention options (40e1668)

webpack-contrib/postcss-loader (postcss-loader)

v8.2.0

Compare Source

Features

• update jiti from v1 to v2 (9c74974)

8.1.1 (2024-02-28)

Bug Fixes

• respect default when loading postcss esm configs (52d8050)

v8.1.1

Compare Source

Features

• update jiti from v1 to v2 (9c74974)

8.1.1 (2024-02-28)

Bug Fixes

• respect default when loading postcss esm configs (52d8050)

v8.1.0

Compare Source

Features

• update jiti from v1 to v2 (9c74974)

8.1.1 (2024-02-28)

Bug Fixes

• respect default when loading postcss esm configs (52d8050)

v8.0.0

Compare Source

⚠ BREAKING CHANGES

• minimum supported Node.js version is 18.12.0 (#​677) (8dd0315)

7.3.4 (2023-12-27)

Bug Fixes

• do not crash if pkg.(d|devD)ependencies unset (#​667) (8ef0c7e)

7.3.3 (2023-06-10)

Bug Fixes

• perf: avoid using klona for postcss options (#​658) (e754c3f)
• bug with loading configurations after updating cosmiconfig to version 8.2 (684d265)

7.3.2 (2023-05-28)

Bug Fixes

• use cause to keep original errors and warnings (#​655) (e8873f4)

7.3.1 (2023-05-26)

Bug Fixes

• warning and error serialization (65748ec)

webpack-contrib/style-loader (style-loader)

v4.0.0

Compare Source

⚠ BREAKING CHANGES

• minimum supported webpack version is 5.27.0
• minimum support Node.js version is 18.12.0
• the insert option can only be a selector or the path to the module

Migration:

Before:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "styleTag",
              styleTagTransform (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

insert-function.js

function insert(css, style) {
  const parent = options.target || document.head;

  parent.appendChild(element);
}

module.exports = insert;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              insert: require.resolve("./insert.js"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

• the styleTagTransform option can only be the path to the module

Migration:

Before:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "styleTag",
              styleTagTransform (css, style) {
                // Do something ...
                style.innerHTML = `${css}.modify{}\n`;

                document.head.appendChild(style);
              },
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

After:

style-tag-transform-function.js

function styleTagTransform(css, style) {
  // Do something ...
  style.innerHTML = `${css}.modify{}\n`;

  document.head.appendChild(style);
}

module.exports = styleTagTransform;

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: "style-loader",
            options: {
              styleTagTransform: require.resolve("./style-tag-transform-function.js"),
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

Bug Fixes

• css experiments logic (#​617) (8b9fc97)

3.3.3 (2023-05-19)

Bug Fixes

• compatibility with built-in CSS support (#​605) (9636f58)

3.3.2 (2023-03-13)

Bug Fixes

• noop in environment without DOM API (#​597) (03d3df3)

3.3.1 (2021-10-21)

Bug Fixes

• small perf improvement (#​544) (610524e)

webpack/webpack-cli (webpack-cli)

v6.0.1

Compare Source

Bug Fixes

• update peer dependencies (#​4356) (7a7e5d9)

v6.0.0

Compare Source

BREAKING CHANGES

• the minimum required Node.js version is 18.12.0
• removed init, loader and plugin commands in favor create-webpack-app
• dropped support for webpack-dev-server@v4
• minimum supported webpack version is 5.82.0
• The --define-process-env-node-env option was renamed to --config-node-env

Bug Fixes

• allow to require webpack.config.js in ESM format (#​4346) (5106684)
• correct the minimum help output (#​4057) (c727c4f)
• gracefully shutting down (#​4145) (90720e2)
• improve help output for possible values (#​4316) (4cd5aef)
• no serve when dev-server is false (#​2947) (a93e860)

Features

• output pnpm version with info/version command (#​3906) (38f3c6f)

5.1.4 (2023-06-07)

Bug Fixes

• multi compiler progress output (f659624)

5.1.3 (2023-06-04)

Bug Fixes

• regression for custom configurations (#​3834) (bb4f8eb)

5.1.2 (2023-06-04)

Bug Fixes

• improve check for custom webpack and webpack-dev-server package existance (0931ab6)
• improve help for some flags (f468614)
• improved support for .cts and .mts extensions (a77daf2)

5.1.1 (2023-05-09)

Bug Fixes

• false positive warning when --watch used (#​3783) (c0436ba)

---

Configuration

📅 Schedule: Branch creation - "before 8am on monday" in timezone America/Los_Angeles, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.