css-loader 6.10.0 → 7.0.0

package/README.md

@@ -192,7 +192,7 @@ type importFn =
         media: string,
         resourcePath: string,
         supports?: string,
-        layer?: string
+        layer?: string,
       ) => boolean;
     };
 ```
@@ -315,16 +315,16 @@ type modules =
       getLocalIdent: (
         context: LoaderContext,
         localIdentName: string,
-        localName: string
+        localName: string,
       ) => string;
       namedExport: boolean;
       exportGlobals: boolean;
       exportLocalsConvention:
-        | "asIs"
-        | "camelCase"
-        | "camelCaseOnly"
+        | "as-is"
+        | "camel-case"
+        | "camel-case-only"
         | "dashes"
-        | "dashesOnly"
+        | "dashes-only"
         | ((name: string) => string);
       exportOnlyLocals: boolean;
     };
@@ -487,6 +487,18 @@ To import a local classname from another module.
 
 To import from multiple modules use multiple `composes:` rules.
 
+```css
+:local(.className) {
+  composes:
+    edit highlight from "./edit.css",
+    button from "module/button.css",
+    classFromThisModule;
+  background: red;
+}
+```
+
+or
+
 ```css
 :local(.className) {
   composes: edit highlight from "./edit.css";
@@ -590,7 +602,7 @@ module.exports = {
             localIdentContext: path.resolve(__dirname, "src"),
             localIdentHashSalt: "my-custom-hash",
             namedExport: true,
-            exportLocalsConvention: "camelCase",
+            exportLocalsConvention: "as-is",
             exportOnlyLocals: false,
           },
         },
@@ -611,7 +623,7 @@ type auto =
   | ((
       resourcePath: string,
       resourceQuery: string,
-      resourceFragment: string
+      resourceFragment: string,
     ) => boolean);
 ```
 
@@ -717,7 +729,7 @@ type mode =
   | ((
       resourcePath: string,
       resourceQuery: string,
-      resourceFragment: string
+      resourceFragment: string,
     ) => "local" | "global" | "pure" | "icss");
 ```
 
@@ -1085,7 +1097,7 @@ Type:
 type getLocalIdent = (
   context: LoaderContext,
   localIdentName: string,
-  localName: string
+  localName: string,
 ) => string;
 ```
 
@@ -1126,21 +1138,13 @@ Type:
 type namedExport = boolean;
 ```
 
-Default: `false`
+Default: Depends on the value of the `esModule` option. If the value of the `esModule` options is `true`, this value will also be `true`, otherwise it will be `false`.
 
 Enables/disables ES modules named export for locals.
 
 > **Warning**
 >
-> Names of locals are converted to camelcase, i.e. the `exportLocalsConvention` option has
-> `camelCaseOnly` value by default. You can set this back to any other valid option but selectors
-> which are not valid JavaScript identifiers may run into problems which do not implement the entire
-> modules specification.
-
-> **Warning**
->
-> It is not allowed to use JavaScript reserved words in css class names unless
-> `exportLocalsConvention` is `"asIs"`.
+> It is not allowed to use the `default` reserved word in css classes.
 
 **styles.css**
 
@@ -1158,8 +1162,10 @@ Enables/disables ES modules named export for locals.
 ```js
 import * as styles from "./styles.css";
 
+// If using `exportLocalsConvention: "camel-case-only"`:
 console.log(styles.fooBaz, styles.bar);
-// or if using `exportLocalsConvention: "asIs"`:
+
+// If using `exportLocalsConvention: "as-is"`:
 console.log(styles["foo-baz"], styles.bar);
 ```
 
@@ -1227,29 +1233,35 @@ Type:
 
 ```ts
 type exportLocalsConvention =
-  | "asIs"
-  | "camelCase"
-  | "camelCaseOnly"
+  | "as-is"
+  | "camel-case"
+  | "camel-case-only"
   | "dashes"
-  | "dashesOnly"
+  | "dashes-only"
   | ((name: string) => string);
 ```
 
-Default: based on the `modules.namedExport` option value, if `true` - `camelCaseOnly`, otherwise `asIs`
+Default: Depends on the value of the `modules.namedExport` option, if `true` - `as-is`, otherwise `camel-case-only`.
+
+> **Warning**
+>
+> Names of locals are converted to camelcase when the named export is `false`, i.e. the `exportLocalsConvention` option has
+> `camelCaseOnly` value by default. You can set this back to any other valid option but selectors
+> which are not valid JavaScript identifiers may run into problems which do not implement the entire modules specification.
 
 Style of exported class names.
 
 ###### `string`
 
