css-loader - npm Package Compare versions

Comparing version 6.9.1 to 6.10.0

dist/utils.js

@@ -490,3 +490,4 @@ "use strict";
     exportOnlyLocals: false,
-    ...rawModulesOptions
+    ...rawModulesOptions,
+    useExportsAs: rawModulesOptions.exportLocalsConvention === "asIs"
   };
@@ -538,3 +539,7 @@ let exportLocalsConventionType;
   } else if (typeof modulesOptions.auto === "function") {
-    const isModule = modulesOptions.auto(resourcePath);
+    const {
+      resourceQuery,
+      resourceFragment
+    } = loaderContext;
+    const isModule = modulesOptions.auto(resourcePath, resourceQuery, resourceFragment);
     if (!isModule) {
@@ -545,3 +550,3 @@ return false;
   if (typeof modulesOptions.mode === "function") {
-    modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath);
+    modulesOptions.mode = modulesOptions.mode(loaderContext.resourcePath, loaderContext.resourceQuery, loaderContext.resourceFragment);
   }
@@ -560,3 +565,3 @@ if (needNamedExport) {
     }
-    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"');
@@ -875,7 +880,16 @@ }
     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 {
@@ -885,3 +899,3 @@ if (localsCode) {
           }
-          localsCode += `\t${JSON.stringify(name)}: ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)}`;
+          localsCode += `\t${JSON.stringify(name)}: ${serializedValue}`;
         }
@@ -888,0 +902,0 @@ }

package.json

 {
   "name": "css-loader",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "description": "css loader module for webpack",
@@ -46,4 +46,13 @@ "license": "MIT",
   "peerDependencies": {
+    "@rspack/core": "0.x || 1.x",
     "webpack": "^5.0.0"
   },
+  "peerDependenciesMeta": {
+    "@rspack/core": {
+      "optional": true
+    },
+    "webpack": {
+      "optional": true
+    }
+  },
   "dependencies": {
@@ -50,0 +59,0 @@ "icss-utils": "^5.1.0",

README.md

@@ -608,3 +608,10 @@ <div align="center">
 ```ts
-type auto = boolean | regExp | ((resourcePath: string) => boolean);
+type auto =
+  | boolean
+  | regExp
+  | ((
+      resourcePath: string,
+      resourceQuery: string,
+      resourceFragment: string
+    ) => boolean);
 ```
@@ -614,3 +621,3 @@
 
-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.
 
@@ -678,3 +685,3 @@ Possible values:
 
-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.
 
@@ -692,3 +699,5 @@ **webpack.config.js**
           modules: {
-            auto: (resourcePath) => resourcePath.endsWith(".custom-module.css"),
+            auto: (resourcePath, resourceQuery, resourceFragment) => {
+              return resourcePath.endsWith(".custom-module.css");
+            },
           },
@@ -712,3 +721,7 @@ },
   | "icss"
-  | ((resourcePath: string) => "local" | "global" | "pure" | "icss");
+  | ((
+      resourcePath: string,
+      resourceQuery: string,
+      resourceFragment: string
+    ) => "local" | "global" | "pure" | "icss");
 ```
@@ -753,3 +766,3 @@
 
-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.
 
@@ -770,3 +783,3 @@ Possible return values - `local`, `global`, `pure` and `icss`.
             // Callback must return "local", "global", or "pure" values
-            mode: (resourcePath) => {
+            mode: (resourcePath, resourceQuery, resourceFragment) => {
               if (/pure.css$/i.test(resourcePath)) {
@@ -1129,7 +1142,11 @@ return "pure";
 >
-> 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"`.
 
@@ -1150,5 +1167,7 @@ **styles.css**
 ```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);
 ```
@@ -1236,6 +1255,2 @@
 
-> **Warning**
->
-> Only `camelCaseOnly` value allowed if you set the `namedExport` value to `true`.
-
 |         Name          |   Type   | Description                                                                                      |
@@ -1752,3 +1767,3 @@ | :-------------------: | :------: | :----------------------------------------------------------------------------------------------- |
   color: red;
-  background: 
+  background:
     /* webpackIgnore: true */ url("./url/img.png"), url("./url/img.png");
@@ -1769,3 +1784,3 @@ }
   background: url("./url/img.png"),
-    /* webpackIgnore: true */ 
+    /* webpackIgnore: true */
     url("./url/img.png");
@@ -1772,0 +1787,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

132612

increased by1.01%

Lines of code

2285

increased by0.62%

Number of lines in readme file

2058

increased by0.73%

Worsened metrics

Dependency count

10

increased by11.11%

No dependency changes