From ffa01b8257a8fe98dedaa16ab384cf0909a017e5 Mon Sep 17 00:00:00 2001 From: alexander-akait Date: Sat, 29 Aug 2026 12:22:51 +0000 Subject: [PATCH] docs: use the built-in CSS support of webpack in examples Replace the `style-loader`/`css-loader` chains in the README examples with webpack's built-in CSS support (`experiments.css` and the `css/auto` module type), keeping the loader-based setup documented as an alternative. Add the built-in CSS support as the first recommended way to extract stylesheets. Cover the documented setup with tests: `getCompiler` can now build with `experiments.css` enabled and `css/auto` (without the test loader), and new tests assert the emitted CSS and its source map. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_013PtW7eezwuQP5epLFMrAky --- README.md | 169 ++++++++---- test/__snapshots__/loader.test.js.snap | 96 +++++++ .../sourceMap-options.test.js.snap | 256 ++++++++++++++++++ test/helpers/getCodeFromCssBundle.js | 23 ++ test/helpers/getCompiler.js | 19 +- test/helpers/index.js | 1 + test/loader.test.js | 22 ++ test/sourceMap-options.test.js | 28 ++ 8 files changed, 560 insertions(+), 54 deletions(-) create mode 100644 test/helpers/getCodeFromCssBundle.js diff --git a/README.md b/README.md index 877ea438..d1de2516 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,9 @@ pnpm add -D sass-loader sass webpack > [!NOTE] > -> To enable CSS processing in your project, you need to install [style-loader](https://webpack.js.org/loaders/style-loader/) and [css-loader](https://webpack.js.org/loaders/css-loader/) via `npm i style-loader css-loader`. +> Webpack has [built-in CSS support](https://webpack.js.org/configuration/experiments/#experimentscss), so no extra loaders are required to process the CSS generated by `sass-loader` - just enable `experiments.css` and set the module `type` to `css/auto`. +> +> If you prefer the loader-based setup, install [style-loader](https://webpack.js.org/loaders/style-loader/) and [css-loader](https://webpack.js.org/loaders/css-loader/) via `npm i style-loader css-loader` and chain them with `sass-loader` instead. `sass-loader` requires you to install either [Dart Sass](https://github.com/sass/dart-sass) or [Sass Embedded](https://github.com/sass/embedded-host-node) on your own (more documentation can be found below). @@ -51,7 +53,9 @@ This allows you to control the versions of all your dependencies and to choose w > > We highly recommend using [Sass Embedded](https://github.com/sass/embedded-host-node) or [Dart Sass](https://github.com/sass/dart-sass). -Chain the `sass-loader` with the [css-loader](https://github.com/webpack/css-loader) and the [style-loader](https://github.com/webpack/style-loader) to immediately apply all styles to the DOM, or with the [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) to extract it into a separate file. +Use the `sass-loader` with the built-in CSS support of webpack (the `css/auto` module type) to let webpack handle the generated CSS - it extracts styles into a separate file and injects them into the document. + +Alternatively, you can chain the `sass-loader` with the [css-loader](https://github.com/webpack/css-loader) and the [style-loader](https://github.com/webpack/style-loader) to immediately apply all styles to the DOM, or with the [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) to extract it into a separate file. Then add the loader to your webpack configuration. For example: @@ -79,22 +83,43 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + // Lets webpack handle the generated CSS using its built-in CSS support, + // `css/auto` also enables CSS modules for `*.module.scss` files + type: "css/auto", use: [ - // Creates `style` nodes from JS strings - "style-loader", - // Translates CSS into CommonJS - "css-loader", // Compiles Sass to CSS "sass-loader", ], }, ], }, + experiments: { + // Enables the built-in CSS support of webpack + css: true, + }, }; ``` Finally run `webpack` via your preferred method (e.g., via CLI or an npm script). +> [!NOTE] +> +> All examples below use the built-in CSS support of webpack. +> If you use [css-loader](https://github.com/webpack/css-loader) and [style-loader](https://github.com/webpack/style-loader) (or [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin)) instead, remove the `type` and `experiments` options and put them before the `sass-loader` in the `use` array: +> +> ```js +> module.exports = { +> module: { +> rules: [ +> { +> test: /\.s[ac]ss$/i, +> use: ["style-loader", "css-loader", "sass-loader"], +> }, +> ], +> }, +> }; +> ``` + ### The `style` option in `production` mode For `production` mode, the `style` option defaults to `compressed` unless otherwise specified in `sassOptions`. @@ -129,8 +154,8 @@ Writing `@import "style.scss"` is the same as `@import "./style.scss";` Since Sass implementations don't provide [url rewriting](https://github.com/sass/libsass/issues/532), all linked assets must be relative to the output. -- If you pass the generated CSS on to the `css-loader`, all URLs must be relative to the entry-file (e.g. `main.scss`). -- If you're just generating CSS without passing it to the `css-loader`, URLs must be relative to your web root. +- If webpack handles the generated CSS (i.e. the built-in CSS support or the `css-loader`), all URLs must be relative to the entry-file (e.g. `main.scss`). +- If you're just generating CSS without letting webpack handle it, URLs must be relative to your web root. You might be surprised by this first issue, as it is natural to expect relative references to be resolved against the `.sass`/`.scss` file in which they are specified (like in regular `.css` files). @@ -215,9 +240,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -229,6 +253,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -242,9 +269,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -256,6 +282,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -308,9 +337,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -324,6 +352,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -337,9 +368,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -364,6 +394,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -392,14 +425,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - { - loader: "css-loader", - options: { - sourceMap: true, - }, - }, { loader: "sass-loader", options: { @@ -410,6 +437,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -421,9 +451,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -437,6 +466,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -465,9 +497,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -478,6 +509,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -491,9 +525,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -514,6 +547,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -525,9 +561,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -548,6 +583,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -574,9 +612,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -587,6 +624,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -636,9 +676,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -649,6 +688,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -682,9 +724,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - "css-loader", { loader: "sass-loader", options: { @@ -698,6 +739,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` @@ -721,9 +765,37 @@ module.exports = { For production builds, it's recommended to extract the CSS from your bundle to enable parallel loading of CSS/JS resources. -There are four recommended ways to extract a stylesheet from a bundle: +There are five recommended ways to extract a stylesheet from a bundle: + +#### 1. [Built-in CSS support](https://webpack.js.org/configuration/experiments/#experimentscss) + +Webpack emits CSS into separate files on its own, so nothing but `experiments.css` is required. + +**webpack.config.js** + +```js +module.exports = { + module: { + rules: [ + { + test: /\.s[ac]ss$/i, + type: "css/auto", + use: ["sass-loader"], + }, + ], + }, + output: { + // Both options are optional + cssFilename: "[name].css", + cssChunkFilename: "[id].css", + }, + experiments: { + css: true, + }, +}; +``` -#### 1. [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) +#### 2. [mini-css-extract-plugin](https://github.com/webpack/mini-css-extract-plugin) **webpack.config.js** @@ -757,7 +829,7 @@ module.exports = { }; ``` -#### 2. [Asset Modules](https://webpack.js.org/guides/asset-modules/) +#### 3. [Asset Modules](https://webpack.js.org/guides/asset-modules/) **webpack.config.js** @@ -787,9 +859,9 @@ module.exports = { }; ``` -#### 3. [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output) +#### 4. [extract-loader](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output) -#### 4. [file-loader](https://github.com/webpack-contrib/file-loader) (deprecated--should only be used in webpack v4) +#### 5. [file-loader](https://github.com/webpack-contrib/file-loader) (deprecated--should only be used in webpack v4) **webpack.config.js** @@ -827,7 +899,7 @@ module.exports = { Enables/disables generation of source maps. -To enable CSS source maps, you'll need to pass the `sourceMap` option to both the `sass-loader` _and_ the `css-loader`. +To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sass-loader` (and to the `css-loader` too, when you use it). **webpack.config.js** @@ -838,14 +910,8 @@ module.exports = { rules: [ { test: /\.s[ac]ss$/i, + type: "css/auto", use: [ - "style-loader", - { - loader: "css-loader", - options: { - sourceMap: true, - }, - }, { loader: "sass-loader", options: { @@ -856,6 +922,9 @@ module.exports = { }, ], }, + experiments: { + css: true, + }, }; ``` diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index f42122c5..34e4873d 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -11877,3 +11877,99 @@ exports[`loader > should work with the \"webpack\" export field ('sass-embedded' exports[`loader > should work with the \"webpack\" export field ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 3`] = ` [] `; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n" +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 2`] = ` +[] +`; + +exports[`loader > should work with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 3`] = ` +[] +`; diff --git a/test/__snapshots__/sourceMap-options.test.js.snap b/test/__snapshots__/sourceMap-options.test.js.snap index 91a650e9..6698ac30 100644 --- a/test/__snapshots__/sourceMap-options.test.js.snap +++ b/test/__snapshots__/sourceMap-options.test.js.snap @@ -1142,6 +1142,262 @@ exports[`sourceMap option > should generate source maps with absolute URLs ('sas [] `; +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AAQd;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;;AAQJ;EALE,uBAMe;EALf,oBAKe;EAJf,mBAIe;EAHf,eAGe;;;AAEjB;EACE;EACA;EACA;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAGA;EACE,SAhDY;;;AAmDd;EACE,SCzDc", + "sources": [ + "webpack:///css ./sass/file.css", + "webpack:///./sass/language.sass", + "webpack:///./sass/another/variables.sass" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\"\\n@import \\"./file.css\\"\\n\\n$font-stack: Helvetica, sans-serif\\n$primary-color: #333\\n$pi: '\\\\e0C6'\\n\\nbody\\n font: 100% $font-stack\\n color: $primary-color\\n\\nnav\\n ul\\n margin: 0\\n padding: 0\\n list-style: none\\n\\n li\\n display: inline-block\\n\\n a\\n display: block\\n padding: 6px 12px\\n text-decoration: none\\n\\n=border-radius($radius)\\n -webkit-border-radius: $radius\\n -moz-border-radius: $radius\\n -ms-border-radius: $radius\\n border-radius: $radius\\n\\n.box\\n +border-radius(10px)\\n\\n.message\\n border: 1px solid #ccc\\n padding: 10px\\n color: #333\\n\\n.success\\n @extend .message\\n border-color: green\\n\\n.error\\n @extend .message\\n border-color: red\\n\\n.warning\\n @extend .message\\n border-color: yellow\\n\\n.foo\\n &:before\\n content: $pi\\n\\n.bar\\n &:before\\n content: $n-ary-summation\\n\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'sass' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AASd;EACE;EACA;EACA;;AAGF;EAAK;;AAEL;EACE;EACA;EACA;;;AAWJ;EANE,uBAM4B;EALzB,oBAKyB;EAJxB,mBAIwB;EAHpB,eAGoB;;;AAG5B;EACE,SAlCY;;;AAuCd;EACE,SC7Cc", + "sources": [ + "webpack:///css ./scss/file.css", + "webpack:///./scss/language.scss", + "webpack:///./scss/another/_variables.scss" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\";\\n@import \\"./file.css\\";\\n\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n$pi: '\\\\e0C6';\\n\\nbody {\\n font: 100% $font-stack;\\n color: $primary-color;\\n}\\n\\nnav {\\n ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n }\\n\\n li { display: inline-block; }\\n\\n a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n }\\n}\\n\\n@mixin border-radius($radius) {\\n -webkit-border-radius: $radius;\\n -moz-border-radius: $radius;\\n -ms-border-radius: $radius;\\n border-radius: $radius;\\n}\\n\\n.box { @include border-radius(10px); }\\n\\n.foo {\\n &:before {\\n content: $pi;\\n }\\n}\\n\\n.bar {\\n &:before {\\n content: $n-ary-summation;\\n }\\n}\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern' API, 'scss' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AAQd;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;;AAQJ;EALE,uBAMe;EALf,oBAKe;EAJf,mBAIe;EAHf,eAGe;;;AAEjB;EACE;EACA;EACA;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAGA;EACE,SAhDY;;;AAmDd;EACE,SCzDc", + "sources": [ + "webpack:///css ./sass/file.css", + "webpack:///./sass/language.sass", + "webpack:///./sass/another/variables.sass" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\"\\n@import \\"./file.css\\"\\n\\n$font-stack: Helvetica, sans-serif\\n$primary-color: #333\\n$pi: '\\\\e0C6'\\n\\nbody\\n font: 100% $font-stack\\n color: $primary-color\\n\\nnav\\n ul\\n margin: 0\\n padding: 0\\n list-style: none\\n\\n li\\n display: inline-block\\n\\n a\\n display: block\\n padding: 6px 12px\\n text-decoration: none\\n\\n=border-radius($radius)\\n -webkit-border-radius: $radius\\n -moz-border-radius: $radius\\n -ms-border-radius: $radius\\n border-radius: $radius\\n\\n.box\\n +border-radius(10px)\\n\\n.message\\n border: 1px solid #ccc\\n padding: 10px\\n color: #333\\n\\n.success\\n @extend .message\\n border-color: green\\n\\n.error\\n @extend .message\\n border-color: red\\n\\n.warning\\n @extend .message\\n border-color: yellow\\n\\n.foo\\n &:before\\n content: $pi\\n\\n.bar\\n &:before\\n content: $n-ary-summation\\n\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'sass' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AASd;EACE;EACA;EACA;;AAGF;EAAK;;AAEL;EACE;EACA;EACA;;;AAWJ;EANE,uBAM4B;EALzB,oBAKyB;EAJxB,mBAIwB;EAHpB,eAGoB;;;AAG5B;EACE,SAlCY;;;AAuCd;EACE,SC7Cc", + "sources": [ + "webpack:///css ./scss/file.css", + "webpack:///./scss/language.scss", + "webpack:///./scss/another/_variables.scss" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\";\\n@import \\"./file.css\\";\\n\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n$pi: '\\\\e0C6';\\n\\nbody {\\n font: 100% $font-stack;\\n color: $primary-color;\\n}\\n\\nnav {\\n ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n }\\n\\n li { display: inline-block; }\\n\\n a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n }\\n}\\n\\n@mixin border-radius($radius) {\\n -webkit-border-radius: $radius;\\n -moz-border-radius: $radius;\\n -ms-border-radius: $radius;\\n border-radius: $radius;\\n}\\n\\n.box { @include border-radius(10px); }\\n\\n.foo {\\n &:before {\\n content: $pi;\\n }\\n}\\n\\n.bar {\\n &:before {\\n content: $n-ary-summation;\\n }\\n}\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('dart-sass', 'modern-compiler' API, 'scss' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AAQd;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;;AAQJ;EALE,uBAMe;EALf,oBAKe;EAJf,mBAIe;EAHf,eAGe;;;AAEjB;EACE;EACA;EACA;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAGA;EACE,SAhDY;;;AAmDd;EACE,SCzDc", + "sources": [ + "webpack:///css ./sass/file.css", + "webpack:///./sass/language.sass", + "webpack:///./sass/another/variables.sass" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\"\\n@import \\"./file.css\\"\\n\\n$font-stack: Helvetica, sans-serif\\n$primary-color: #333\\n$pi: '\\\\e0C6'\\n\\nbody\\n font: 100% $font-stack\\n color: $primary-color\\n\\nnav\\n ul\\n margin: 0\\n padding: 0\\n list-style: none\\n\\n li\\n display: inline-block\\n\\n a\\n display: block\\n padding: 6px 12px\\n text-decoration: none\\n\\n=border-radius($radius)\\n -webkit-border-radius: $radius\\n -moz-border-radius: $radius\\n -ms-border-radius: $radius\\n border-radius: $radius\\n\\n.box\\n +border-radius(10px)\\n\\n.message\\n border: 1px solid #ccc\\n padding: 10px\\n color: #333\\n\\n.success\\n @extend .message\\n border-color: green\\n\\n.error\\n @extend .message\\n border-color: red\\n\\n.warning\\n @extend .message\\n border-color: yellow\\n\\n.foo\\n &:before\\n content: $pi\\n\\n.bar\\n &:before\\n content: $n-ary-summation\\n\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'sass' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AASd;EACE;EACA;EACA;;AAGF;EAAK;;AAEL;EACE;EACA;EACA;;;AAWJ;EANE,uBAM4B;EALzB,oBAKyB;EAJxB,mBAIwB;EAHpB,eAGoB;;;AAG5B;EACE,SAlCY;;;AAuCd;EACE,SC7Cc", + "sources": [ + "webpack:///css ./scss/file.css", + "webpack:///./scss/language.scss", + "webpack:///./scss/another/_variables.scss" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\";\\n@import \\"./file.css\\";\\n\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n$pi: '\\\\e0C6';\\n\\nbody {\\n font: 100% $font-stack;\\n color: $primary-color;\\n}\\n\\nnav {\\n ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n }\\n\\n li { display: inline-block; }\\n\\n a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n }\\n}\\n\\n@mixin border-radius($radius) {\\n -webkit-border-radius: $radius;\\n -moz-border-radius: $radius;\\n -ms-border-radius: $radius;\\n border-radius: $radius;\\n}\\n\\n.box { @include border-radius(10px); }\\n\\n.foo {\\n &:before {\\n content: $pi;\\n }\\n}\\n\\n.bar {\\n &:before {\\n content: $n-ary-summation;\\n }\\n}\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern' API, 'scss' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./sass/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./sass/language.sass ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AAQd;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;;AAQJ;EALE,uBAMe;EALf,oBAKe;EAJf,mBAIe;EAHf,eAGe;;;AAEjB;EACE;EACA;EACA;;;AAEF;EAEE;;;AAEF;EAEE;;;AAEF;EAEE;;;AAGA;EACE,SAhDY;;;AAmDd;EACE,SCzDc", + "sources": [ + "webpack:///css ./sass/file.css", + "webpack:///./sass/language.sass", + "webpack:///./sass/another/variables.sass" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\"\\n@import \\"./file.css\\"\\n\\n$font-stack: Helvetica, sans-serif\\n$primary-color: #333\\n$pi: '\\\\e0C6'\\n\\nbody\\n font: 100% $font-stack\\n color: $primary-color\\n\\nnav\\n ul\\n margin: 0\\n padding: 0\\n list-style: none\\n\\n li\\n display: inline-block\\n\\n a\\n display: block\\n padding: 6px 12px\\n text-decoration: none\\n\\n=border-radius($radius)\\n -webkit-border-radius: $radius\\n -moz-border-radius: $radius\\n -ms-border-radius: $radius\\n border-radius: $radius\\n\\n.box\\n +border-radius(10px)\\n\\n.message\\n border: 1px solid #ccc\\n padding: 10px\\n color: #333\\n\\n.success\\n @extend .message\\n border-color: green\\n\\n.error\\n @extend .message\\n border-color: red\\n\\n.warning\\n @extend .message\\n border-color: yellow\\n\\n.foo\\n &:before\\n content: $pi\\n\\n.bar\\n &:before\\n content: $n-ary-summation\\n\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'sass' syntax) 4`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 1`] = ` +"@charset \\"UTF-8\\";\\n/*!***************************!*\\\\\\n !*** css ./scss/file.css ***!\\n \\\\***************************/\\n.color-red {\\n color: red;\\n}\\n/*!********************************!*\\\\\\n !*** css ./scss/language.scss ***!\\n \\\\********************************/\\n\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n\\n/*# sourceMappingURL=main.bundle.css.map*/" +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 2`] = ` +{ + "version": 3, + "file": "main.bundle.css", + "mappings": ";;;;AAAA;AACA;AACA,C;;;;;ACKA;EACE;EACA,OALc;;;AASd;EACE;EACA;EACA;;AAGF;EAAK;;AAEL;EACE;EACA;EACA;;;AAWJ;EANE,uBAM4B;EALzB,oBAKyB;EAJxB,mBAIwB;EAHpB,eAGoB;;;AAG5B;EACE,SAlCY;;;AAuCd;EACE,SC7Cc", + "sources": [ + "webpack:///css ./scss/file.css", + "webpack:///./scss/language.scss", + "webpack:///./scss/another/_variables.scss" + ], + "sourcesContent": [ + ".color-red {\\n color: red;\\n}", + "@import \\"another/variables\\";\\n@import \\"./file.css\\";\\n\\n$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n$pi: '\\\\e0C6';\\n\\nbody {\\n font: 100% $font-stack;\\n color: $primary-color;\\n}\\n\\nnav {\\n ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n }\\n\\n li { display: inline-block; }\\n\\n a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n }\\n}\\n\\n@mixin border-radius($radius) {\\n -webkit-border-radius: $radius;\\n -moz-border-radius: $radius;\\n -ms-border-radius: $radius;\\n border-radius: $radius;\\n}\\n\\n.box { @include border-radius(10px); }\\n\\n.foo {\\n &:before {\\n content: $pi;\\n }\\n}\\n\\n.bar {\\n &:before {\\n content: $n-ary-summation;\\n }\\n}\\n", + "$n-ary-summation: '\\\\2211'\\n" + ], + "names": [], + "sourceRoot": "" +} +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 3`] = ` +[] +`; + +exports[`sourceMap option > should generate source maps with the built-in CSS support of webpack ('sass-embedded', 'modern-compiler' API, 'scss' syntax) 4`] = ` +[] +`; + exports[`sourceMap option > should generate sourcemap with \"asset/resource\" ('dart-sass', 'modern' API, 'sass' syntax) 1`] = ` "@charset \\"UTF-8\\";\\n@import \\"./file.css\\";\\nbody {\\n font: 100% Helvetica, sans-serif;\\n color: #333;\\n}\\n\\nnav ul {\\n margin: 0;\\n padding: 0;\\n list-style: none;\\n}\\nnav li {\\n display: inline-block;\\n}\\nnav a {\\n display: block;\\n padding: 6px 12px;\\n text-decoration: none;\\n}\\n\\n.box {\\n -webkit-border-radius: 10px;\\n -moz-border-radius: 10px;\\n -ms-border-radius: 10px;\\n border-radius: 10px;\\n}\\n\\n.message, .warning, .error, .success {\\n border: 1px solid #ccc;\\n padding: 10px;\\n color: #333;\\n}\\n\\n.success {\\n border-color: green;\\n}\\n\\n.error {\\n border-color: red;\\n}\\n\\n.warning {\\n border-color: yellow;\\n}\\n\\n.foo:before {\\n content: \\"\\\\e0c6\\";\\n}\\n\\n.bar:before {\\n content: \\"∑\\";\\n}\\n/*# sourceMappingURL=language.css.map*/" `; diff --git a/test/helpers/getCodeFromCssBundle.js b/test/helpers/getCodeFromCssBundle.js new file mode 100644 index 00000000..f7257485 --- /dev/null +++ b/test/helpers/getCodeFromCssBundle.js @@ -0,0 +1,23 @@ +import readAsset from "./readAsset.js"; + +/** + * Reads the CSS emitted by the built-in CSS support of webpack. + * @param {Stats} stats stats + * @param {Compiler} compiler compiler + * @param {string=} asset asset name + * @returns {string} CSS from bundle + */ +function getCodeFromCssBundle(stats, compiler, asset = "main.bundle.css") { + if ( + !stats || + !stats.compilation || + !stats.compilation.assets || + !stats.compilation.assets[asset] + ) { + throw new Error("Can't find compiled CSS"); + } + + return readAsset(asset, compiler, stats); +} + +export default getCodeFromCssBundle; diff --git a/test/helpers/getCompiler.js b/test/helpers/getCompiler.js index c5d0310a..441edf51 100644 --- a/test/helpers/getCompiler.js +++ b/test/helpers/getCompiler.js @@ -16,10 +16,18 @@ const module = (config) => ({ { test: (config.loader && config.loader.test) || /\.s[ac]ss$/i, resolve: config.loader.resolve, + // Use the built-in CSS support of webpack instead of the test loader + ...(config.css ? { type: "css/auto" } : {}), use: [ - { - loader: path.join(__dirname, "./testLoader.cjs"), - }, + // The built-in CSS support of webpack handles the generated CSS itself, + // so the test loader is not needed in this case + ...(config.css + ? [] + : [ + { + loader: path.join(__dirname, "./testLoader.cjs"), + }, + ]), { loader: path.join(__dirname, "../../src/index.js"), options: (config.loader && config.loader.options) || {}, @@ -42,7 +50,9 @@ const plugins = (config) => [config.plugins || []].flat(); const output = (config) => ({ path: path.resolve(__dirname, `../outputs/${config.output || ""}`), filename: "[name].bundle.js", - library: "sassLoaderExport", + ...(config.css + ? { cssFilename: "[name].bundle.css" } + : { library: "sassLoaderExport" }), }); /** @@ -69,6 +79,7 @@ export default function getCompiler(fixture, config = {}, options = {}) { }, resolve: config.resolve || undefined, + experiments: config.experiments || (config.css ? { css: true } : undefined), }; // Compiler Options diff --git a/test/helpers/index.js b/test/helpers/index.js index 11669578..9ed66266 100644 --- a/test/helpers/index.js +++ b/test/helpers/index.js @@ -3,6 +3,7 @@ export { default as customFunctions } from "./customFunctions.js"; export { default as compile } from "./compiler.js"; export { default as getCodeFromSass } from "./getCodeFromSass.js"; export { default as getCodeFromBundle } from "./getCodeFromBundle.js"; +export { default as getCodeFromCssBundle } from "./getCodeFromCssBundle.js"; export { default as getErrors } from "./getErrors.js"; export { default as getCompiler } from "./getCompiler.js"; export { default as getImplementationsAndAPI } from "./getImplementationsAndAPI.js"; diff --git a/test/loader.test.js b/test/loader.test.js index f7c7c19e..86e603eb 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -9,6 +9,7 @@ import { close, compile, getCodeFromBundle, + getCodeFromCssBundle, getCodeFromSass, getCompiler, getErrors, @@ -48,6 +49,27 @@ describe("loader", () => { await close(compiler); }); + it(`should work with the built-in CSS support of webpack ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async (t) => { + const testId = getTestId("language", syntax); + const options = { + implementation, + api, + }; + const compiler = getCompiler(testId, { + css: true, + loader: { options }, + }); + + const stats = await compile(compiler); + const codeFromCssBundle = getCodeFromCssBundle(stats, compiler); + + t.assert.snapshot(codeFromCssBundle); + t.assert.snapshot(getWarnings(stats)); + t.assert.snapshot(getErrors(stats)); + + await close(compiler); + }); + it(`should work ('${implementationName}', '${api}' API, '${syntax}' syntax) and don't modify sass options`, async (t) => { const testId = getTestId("language", syntax); const sassOptions = { diff --git a/test/sourceMap-options.test.js b/test/sourceMap-options.test.js index 89020e0f..41ca6f6f 100644 --- a/test/sourceMap-options.test.js +++ b/test/sourceMap-options.test.js @@ -8,11 +8,13 @@ import { close, compile, getCodeFromBundle, + getCodeFromCssBundle, getCompiler, getErrors, getImplementationsAndAPI, getTestId, getWarnings, + readAsset, } from "./helpers/index.js"; const __filename = url.fileURLToPath(import.meta.url); @@ -269,6 +271,32 @@ describe("sourceMap option", () => { await close(compiler); }); + it(`should generate source maps with the built-in CSS support of webpack ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async (t) => { + const testId = getTestId("language", syntax); + const options = { implementation, api, sourceMap: true }; + const compiler = getCompiler(testId, { + css: true, + devtool: "source-map", + loader: { options }, + }); + const stats = await compile(compiler); + const css = getCodeFromCssBundle(stats, compiler); + const sourceMap = JSON.parse( + readAsset("main.bundle.css.map", compiler, stats), + ); + + sourceMap.sources = sourceMap.sources.map((source) => + source.replaceAll("\\", "/"), + ); + + t.assert.snapshot(css); + t.assert.snapshot(getSourceMap(sourceMap)); + t.assert.snapshot(getWarnings(stats)); + t.assert.snapshot(getErrors(stats)); + + await close(compiler); + }); + it(`should generate source maps with absolute URLs ('${implementationName}', '${api}' API, '${syntax}' syntax)`, async (t) => { const testId = getTestId("language-source-maps", syntax); const options = { implementation, api };