css-loader - npm Package Compare versions

Comparing version 6.7.3 to 6.8.1

dist/index.js

@@ -10,4 +10,2 @@ "use strict";
 var _semver = require("semver");
-var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
-var _Warning = _interopRequireDefault(require("./Warning"));
 var _options = _interopRequireDefault(require("./options.json"));
@@ -24,4 +22,8 @@ var _plugins = require("./plugins");
   const rawOptions = this.getOptions(_options.default);
-  const plugins = [];
   const callback = this.async();
+  if (this._compiler && this._compiler.options && this._compiler.options.experiments && this._compiler.options.experiments.css && this._module && this._module.type === "css") {
+    this.emitWarning(new Error('You can\'t use `experiments.css` (`experiments.futureDefaults` enable built-in CSS support by default) and `css-loader` together, please set `experiments.css` to `false` or set `{ type: "javascript/auto" }` for rules with `css-loader` in your webpack config (now css-loader does nothing).'));
+    callback(null, content, map, meta);
+    return;
+  }
   let options;
@@ -34,2 +36,3 @@ try {
   }
+  const plugins = [];
   const replacements = [];
@@ -126,7 +129,7 @@ const exports = [];
     }
-    callback(error.name === "CssSyntaxError" ? new _CssSyntaxError.default(error) : error);
+    callback(error.name === "CssSyntaxError" ? (0, _utils.syntaxErrorFactory)(error) : error);
     return;
   }
   for (const warning of result.warnings()) {
-    this.emitWarning(new _Warning.default(warning));
+    this.emitWarning((0, _utils.warningFactory)(warning));
   }
@@ -153,6 +156,20 @@ const imports = [].concat(icssPluginImports.sort(_utils.sort)).concat(importPluginImports.sort(_utils.sort)).concat(urlPluginImports.sort(_utils.sort));
   }
+  let isTemplateLiteralSupported = false;
+  if (
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options.output &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options.output.environment &&
+  // eslint-disable-next-line no-underscore-dangle
+  this._compilation.options.output.environment.templateLiteral) {
+    isTemplateLiteralSupported = true;
+  }
   const importCode = (0, _utils.getImportCode)(imports, options);
   let moduleCode;
   try {
-    moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, this);
+    moduleCode = (0, _utils.getModuleCode)(result, api, replacements, options, isTemplateLiteralSupported, this);
   } catch (error) {
@@ -162,4 +179,4 @@ callback(error);
   }
-  const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options);
+  const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options, isTemplateLiteralSupported);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

dist/utils.js

@@ -30,2 +30,4 @@ "use strict";
 exports.stringifyRequest = stringifyRequest;
+exports.syntaxErrorFactory = syntaxErrorFactory;
+exports.warningFactory = warningFactory;
 var _url = require("url");
@@ -794,3 +796,3 @@ var _path = _interopRequireDefault(require("path"));
 }
-function getModuleCode(result, api, replacements, options, loaderContext) {
+function getModuleCode(result, api, replacements, options, isTemplateLiteralSupported, loaderContext) {
   if (options.modules.exportOnlyLocals === true) {
@@ -804,3 +806,3 @@ return "";
   }
-  let code = JSON.stringify(result.css);
+  let code = isTemplateLiteralSupported ? convertToTemplateLiteral(result.css) : JSON.stringify(result.css);
   let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${options.sourceMap ? "___CSS_LOADER_API_SOURCEMAP_IMPORT___" : "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___"});\n`;
@@ -831,3 +833,3 @@ for (const item of api) {
     if (localName) {
-      code = code.replace(new RegExp(replacementName, "g"), () => options.modules.namedExport ? `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
+      code = code.replace(new RegExp(replacementName, "g"), () => options.modules.namedExport ? isTemplateLiteralSupported ? `\${ ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] }` : `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "` : isTemplateLiteralSupported ? `\${${importName}.locals[${JSON.stringify(localName)}]}` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`);
     } else {
@@ -841,3 +843,3 @@ const {
       beforeCode += `var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});\n`;
-      code = code.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
+      code = code.replace(new RegExp(replacementName, "g"), () => isTemplateLiteralSupported ? `\${${replacementName}}` : `" + ${replacementName} + "`);
     }
@@ -855,6 +857,17 @@ }
 }
+const SLASH = "\\".charCodeAt(0);
+const BACKTICK = "`".charCodeAt(0);
+const DOLLAR = "$".charCodeAt(0);
+function convertToTemplateLiteral(str) {
+  let escapedString = "";
+  for (let i = 0; i < str.length; i++) {
+    const code = str.charCodeAt(i);
+    escapedString += code === SLASH || code === BACKTICK || code === DOLLAR ? `\\${str[i]}` : str[i];
+  }
+  return `\`${escapedString}\``;
+}
 function dashesCamelCase(str) {
   return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase());
 }