-By default, the exported JSON keys mirror the class names (i.e `asIs` value).
+By default, the exported JSON keys mirror the class names (i.e `as-is` value).
 
-|         Name          |   Type   | Description                                                                                      |
-| :-------------------: | :------: | :----------------------------------------------------------------------------------------------- |
-|     **`'asIs'`**      | `string` | Class names will be exported as is.                                                              |
-|   **`'camelCase'`**   | `string` | Class names will be camelized, the original class name will not to be removed from the locals    |
-| **`'camelCaseOnly'`** | `string` | Class names will be camelized, the original class name will be removed from the locals           |
-|    **`'dashes'`**     | `string` | Only dashes in class names will be camelized                                                     |
-|  **`'dashesOnly'`**   | `string` | Dashes in class names will be camelized, the original class name will be removed from the locals |
+|          Name           |   Type   | Description                                                                                      |
+| :---------------------: | :------: | :----------------------------------------------------------------------------------------------- |
+|      **`'as-is'`**      | `string` | Class names will be exported as is.                                                              |
+|   **`'camel-case'`**    | `string` | Class names will be camelized, the original class name will not to be removed from the locals    |
+| **`'camel-case-only'`** | `string` | Class names will be camelized, the original class name will be removed from the locals           |
+|     **`'dashes'`**      | `string` | Only dashes in class names will be camelized                                                     |
+|   **`'dashes-only'`**   | `string` | Dashes in class names will be camelized, the original class name will be removed from the locals |
 
 **file.css**
 
@@ -1275,7 +1287,7 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            exportLocalsConvention: "camelCase",
+            exportLocalsConvention: "camel-case-only",
           },
         },
       },
@@ -1324,7 +1336,7 @@ module.exports = {
                 name.replace(/-/g, "_"),
                 // dashesCamelCase
                 name.replace(/-+(\w)/g, (match, firstLetter) =>
-                  firstLetter.toUpperCase()
+                  firstLetter.toUpperCase(),
                 ),
               ];
             },
@@ -1761,7 +1773,8 @@ With the help of the `/* webpackIgnore: true */`comment, it is possible to disab
 .class {
   /* Disabled url handling for the second url in the 'background' declaration */
   color: red;
-  background: url("./url/img.png"),
+  background:
+    url("./url/img.png"),
     /* webpackIgnore: true */ url("./url/img.png");
 }
 
@@ -1895,7 +1908,7 @@ module.exports = {
     alias: {
       "/assets/unresolved/img.png": path.resolve(
         __dirname,
-        "assets/real-path-to-img/img.png"
+        "assets/real-path-to-img/img.png",
       ),
     },
   },

package/dist/index.js

