css-loader 6.9.1 → 6.11.0

package/README.md

@@ -487,6 +487,15 @@ 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";
@@ -605,12 +614,19 @@ module.exports = {
 Type:
 
 ```ts
-type auto = boolean | regExp | ((resourcePath: string) => boolean);
+type auto =
+  | boolean
+  | regExp
+  | ((
+      resourcePath: string,
+      resourceQuery: string,
+      resourceFragment: string
+    ) => boolean);
 ```
 
 Default: `undefined`
 
-Allows auto enable CSS modules/ICSS based on filename when `modules` option is object.
+Allows auto enable CSS modules/ICSS based on the filename, query or fragment when `modules` option is object.
 
 Possible values:
 
@@ -673,7 +689,7 @@ module.exports = {
 
 ###### `function`
 
-Enable CSS modules for files based on the filename satisfying your filter function check.
+Enable CSS modules for files based on the filename, query or fragment satisfying your filter function check.
 
 **webpack.config.js**
 
@@ -686,7 +702,9 @@ module.exports = {
         loader: "css-loader",
         options: {
           modules: {
-            auto: (resourcePath) => resourcePath.endsWith(".custom-module.css"),
+            auto: (resourcePath, resourceQuery, resourceFragment) => {
+              return resourcePath.endsWith(".custom-module.css");
+            },
           },
         },
       },
@@ -705,7 +723,11 @@ type mode =
   | "global"
   | "pure"
   | "icss"
-  | ((resourcePath: string) => "local" | "global" | "pure" | "icss");
+  | ((
+      resourcePath: string,
+      resourceQuery: string,
+      resourceFragment: string
+    ) => "local" | "global" | "pure" | "icss");
 ```
 
 Default: `'local'`
@@ -745,7 +767,7 @@ module.exports = {
 
 ###### `function`
 
-Allows set different values for the `mode` option based on a filename
+Allows set different values for the `mode` option based on the filename, query or fragment.
 
 Possible return values - `local`, `global`, `pure` and `icss`.
 
@@ -761,7 +783,7 @@ module.exports = {
         options: {
           modules: {
             // Callback must return "local", "global", or "pure" values
-            mode: (resourcePath) => {
+            mode: (resourcePath, resourceQuery, resourceFragment) => {
               if (/pure.css$/i.test(resourcePath)) {
                 return "pure";
               }
@@ -1119,11 +1141,15 @@ 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.
+> 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.
+> It is not allowed to use JavaScript reserved words in css class names unless
+> `exportLocalsConvention` is `"asIs"`.
 
 **styles.css**
 
@@ -1139,9 +1165,11 @@ Enables/disables ES modules named export for locals.
 **index.js**
 
 ```js
-import { fooBaz, bar } from "./styles.css";
+import * as styles from "./styles.css";
 
-console.log(fooBaz, bar);
+console.log(styles.fooBaz, styles.bar);
+// or if using `exportLocalsConvention: "asIs"`:
+console.log(styles["foo-baz"], styles.bar);
 ```
 
 You can enable a ES module named export using:
@@ -1224,10 +1252,6 @@ Style of exported class names.
 
 By default, the exported JSON keys mirror the class names (i.e `asIs` value).
 
-> **Warning**
->
-> Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
-
 |         Name          |   Type   | Description                                                                                      |
 | :-------------------: | :------: | :----------------------------------------------------------------------------------------------- |
 |     **`'asIs'`**      | `string` | Class names will be exported as is.                                                              |
@@ -1739,7 +1763,7 @@ With the help of the `/* webpackIgnore: true */`comment, it is possible to disab
 .class {
   /* Disabled url handling for the first url in the 'background' declaration */
   color: red;
-  background: 
+  background:
     /* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
 }
 
@@ -1755,7 +1779,7 @@ With the help of the `/* webpackIgnore: true */`comment, it is possible to disab
   /* Disabled url handling for the second url in the 'background' declaration */
   color: red;
   background: url("./url/img.png"),
-    /* webpackIgnore: true */ 
+    /* webpackIgnore: true */
     url("./url/img.png");
 }
 

package/dist/utils.js

@@ -487,7 +487,8 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     namedExport: needNamedExport || false,
     exportLocalsConvention: (rawModulesOptions.namedExport === true || needNamedExport) && typeof rawModulesOptions.exportLocalsConvention === "undefined" ? "camelCaseOnly" : "asIs",
     exportOnlyLocals: false,
-    ...rawModulesOptions
+    ...rawModulesOptions,
+    useExportsAs: rawModulesOptions.exportLocalsConvention === "asIs"
   };
   let exportLocalsConventionType;
   if (typeof modulesOptions.exportLocalsConvention === "string") {
@@ -534,13 +535,17 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
       return false;
     }
   } else if (typeof modulesOptions.auto === "function") {
-    const isModule = modulesOptions.auto(resourcePath);
+    const {
+      resourceQuery,
+      resourceFragment
+    } = loaderContext;
+    const isModule = modulesOptions.auto(resourcePath, resourceQuery, resourceFragment);
     if (!isModule) {
       return false;
     }
   }
   if (typeof modulesOptions.mode === "function") {
-    modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath);
+    modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath, loaderContext.resourceQuery, loaderContext.resourceFragment);
   }
   if (needNamedExport) {
     if (rawOptions.esModule === false) {
@@ -554,7 +559,7 @@ function getModulesOptions(rawOptions, exportType, loaderContext) {
     if (rawOptions.esModule === false) {
       throw new Error("The 'modules.namedExport' option requires the 'esModule' option to be enabled");
     }
-    if (typeof exportLocalsConventionType === "string" && exportLocalsConventionType !== "camelCaseOnly" && exportLocalsConventionType !== "dashesOnly") {
+    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"');
     }
   }
@@ -868,16 +873,25 @@ function getExportCode(exports, replacements, icssPluginUsed, options, isTemplat
   let code = "// Exports\n";
   if (icssPluginUsed) {
     let localsCode = "";
+    let identifierId = 0;
     const addExportToLocalsCode = (names, value) => {
       const normalizedNames = Array.isArray(names) ? new Set(names) : new Set([names]);
       for (const name of normalizedNames) {
+        const serializedValue = isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value);
         if (options.modules.namedExport) {
-          localsCode += `export var ${name} = ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)};\n`;
+          if (options.modules.useExportsAs) {
+            identifierId += 1;
+            const id = `_${identifierId.toString(16)}`;
+            localsCode += `var ${id} = ${serializedValue};\n`;
+            localsCode += `export { ${id} as ${JSON.stringify(name)} };\n`;
+          } else {
+            localsCode += `export var ${name} = ${serializedValue};\n`;
+          }
         } else {
           if (localsCode) {
             localsCode += `,\n`;
           }
-          localsCode += `\t${JSON.stringify(name)}: ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)}`;
+          localsCode += `\t${JSON.stringify(name)}: ${serializedValue}`;
         }
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.9.1",
+  "version": "6.11.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -43,14 +43,23 @@
     "dist"
   ],
   "peerDependencies": {
+    "@rspack/core": "0.x || 1.x",
     "webpack": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "@rspack/core": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
   "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"