-function getExportCode(exports, replacements, icssPluginUsed, options) {
+function getExportCode(exports, replacements, icssPluginUsed, options, isTemplateLiteralSupported) {
   let code = "// Exports\n";
@@ -867,3 +880,3 @@ if (icssPluginUsed) {
         if (options.modules.namedExport) {
-          localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
+          localsCode += `export var ${name} = ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)};\n`;
         } else {
@@ -873,3 +886,3 @@ if (localsCode) {
           }
-          localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
+          localsCode += `\t${JSON.stringify(name)}: ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)}`;
         }
@@ -895,10 +908,10 @@ }
           if (options.modules.namedExport) {
-            return `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
+            return isTemplateLiteralSupported ? `\${${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}]}` : `" + ${importName}_NAMED___[${JSON.stringify(getValidLocalName(localName, options.modules.exportLocalsConvention))}] + "`;
           } else if (options.modules.exportOnlyLocals) {
-            return `" + ${importName}[${JSON.stringify(localName)}] + "`;
+            return isTemplateLiteralSupported ? `\${${importName}[${JSON.stringify(localName)}]}` : `" + ${importName}[${JSON.stringify(localName)}] + "`;
           }
-          return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
+          return isTemplateLiteralSupported ? `\${${importName}.locals[${JSON.stringify(localName)}]}` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`;
         });
       } else {
-        localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => `" + ${replacementName} + "`);
+        localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => isTemplateLiteralSupported ? `\${${replacementName}}` : `" + ${replacementName} + "`);
       }
@@ -1007,2 +1020,40 @@ }
   return idx !== -1 ? url.slice(0, idx + 3) + preRequest + url.slice(idx + 3) : preRequest + url;
+}
+function warningFactory(warning) {
+  let message = "";
+  if (typeof warning.line !== "undefined") {
+    message += `(${warning.line}:${warning.column}) `;
+  }
+  if (typeof warning.plugin !== "undefined") {
+    message += `from "${warning.plugin}" plugin: `;
+  }
+  message += warning.text;
+  if (warning.node) {
+    message += `\n\nCode:\n  ${warning.node.toString()}\n`;
+  }
+  const obj = new Error(message, {
+    cause: warning
+  });
+  obj.stack = null;
+  return obj;
+}
+function syntaxErrorFactory(error) {
+  let message = "\nSyntaxError\n\n";
+  if (typeof error.line !== "undefined") {
+    message += `(${error.line}:${error.column}) `;
+  }
+  if (typeof error.plugin !== "undefined") {
+    message += `from "${error.plugin}" plugin: `;
+  }
+  message += error.file ? `${error.file} ` : "<css input> ";
+  message += `${error.reason}`;
+  const code = error.showSourceCode();
+  if (code) {
+    message += `\n\n${code}\n`;
+  }
+  const obj = new Error(message, {
+    cause: error
+  });
+  obj.stack = null;
+  return obj;
 }

