diff --git a/CHANGELOG.md b/CHANGELOG.md index 474b727d..260da46b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -138,7 +138,7 @@ All notable changes to this project will be documented in this file. See [standa ### Notes -* using `~` is deprecated when the `esModules` option is enabled (enabled by default) and can be removed from your code (**we recommend it**) (`url(~package/image.png)` -> `url(package/image.png)`, `@import url(~package/style.css)` -> `@import url(package/style.css)`, `composes: import from '~package/one.css';` -> `composes: import from 'package/one.css';`), but we still support it for historical reasons. Why can you remove it? The loader will first try to resolve `@import`/`url()`/etc as relative, if it cannot be resolved, the loader will try to resolve `@import`/`url()`/etc inside [`node_modules` or modules directories](https://webpack.js.org/configuration/resolve/#resolvemodules). +* using `~` is deprecated when the `esModule` option is enabled (enabled by default) and can be removed from your code (**we recommend it**) (`url(~package/image.png)` -> `url(package/image.png)`, `@import url(~package/style.css)` -> `@import url(package/style.css)`, `composes: import from '~package/one.css';` -> `composes: import from 'package/one.css';`), but we still support it for historical reasons. Why can you remove it? The loader will first try to resolve `@import`/`url()`/etc as relative, if it cannot be resolved, the loader will try to resolve `@import`/`url()`/etc inside [`node_modules` or modules directories](https://webpack.js.org/configuration/resolve/#resolvemodules). * `file-loader` and `url-loader` are deprecated, please migrate on [`asset modules`](https://webpack.js.org/guides/asset-modules/), since v6 `css-loader` is generating `new URL(...)` syntax, it enables by default built-in [`assets modules`](https://webpack.js.org/guides/asset-modules/), i.e. `type: 'asset'` for all `url()` ### ⚠ BREAKING CHANGES @@ -147,9 +147,9 @@ All notable changes to this project will be documented in this file. See [standa * minimum supported `webpack` version is `5`, we recommend to update to the latest version for better performance * for `url` and `import` options `Function` type was removed in favor `Object` type with the `filter` property, i.e. before `{ url: () => true }`, now `{ url: { filter: () => true } }` and before `{ import: () => true }`, now `{ import: { filter: () => true } }` * the `modules.compileType` option was removed in favor the `modules.mode` option with `icss` value, also the `modules` option can have `icss` string value -* `new URL()` syntax used for `url()`, only when the `esModules` option is enabled (enabled by default), it means you can bundle CSS for libraries +* `new URL()` syntax used for `url()`, only when the `esModule` option is enabled (enabled by default), it means you can bundle CSS for libraries * [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) are handling in `url()`, it means you can register loaders for them, [example](https://webpack.js.org/configuration/module/#rulescheme) -* aliases with `false` value for `url()` now generate empty data URI (i.e. `data:0,`), only when the `esModules` option is enabled (enabled by default) +* aliases with `false` value for `url()` now generate empty data URI (i.e. `data:0,`), only when the `esModule` option is enabled (enabled by default) * `[ext]` placeholder don't need `.` (dot) before for the `localIdentName` option, i.e. please change `.[ext]` on `[ext]` (no dot before) * `[folder]` placeholder was removed without replacement for the `localIdentName` option, please use a custom function if you need complex logic * `[emoji]` placeholder was removed without replacement for the `localIdentName` option, please use a custom function if you need complex logic diff --git a/README.md b/README.md index 6b0dd8a5..32cfff3c 100644 --- a/README.md +++ b/README.md @@ -1538,7 +1538,7 @@ import "./styles.css"; > **Warning** > -> The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport). +> The `esModule` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport). The default export is `string`. @@ -1577,7 +1577,7 @@ console.log(sheet); > **Warning** > -> The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport). +> The `esModule` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport). > **Warning** > diff --git a/src/utils.js b/src/utils.js index 57452f00..80d6673c 100644 --- a/src/utils.js +++ b/src/utils.js @@ -659,7 +659,7 @@ function getModulesOptions(rawOptions, exportType, loaderContext) { if (needNamedExport) { if (rawOptions.esModule === false) { throw new Error( - "The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled" + "The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModule' option to be enabled" ); } @@ -673,7 +673,7 @@ function getModulesOptions(rawOptions, exportType, loaderContext) { if (modulesOptions.namedExport === true) { if (rawOptions.esModule === false) { throw new Error( - "The 'modules.namedExport' option requires the 'esModules' option to be enabled" + "The 'modules.namedExport' option requires the 'esModule' option to be enabled" ); } diff --git a/test/__snapshots__/exportType.test.js.snap b/test/__snapshots__/exportType.test.js.snap index cd5326ba..111e629f 100644 --- a/test/__snapshots__/exportType.test.js.snap +++ b/test/__snapshots__/exportType.test.js.snap @@ -3,7 +3,7 @@ exports[`'exportType' option should throw an error with 'css-style-sheet' value for CSS modules when \`esModule\` disabled, but 'modules.namedExport' enabled: errors 1`] = ` Array [ "ModuleBuildError: Module build failed (from \`replaced original path\`): -Error: The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled", +Error: The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModule' option to be enabled", ] `; @@ -12,7 +12,7 @@ exports[`'exportType' option should throw an error with 'css-style-sheet' value exports[`'exportType' option should throw an error with 'css-style-sheet' value for CSS modules when \`esModule\` disabled: errors 1`] = ` Array [ "ModuleBuildError: Module build failed (from \`replaced original path\`): -Error: The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModules' option to be enabled", +Error: The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModule' option to be enabled", ] `; diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 771de01d..cf46c6eb 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -2425,7 +2425,7 @@ exports[`"modules" option should throw an error when the "namedExport" is enable exports[`"modules" option should throw an error when the "namedExport" option is "true", but the "esModule" is "false": errors 1`] = ` Array [ "ModuleBuildError: Module build failed (from \`replaced original path\`): -Error: The 'modules.namedExport' option requires the 'esModules' option to be enabled", +Error: The 'modules.namedExport' option requires the 'esModule' option to be enabled", ] `; diff --git a/test/__snapshots__/url-option.test.js.snap b/test/__snapshots__/url-option.test.js.snap index 6e7319fa..3e6eec0c 100644 --- a/test/__snapshots__/url-option.test.js.snap +++ b/test/__snapshots__/url-option.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": errors 1`] = `Array []`; +exports[`"url" option should resolve "file" protocol path when the "esModule" is "false": errors 1`] = `Array []`; -exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": module 1`] = ` +exports[`"url" option should resolve "file" protocol path when the "esModule" is "false": module 1`] = ` "// Imports var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = require(\\"../../../src/runtime/noSourceMaps.js\\"); var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\"); @@ -29,7 +29,7 @@ module.exports = ___CSS_LOADER_EXPORT___; " `; -exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": result 1`] = ` +exports[`"url" option should resolve "file" protocol path when the "esModule" is "false": result 1`] = ` Array [ Array [ "./url/url-file-protocol.css", @@ -51,7 +51,7 @@ Array [ ] `; -exports[`"url" option should resolve "file" protocol path when the "esModules" is "false": warnings 1`] = `Array []`; +exports[`"url" option should resolve "file" protocol path when the "esModule" is "false": warnings 1`] = `Array []`; exports[`"url" option should resolve "file" protocol path: errors 1`] = `Array []`; @@ -106,9 +106,9 @@ Array [ exports[`"url" option should resolve "file" protocol path: warnings 1`] = `Array []`; -exports[`"url" option should resolve absolute path when the 'esModules' is 'false': errors 1`] = `Array []`; +exports[`"url" option should resolve absolute path when the 'esModule' is 'false': errors 1`] = `Array []`; -exports[`"url" option should resolve absolute path when the 'esModules' is 'false': module 1`] = ` +exports[`"url" option should resolve absolute path when the 'esModule' is 'false': module 1`] = ` "// Imports var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = require(\\"../../../src/runtime/noSourceMaps.js\\"); var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\"); @@ -135,7 +135,7 @@ module.exports = ___CSS_LOADER_EXPORT___; " `; -exports[`"url" option should resolve absolute path when the 'esModules' is 'false': result 1`] = ` +exports[`"url" option should resolve absolute path when the 'esModule' is 'false': result 1`] = ` Array [ Array [ "./url/url-absolute.css", @@ -157,7 +157,7 @@ Array [ ] `; -exports[`"url" option should resolve absolute path when the 'esModules' is 'false': warnings 1`] = `Array []`; +exports[`"url" option should resolve absolute path when the 'esModule' is 'false': warnings 1`] = `Array []`; exports[`"url" option should resolve absolute path: errors 1`] = `Array []`; diff --git a/test/url-option.test.js b/test/url-option.test.js index f116e07d..924ff6e4 100644 --- a/test/url-option.test.js +++ b/test/url-option.test.js @@ -149,7 +149,7 @@ describe('"url" option', () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); - it("should resolve absolute path when the 'esModules' is 'false'", async () => { + it("should resolve absolute path when the 'esModule' is 'false'", async () => { // Create the file with absolute path const fileDirectory = path.resolve(__dirname, "fixtures", "url"); const file = path.resolve(fileDirectory, "url-absolute.css"); @@ -227,7 +227,7 @@ describe('"url" option', () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); - it('should resolve "file" protocol path when the "esModules" is "false"', async () => { + it('should resolve "file" protocol path when the "esModule" is "false"', async () => { // Create the file with absolute path const fileDirectory = path.resolve(__dirname, "fixtures", "url"); const file = path.resolve(fileDirectory, "url-file-protocol.css");