@@ -45,9 +45,9 @@ async function loader(content, map, meta) {
   if (this._compilation && this._compilation.options && this._compilation.options.experiments && this._compilation.options.experiments.buildHttp) {
     isSupportAbsoluteURL = true;
   }
-  const isSupportDataURL = options.esModule && Boolean("fsStartTime" in this._compiler);
   if ((0, _utils.shouldUseImportPlugin)(options)) {
     plugins.push((0, _plugins.importParser)({
+      // TODO need to fix on webpack side, webpack tries to resolve `./runtime/api.js paths like `http://site.com/runtime/api.js`, maybe we should try first request like absolute, the second like a relative to context
       isSupportAbsoluteURL: false,
       isSupportDataURL: false,
       isCSSStyleSheet: options.exportType === "css-style-sheet",
@@ -63,7 +63,7 @@ async function loader(content, map, meta) {
     const needToResolveURL = !options.esModule;
     plugins.push((0, _plugins.urlParser)({
       isSupportAbsoluteURL,
-      isSupportDataURL,
+      isSupportDataURL: options.esModule,
       imports: urlPluginImports,
       replacements,
       context: this.context,

package/dist/options.json

@@ -154,10 +154,14 @@
                 {
                   "enum": [
                     "asIs",
+                    "as-is",
                     "camelCase",
+                    "camel-case",
                     "camelCaseOnly",
+                    "camel-case-only",
                     "dashes",
-                    "dashesOnly"
+                    "dashesOnly",
+                    "dashes-only"
                   ]
                 },
                 {

package/dist/utils.js

@@ -42,43 +42,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 */
 
 const WEBPACK_IGNORE_COMMENT_REGEXP = exports.WEBPACK_IGNORE_COMMENT_REGEXP = /webpackIgnore:(\s+)?(true|false)/;
-const matchRelativePath = /^\.\.?[/\\]/;
-function isAbsolutePath(str) {
-  return _path.default.posix.isAbsolute(str) || _path.default.win32.isAbsolute(str);
-}
-function isRelativePath(str) {
-  return matchRelativePath.test(str);
-}
-
-// TODO simplify for the next major release
 function stringifyRequest(loaderContext, request) {
-  if (typeof loaderContext.utils !== "undefined" && typeof loaderContext.utils.contextify === "function") {
-    return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
-  }
-  const splitted = request.split("!");
-  const {
-    context
-  } = loaderContext;
-  return JSON.stringify(splitted.map(part => {
-    // First, separate singlePath from query, because the query might contain paths again
-    const splittedPart = part.match(/^(.*?)(\?.*)/);
-    const query = splittedPart ? splittedPart[2] : "";
-    let singlePath = splittedPart ? splittedPart[1] : part;
-    if (isAbsolutePath(singlePath) && context) {
-      singlePath = _path.default.relative(context, singlePath);
-      if (isAbsolutePath(singlePath)) {
-        // If singlePath still matches an absolute path, singlePath was on a different drive than context.
-        // In this case, we leave the path platform-specific without replacing any separators.
-        // @see https://github.com/webpack/loader-utils/pull/14
-        return singlePath + query;
-      }
-      if (isRelativePath(singlePath) === false) {
-        // Ensure that the relative path starts at least with ./ otherwise it would be a request into the modules directory (like node_modules).
-        singlePath = `./${singlePath}`;
-      }
-    }
-    return singlePath.replace(/\\/g, "/") + query;
-  }).join("!"));
+  return JSON.stringify(loaderContext.utils.contextify(loaderContext.context || loaderContext.rootContext, request));
 }
 
 // We can't use path.win32.isAbsolute because it also matches paths starting with a forward slash
@@ -272,7 +237,7 @@ const filenameReservedRegex = /[<>:"/\\|?*]/g;
 // eslint-disable-next-line no-control-regex
 const reControlChars = /[\u0000-\u001f\u0080-\u009f]/g;
 function escapeLocalIdent(localident) {
-  // TODO simplify in the next major release
+  // TODO simplify?
   return escape(localident
   // For `[hash]` placeholder
   .replace(/^((-?[0-9])|--)/, "_$1").replace(filenameReservedRegex, "-").replace(reControlChars, "-").replace(/\./g, "-"));
@@ -317,10 +282,8 @@ function defaultGetLocalIdent(loaderContext, localIdentName, localName, options)
   }
   let localIdentHash = "";
   for (let tier = 0; localIdentHash.length < hashDigestLength; tier++) {
-    // TODO remove this in the next major release
-    const hash = loaderContext.utils && typeof loaderContext.utils.createHash === "function" ? loaderContext.utils.createHash(hashFunction) :
     // eslint-disable-next-line no-underscore-dangle
-    loaderContext._compiler.webpack.util.createHash(hashFunction);
+    const hash = loaderContext._compiler.webpack.util.createHash(hashFunction);
     if (hashSalt) {
       hash.update(hashSalt);
     }
@@ -440,7 +403,7 @@ function getValidLocalName(localName, exportLocalsConvention) {
 }
 const IS_MODULES = /\.module(s)?\.\w+$/i;
 const IS_ICSS = /\.icss\.\w+$/i;
-function getModulesOptions(rawOptions, exportType, loaderContext) {
+function getModulesOptions(rawOptions, esModule, exportType, loaderContext) {
   if (typeof rawOptions.modules === "boolean" && rawOptions.modules === false) {
     return false;
   }
@@ -470,6 +433,8 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     outputOptions
   } = loaderContext._compilation;
   const needNamedExport = exportType === "css-style-sheet" || exportType === "string";
+  const namedExport = typeof rawModulesOptions.namedExport !== "undefined" ? rawModulesOptions.namedExport : needNamedExport || esModule;
+  const exportLocalsConvention = typeof rawModulesOptions.exportLocalsConvention !== "undefined" ? rawModulesOptions.exportLocalsConvention : namedExport ? "as-is" : "camel-case-only";
   const modulesOptions = {
     auto,
     mode: "local",
@@ -484,21 +449,25 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     localIdentRegExp: undefined,
     // eslint-disable-next-line no-undefined
     getLocalIdent: undefined,
-    namedExport: needNamedExport || false,
-    exportLocalsConvention: (rawModulesOptions.namedExport === true || needNamedExport) && typeof rawModulesOptions.exportLocalsConvention === "undefined" ? "camelCaseOnly" : "asIs",
+    // TODO improve me and enable by default
     exportOnlyLocals: false,
     ...rawModulesOptions,
-    useExportsAs: rawModulesOptions.exportLocalsConvention === "asIs"
+    exportLocalsConvention,
+    namedExport
   };
-  let exportLocalsConventionType;
   if (typeof modulesOptions.exportLocalsConvention === "string") {
-    exportLocalsConventionType = modulesOptions.exportLocalsConvention;
+    // eslint-disable-next-line no-shadow
+    const {
+      exportLocalsConvention
+    } = modulesOptions;
     modulesOptions.exportLocalsConvention = name => {
-      switch (exportLocalsConventionType) {
+      switch (exportLocalsConvention) {
+        case "camel-case":
         case "camelCase":
           {
             return [name, camelCase(name)];
           }
+        case "camel-case-only":
         case "camelCaseOnly":
           {
             return camelCase(name);
@@ -507,10 +476,12 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
           {
             return [name, dashesCamelCase(name)];
           }
+        case "dashes-only":
         case "dashesOnly":
           {
             return dashesCamelCase(name);
           }
+        case "as-is":
         case "asIs":
         default:
           return name;
@@ -548,33 +519,29 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath, loaderContext.resourceQuery, loaderContext.resourceFragment);
   }
   if (needNamedExport) {
-    if (rawOptions.esModule === false) {
+    if (esModule === false) {
       throw new Error("The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'esModule' option to be enabled");
     }
     if (modulesOptions.namedExport === false) {
       throw new Error("The 'exportType' option with the 'css-style-sheet' or 'string' value requires the 'modules.namedExport' option to be enabled");
     }
   }
-  if (modulesOptions.namedExport === true) {
-    if (rawOptions.esModule === false) {
-      throw new Error("The 'modules.namedExport' option requires the 'esModule' option to be enabled");
-    }
-    if (typeof exportLocalsConventionType === "string" && exportLocalsConventionType !== "asIs" && exportLocalsConventionType !== "camelCaseOnly" && exportLocalsConventionType !== "dashesOnly") {
-      throw new Error('The "modules.namedExport" option requires the "modules.exportLocalsConvention" option to be "camelCaseOnly" or "dashesOnly"');
-    }
+  if (modulesOptions.namedExport === true && esModule === false) {
+    throw new Error("The 'modules.namedExport' option requires the 'esModule' option to be enabled");
   }
   return modulesOptions;
 }
 function normalizeOptions(rawOptions, loaderContext) {
   const exportType = typeof rawOptions.exportType === "undefined" ? "array" : rawOptions.exportType;
-  const modulesOptions = getModulesOptions(rawOptions, exportType, loaderContext);
+  const esModule = typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule;
+  const modulesOptions = getModulesOptions(rawOptions, esModule, exportType, loaderContext);
   return {
     url: typeof rawOptions.url === "undefined" ? true : rawOptions.url,
     import: typeof rawOptions.import === "undefined" ? true : rawOptions.import,
     modules: modulesOptions,
     sourceMap: typeof rawOptions.sourceMap === "boolean" ? rawOptions.sourceMap : loaderContext.sourceMap,
     importLoaders: typeof rawOptions.importLoaders === "string" ? parseInt(rawOptions.importLoaders, 10) : rawOptions.importLoaders,
-    esModule: typeof rawOptions.esModule === "undefined" ? true : rawOptions.esModule,
+    esModule,
     exportType
   };
 }
@@ -869,6 +836,8 @@ function convertToTemplateLiteral(str) {
 function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
+const validIdentifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/u;
+const keywords = new Set(["abstract", "boolean", "break", "byte", "case", "catch", "char", "class", "const", "continue", "debugger", "default", "delete", "do", "double", "else", "enum", "export", "extends", "false", "final", "finally", "float", "for", "function", "goto", "if", "implements", "import", "in", "instanceof", "int", "interface", "long", "native", "new", "null", "package", "private", "protected", "public", "return", "short", "static", "super", "switch", "synchronized", "this", "throw", "throws", "transient", "true", "try", "typeof", "var", "void", "volatile", "while", "with"]);
 function getExportCode(exports, replacements, icssPluginUsed, options, isTemplateLiteralSupported) {
   let code = "// Exports\n";
   if (icssPluginUsed) {
@@ -879,7 +848,7 @@ function getExportCode(exports, replacements, icssPluginUsed, options, isTemplat
       for (const name of normalizedNames) {
         const serializedValue = isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value);
         if (options.modules.namedExport) {
-          if (options.modules.useExportsAs) {
+          if (!validIdentifier.test(name) || keywords.has(name)) {
             identifierId += 1;
             const id = `_${identifierId.toString(16)}`;
             localsCode += `var ${id} = ${serializedValue};\n`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.10.0",
+  "version": "7.0.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -13,7 +13,7 @@
   },
   "main": "dist/cjs.js",
   "engines": {
-    "node": ">= 12.13.0"
+    "node": ">= 18.12.0"
   },
   "scripts": {
     "start": "npm run build -- -w",
@@ -24,9 +24,9 @@
     "postbuild": "npm run validate:runtime",
     "commitlint": "commitlint --from=master",
     "security": "npm audit --production",
-    "lint:prettier": "prettier --list-different .",
+    "lint:prettier": "prettier --cache --list-different .",
     "lint:js": "eslint --cache .",
-    "lint:spelling": "cspell \"**/*.*\"",
+    "lint:spelling": "cspell --cache --no-must-find-files --quiet \"**/*.*\"",
     "lint": "npm-run-all -l -p \"lint:**\"",
     "fix:js": "npm run lint:js -- --fix",
     "fix:prettier": "npm run lint:prettier -- --write",
@@ -44,7 +44,7 @@
   ],
   "peerDependencies": {
     "@rspack/core": "0.x || 1.x",
-    "webpack": "^5.0.0"
+    "webpack": "^5.27.0"
   },
   "peerDependenciesMeta": {
     "@rspack/core": {
@@ -57,9 +57,9 @@
   "dependencies": {
     "icss-utils": "^5.1.0",
     "postcss": "^8.4.33",
-    "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-local-by-default": "^4.0.4",
-    "postcss-modules-scope": "^3.1.1",
+    "postcss-modules-extract-imports": "^3.1.0",
+    "postcss-modules-local-by-default": "^4.0.5",
+    "postcss-modules-scope": "^3.2.0",
     "postcss-modules-values": "^4.0.0",
     "postcss-value-parser": "^4.2.0",
     "semver": "^7.5.4"
@@ -68,38 +68,37 @@
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
-    "@commitlint/cli": "^16.3.0",
-    "@commitlint/config-conventional": "^16.2.4",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^28.1.3",
+    "babel-jest": "^29.7.0",
     "cross-env": "^7.0.3",
-    "cspell": "^6.31.2",
-    "del": "^6.1.1",
-    "del-cli": "^4.0.1",
+    "cspell": "^8.6.1",
+    "del-cli": "^5.1.0",
     "es-check": "^7.1.0",
     "eslint": "^8.54.0",
-    "eslint-config-prettier": "^8.9.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.0",
     "file-loader": "^6.2.0",
-    "husky": "^7.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "less": "^4.2.0",
-    "less-loader": "^10.0.1",
-    "lint-staged": "^12.5.0",
-    "memfs": "^3.5.3",
+    "less-loader": "^12.2.0",
+    "lint-staged": "^15.2.2",
+    "memfs": "^4.8.1",
     "mini-css-extract-plugin": "^2.7.5",
     "npm-run-all": "^4.1.5",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.8.3",
-    "prettier": "^2.8.7",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.4",
+    "prettier": "^3.2.5",
     "sass": "^1.69.7",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^14.1.1",
     "standard-version": "^9.5.0",
     "strip-ansi": "^6.0.0",
-    "style-loader": "^3.3.2",
-    "stylus": "^0.59.0",
-    "stylus-loader": "^6.1.0",
+    "style-loader": "^3.3.4",
+    "stylus": "^0.63.0",
+    "stylus-loader": "^8.1.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.89.0"
   },