package.json

 {
   "name": "css-loader",
-  "version": "6.7.3",
+  "version": "6.8.1",
   "description": "css loader module for webpack",
@@ -31,2 +31,5 @@ "license": "MIT",
     "lint": "npm-run-all -l -p \"lint:**\"",
+    "fix:js": "npm run lint:js -- --fix",
+    "fix:prettier": "npm run lint:prettier -- --write",
+    "fix": "npm-run-all -l fix:js fix:prettier",
     "test:only": "cross-env NODE_ENV=test jest",
@@ -48,5 +51,5 @@ "test:watch": "npm run test:only -- --watch",
     "icss-utils": "^5.1.0",
-    "postcss": "^8.4.19",
+    "postcss": "^8.4.21",
     "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-local-by-default": "^4.0.0",
+    "postcss-modules-local-by-default": "^4.0.3",
     "postcss-modules-scope": "^3.0.0",
@@ -58,5 +61,5 @@ "postcss-modules-values": "^4.0.0",
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.4",
+    "@babel/preset-env": "^7.21.4",
     "@commitlint/cli": "^16.3.0",
@@ -67,9 +70,9 @@ "@commitlint/config-conventional": "^16.2.4",
     "cross-env": "^7.0.3",
-    "cspell": "^6.15.1",
+    "cspell": "^6.31.1",
     "del": "^6.1.1",
     "del-cli": "^4.0.1",
-    "es-check": "^7.0.1",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
+    "es-check": "^7.1.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
     "file-loader": "^6.2.0",
@@ -82,17 +85,17 @@ "husky": "^7.0.1",
     "lint-staged": "^12.5.0",
-    "memfs": "^3.4.12",
-    "mini-css-extract-plugin": "^2.7.1",
+    "memfs": "^3.4.13",
+    "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.0",
-    "sass": "^1.56.1",
+    "prettier": "^2.8.7",
+    "sass": "^1.60.0",
     "sass-loader": "^12.6.0",
     "standard-version": "^9.5.0",
     "strip-ansi": "^6.0.0",
-    "style-loader": "^3.1.0",
-    "stylus": "^0.56.0",
+    "style-loader": "^3.3.2",
+    "stylus": "^0.59.0",
     "stylus-loader": "^6.1.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.75.0"
+    "webpack": "^5.77.0"
   },
@@ -99,0 +102,0 @@ "keywords": [

README.md

@@ -14,3 +14,3 @@ <div align="center">
 [![coverage][cover]][cover-url]
-[![chat][chat]][chat-url]
+[![discussion][discussion]][discussion-url]
 [![size][size]][size-url]
@@ -26,3 +26,3 @@
 >
-> To use css-loader, webpack@5 is required
+> To use the latest version of css-loader, webpack@5 is required
 
@@ -189,5 +189,13 @@ To begin, you'll need to install `css-loader`:
 ```ts
-type import =
+type importFn =
   | boolean
-  | { filter: (url: string, media: string, resourcePath: string) => boolean };
+  | {
+      filter: (
+        url: string,
+        media: string,
+        resourcePath: string,
+        supports?: string,
+        layer?: string
+      ) => boolean;
+    };
 ```
@@ -699,7 +707,7 @@
 type mode =
-        | "local"
-        | "global"
-        | "pure"
-        | "icss"
-        | ((resourcePath) => "local" | "global" | "pure" | "icss"))`
+  | "local"
+  | "global"
+  | "pure"
+  | "icss"
+  | ((resourcePath: string) => "local" | "global" | "pure" | "icss");
 ```
@@ -1703,2 +1711,4 @@
       {
+        // If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
+        // type: "javascript/auto",
         test: /\.(sa|sc|c)ss$/i,
@@ -2034,5 +2044,5 @@ use: [
 [cover-url]: https://codecov.io/gh/webpack-contrib/css-loader
-[chat]: https://badges.gitter.im/webpack/webpack.svg
-[chat-url]: https://gitter.im/webpack/webpack
+[discussion]: https://img.shields.io/github/discussions/webpack/webpack
+[discussion-url]: https://github.com/webpack/webpack/discussions
 [size]: https://packagephobia.now.sh/badge?p=css-loader
 [size-url]: https://packagephobia.now.sh/result?p=css-loader

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

131093

increased by1.68%

Lines of code

2272

increased by0.66%

Number of lines in readme file

2043

increased by0.49%

Worsened metrics

Number of package files

15

decreased by-11.76%

Dependency changes

• Updatedpostcss@^8.4.21

• Updatedpostcss-modules-local-by-default@^4.0.3