From 3aeb3cb0d80d7820e448284b11ecf0950b19ef52 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 5 Nov 2026 17:53:19 +0000 Subject: [PATCH 1/3] docs: recommend webpack's built-in CSS, mark css-loader & co. as deprecated - The built-in CSS support is on by default since webpack 5.109.0 (`experiments.css: "auto"`); say when `experiments.css: true` is still needed instead of implying it always is. - css-loader, style-loader and mini-css-extract-plugin are deprecated: label them so, and link the Native CSS migration guide. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_013FhutTnKEPLYcuGNGNijRS --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a2e42f8..05abcf5 100644 --- a/README.md +++ b/README.md @@ -62,8 +62,8 @@ module.exports = { > [!NOTE] > -> The built-in CSS support of webpack requires `experiments.css` to be enabled. -> Alternatively you can still chain the loader with [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) (or the [`mini-css-extract-plugin`](https://github.com/webpack/mini-css-extract-plugin)), see [Using `css-loader` and `style-loader`](#using-css-loader-and-style-loader). +> The built-in CSS support of webpack is the recommended way to handle the generated CSS. It is on by default since webpack 5.109.0 (`experiments.css` defaults to `"auto"`), so `experiments.css: true` is only required on older webpack 5 releases — keeping it, as the examples below do, is harmless. +> Alternatively you can still chain the loader with the deprecated [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) (or the [`mini-css-extract-plugin`](https://github.com/webpack/mini-css-extract-plugin)), see [Using `css-loader` and `style-loader`](#using-css-loader-and-style-loader) — and the [Native CSS migration guide](https://webpack.js.org/guides/native-css/#migration-guide) to move off them. Finally, run `webpack` using the method you normally use (e.g., via CLI or an npm script). @@ -518,7 +518,7 @@ Unfortunately, Less doesn't map all options 1-by-1 to camelCase. When in doubt, ### Using `css-loader` and `style-loader` -The built-in CSS support of webpack is not mandatory, you can still chain the `less-loader` with [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) to immediately apply all styles to the DOM. +The built-in CSS support of webpack is not mandatory: on setups that still need them, you can chain the `less-loader` with the deprecated [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) to immediately apply all styles to the DOM. New projects should use the built-in CSS support instead — see the [Native CSS migration guide](https://webpack.js.org/guides/native-css/#migration-guide). **webpack.config.js** @@ -585,7 +585,7 @@ If you want to edit the original Less files inside Chrome, [there's a good blog The built-in CSS support of webpack always extracts style sheets into dedicated files, so your styles are not dependent on JavaScript, which improves performance and cacheability. The name of the generated files can be configured using the [`output.cssFilename`](https://webpack.js.org/configuration/output/#outputcssfilename) and [`output.cssChunkFilename`](https://webpack.js.org/configuration/output/#outputcsschunkfilename) options. -When you chain the loader with `css-loader` and `style-loader` instead, it's recommended to extract the style sheets into a dedicated file in production using the [MiniCssExtractPlugin](https://github.com/webpack/mini-css-extract-plugin). +When you chain the loader with `css-loader` and `style-loader` instead, extract the style sheets into a dedicated file in production using the deprecated [MiniCssExtractPlugin](https://github.com/webpack/mini-css-extract-plugin). ### Imports @@ -718,7 +718,7 @@ Bundling CSS with webpack has some nice advantages like referencing images and f In production, on the other hand, it's not a good idea to apply your style sheets depending on JS execution. Rendering may be delayed or even a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) might be visible. Thus it's often still better to have them as separate files in your final production build. The built-in CSS support of webpack does this out of the box: every entry point and chunk gets its own style sheet, no extra plugin required. -When you chain the loader with the `css-loader` instead, use the [`MiniCssExtractPlugin`](https://github.com/webpack/mini-css-extract-plugin) to extract a style sheet from the bundle. +When you chain the loader with the `css-loader` instead, use the deprecated [`MiniCssExtractPlugin`](https://github.com/webpack/mini-css-extract-plugin) to extract a style sheet from the bundle. ### CSS modules From 3fb91ff3e440b2122a40858162f31597c7a720e4 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 6 Nov 2026 10:35:18 +0000 Subject: [PATCH 2/3] =?UTF-8?q?docs:=20address=20CodeRabbit=20review=20?= =?UTF-8?q?=E2=80=94=20minimum=20version,=20"auto"=20caveats,=20linking=20?= =?UTF-8?q?the=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `css/auto` needs webpack 5.87.0 or later (verified: 5.86.0 fails with `No parser registered for css/auto`, 5.87.0 builds). - `experiments.css: "auto"` turns built-in CSS off when another rule handles `.css` files, so the examples keep `experiments.css: true`; a remaining `css-loader` rule then needs `type: "javascript/auto"`. - Built-in CSS emits a `.css` file the page must link (verified in a browser: a JS-only page stays unstyled). Point to native HTML (an HTML entry or `output.html: true`), which adds the ``, or `exportType: "style"`. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_013FhutTnKEPLYcuGNGNijRS --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 05abcf5..4c4fa56 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,8 @@ module.exports = { > [!NOTE] > -> The built-in CSS support of webpack is the recommended way to handle the generated CSS. It is on by default since webpack 5.109.0 (`experiments.css` defaults to `"auto"`), so `experiments.css: true` is only required on older webpack 5 releases — keeping it, as the examples below do, is harmless. +> The built-in CSS support of webpack is the recommended way to handle the generated CSS, and needs webpack 5.87.0 or later. Since webpack 5.109.0 it is on by default (`experiments.css` defaults to `"auto"`), but `"auto"` switches it off when another `module.rules` entry handles `.css` files, so the examples below keep `experiments.css: true`. If such a rule still uses `css-loader`, give it `type: "javascript/auto"` so built-in CSS leaves those files to it. +> Its output is a `.css` file the page has to link: let webpack build the page — an [HTML entry or `output.html: true`](https://webpack.js.org/guides/native-html/) adds the `` for you — or set [`exportType: "style"`](https://webpack.js.org/guides/native-css/#output-modes-exporttype) to inject the styles from JavaScript instead. > Alternatively you can still chain the loader with the deprecated [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) (or the [`mini-css-extract-plugin`](https://github.com/webpack/mini-css-extract-plugin)), see [Using `css-loader` and `style-loader`](#using-css-loader-and-style-loader) — and the [Native CSS migration guide](https://webpack.js.org/guides/native-css/#migration-guide) to move off them. Finally, run `webpack` using the method you normally use (e.g., via CLI or an npm script). From 3e7130080b7416f8d78ae7e81160336338cf10ff Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 6 Nov 2026 15:54:36 +0000 Subject: [PATCH 3/3] =?UTF-8?q?docs:=20address=20CodeRabbit=20review=20?= =?UTF-8?q?=E2=80=94=20version=20requirements=20for=20loading=20options?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `exportType: "style"` needs webpack 5.106.0+, an HTML entry or `output.html` 5.108.0+ (with `experiments.html: true` before 5.109.0); linking the emitted file yourself stays the fallback. Versions taken from webpack's CHANGELOG. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_013FhutTnKEPLYcuGNGNijRS --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4c4fa56..1814892 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ module.exports = { > [!NOTE] > > The built-in CSS support of webpack is the recommended way to handle the generated CSS, and needs webpack 5.87.0 or later. Since webpack 5.109.0 it is on by default (`experiments.css` defaults to `"auto"`), but `"auto"` switches it off when another `module.rules` entry handles `.css` files, so the examples below keep `experiments.css: true`. If such a rule still uses `css-loader`, give it `type: "javascript/auto"` so built-in CSS leaves those files to it. -> Its output is a `.css` file the page has to link: let webpack build the page — an [HTML entry or `output.html: true`](https://webpack.js.org/guides/native-html/) adds the `` for you — or set [`exportType: "style"`](https://webpack.js.org/guides/native-css/#output-modes-exporttype) to inject the styles from JavaScript instead. +> Its output is a `.css` file the page has to link: let webpack build the page — an [HTML entry or `output.html: true`](https://webpack.js.org/guides/native-html/) (webpack 5.108.0 or later; before 5.109.0 also set `experiments.html: true`) adds the `` for you — set [`exportType: "style"`](https://webpack.js.org/guides/native-css/#output-modes-exporttype) (webpack 5.106.0 or later) to inject the styles from JavaScript instead, or link the emitted file yourself. > Alternatively you can still chain the loader with the deprecated [`css-loader`](https://github.com/webpack/css-loader) and [`style-loader`](https://github.com/webpack/style-loader) (or the [`mini-css-extract-plugin`](https://github.com/webpack/mini-css-extract-plugin)), see [Using `css-loader` and `style-loader`](#using-css-loader-and-style-loader) — and the [Native CSS migration guide](https://webpack.js.org/guides/native-css/#migration-guide) to move off them. Finally, run `webpack` using the method you normally use (e.g., via CLI or an npm script).