css-loader 6.7.3 → 6.8.0

package/README.md

@@ -11,7 +11,7 @@
 [![node][node]][node-url]
 [![tests][tests]][tests-url]
 [![coverage][cover]][cover-url]
-[![chat][chat]][chat-url]
+[![discussion][discussion]][discussion-url]
 [![size][size]][size-url]
 
 # css-loader
@@ -22,7 +22,7 @@ The `css-loader` interprets `@import` and `url()` like `import/require()` and wi
 
 > **Warning**
 >
-> To use css-loader, webpack@5 is required
+> To use the latest version of css-loader, webpack@5 is required
 
 To begin, you'll need to install `css-loader`:
 
@@ -184,9 +184,17 @@ Type:
 <!-- use other name to prettify since import is reserved keyword -->
 
 ```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;
+    };
 ```
 
 Default: `true`
@@ -693,11 +701,11 @@ Type:
 
 ```ts
 type mode =
-        | "local"
-        | "global"
-        | "pure"
-        | "icss"
-        | ((resourcePath) => "local" | "global" | "pure" | "icss"))`
+  | "local"
+  | "global"
+  | "pure"
+  | "icss"
+  | ((resourcePath: string) => "local" | "global" | "pure" | "icss");
 ```
 
 Default: `'local'`
@@ -1696,6 +1704,8 @@ module.exports = {
   module: {
     rules: [
       {
+        // If you enable `experiments.css` or `experiments.futureDefaults`, please uncomment line below
+        // type: "javascript/auto",
         test: /\.(sa|sc|c)ss$/i,
         use: [
           devMode ? "style-loader" : MiniCssExtractPlugin.loader,
@@ -2026,7 +2036,7 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [tests-url]: https://github.com/webpack-contrib/css-loader/actions
 [cover]: https://codecov.io/gh/webpack-contrib/css-loader/branch/master/graph/badge.svg
 [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

package/dist/index.js

@@ -7,8 +7,6 @@ exports.default = loader;
 var _postcss = _interopRequireDefault(require("postcss"));
 var _package = _interopRequireDefault(require("postcss/package.json"));
 var _semver = require("semver");
-var _CssSyntaxError = _interopRequireDefault(require("./CssSyntaxError"));
-var _Warning = _interopRequireDefault(require("./Warning"));
 var _options = _interopRequireDefault(require("./options.json"));
 var _plugins = require("./plugins");
 var _utils = require("./utils");
@@ -20,8 +18,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 async function loader(content, map, meta) {
   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;
   try {
     options = (0, _utils.normalizeOptions)(rawOptions, this);
@@ -29,6 +31,7 @@ async function loader(content, map, meta) {
     callback(error);
     return;
   }
+  const plugins = [];
   const replacements = [];
   const exports = [];
   if ((0, _utils.shouldUseModulesPlugins)(options)) {
@@ -120,11 +123,11 @@ async function loader(content, map, meta) {
     if (error.file) {
       this.addDependency(error.file);
     }
-    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));
   }
   const imports = [].concat(icssPluginImports.sort(_utils.sort)).concat(importPluginImports.sort(_utils.sort)).concat(urlPluginImports.sort(_utils.sort));
   const api = [].concat(importPluginApi.sort(_utils.sort)).concat(icssPluginApi.sort(_utils.sort));
@@ -146,14 +149,28 @@ async function loader(content, map, meta) {
       });
     }
   }
+  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) {
     callback(error);
     return;
   }
-  const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options);
+  const exportCode = (0, _utils.getExportCode)(exports, replacements, needToUseIcssPlugin, options, isTemplateLiteralSupported);
   callback(null, `${importCode}${moduleCode}${exportCode}`);
 }

package/dist/utils.js

@@ -27,6 +27,8 @@ exports.shouldUseModulesPlugins = shouldUseModulesPlugins;
 exports.shouldUseURLPlugin = shouldUseURLPlugin;
 exports.sort = sort;
 exports.stringifyRequest = stringifyRequest;
+exports.syntaxErrorFactory = syntaxErrorFactory;
+exports.warningFactory = warningFactory;
 var _url = require("url");
 var _path = _interopRequireDefault(require("path"));
 var _postcssModulesValues = _interopRequireDefault(require("postcss-modules-values"));
@@ -790,7 +792,7 @@ function printParams(media, dedupe, supports, layer) {
   }
   return result;
 }
-function getModuleCode(result, api, replacements, options, loaderContext) {
+function getModuleCode(result, api, replacements, options, isTemplateLiteralSupported, loaderContext) {
   if (options.modules.exportOnlyLocals === true) {
     return "";
   }
@@ -799,7 +801,7 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
     const sourceMap = result.map;
     sourceMapValue = `,${normalizeSourceMapForRuntime(sourceMap, loaderContext)}`;
   }
-  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`;
   for (const item of api) {
     const {
@@ -825,7 +827,7 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
       localName
     } = item;
     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 {
       const {
         hash,
@@ -834,7 +836,7 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
       const getUrlOptions = [].concat(hash ? [`hash: ${JSON.stringify(hash)}`] : []).concat(needQuotes ? "needQuotes: true" : []);
       const preparedOptions = getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(", ")} }` : "";
       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} + "`);
     }
   }
 
@@ -847,10 +849,21 @@ function getModuleCode(result, api, replacements, options, loaderContext) {
   // 5 - layer
   return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`;
 }
+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";
   if (icssPluginUsed) {
     let localsCode = "";
@@ -858,12 +871,12 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
       const normalizedNames = Array.isArray(names) ? new Set(names) : new Set([names]);
       for (const name of normalizedNames) {
         if (options.modules.namedExport) {
-          localsCode += `export var ${name} = ${JSON.stringify(value)};\n`;
+          localsCode += `export var ${name} = ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)};\n`;
         } else {
           if (localsCode) {
             localsCode += `,\n`;
           }
-          localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
+          localsCode += `\t${JSON.stringify(name)}: ${isTemplateLiteralSupported ? convertToTemplateLiteral(value) : JSON.stringify(value)}`;
         }
       }
     };
@@ -884,14 +897,14 @@ function getExportCode(exports, replacements, icssPluginUsed, options) {
         } = item;
         localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => {
           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} + "`);
       }
     }
     if (options.modules.exportOnlyLocals) {
@@ -995,4 +1008,38 @@ function sort(a, b) {
 function combineRequests(preRequest, url) {
   const idx = url.indexOf("!=!");
   return idx !== -1 ? url.slice(0, idx + 3) + preRequest + url.slice(idx + 3) : preRequest + url;
+}
+function warningFactory(obj) {
+  let message = "";
+  if (typeof obj.line !== "undefined") {
+    message += `(${obj.line}:${obj.column}) `;
+  }
+  if (typeof obj.plugin !== "undefined") {
+    message += `from "${obj.plugin}" plugin: `;
+  }
+  message += obj.text;
+  if (obj.node) {
+    message += `\n\nCode:\n  ${obj.node.toString()}\n`;
+  }
+  const warning = new Error(message);
+  warning.stack = null;
+  return warning;
+}
+function syntaxErrorFactory(obj) {
+  let message = "\nSyntaxError\n\n";
+  if (typeof obj.line !== "undefined") {
+    message += `(${obj.line}:${obj.column}) `;
+  }
+  if (typeof obj.plugin !== "undefined") {
+    message += `from "${obj.plugin}" plugin: `;
+  }
+  message += obj.file ? `${obj.file} ` : "<css input> ";
+  message += `${obj.reason}`;
+  const code = obj.showSourceCode();
+  if (code) {
+    message += `\n\n${code}\n`;
+  }
+  const error = new Error(message);
+  error.stack = null;
+  return error;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.7.3",
+  "version": "6.8.0",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -28,6 +28,9 @@
     "lint:js": "eslint --cache .",
     "lint:spelling": "cspell \"**/*.*\"",
     "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",
     "test:watch": "npm run test:only -- --watch",
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
@@ -44,30 +47,30 @@
   },
   "dependencies": {
     "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",
     "postcss-modules-values": "^4.0.0",
     "postcss-value-parser": "^4.2.0",
     "semver": "^7.3.8"
   },
   "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",
     "@commitlint/config-conventional": "^16.2.4",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^28.1.3",
     "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",
     "husky": "^7.0.1",
     "jest": "^28.1.3",
@@ -75,21 +78,21 @@
     "less": "^4.1.3",
     "less-loader": "^10.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"
   },
   "keywords": [
     "webpack",

package/dist/CssSyntaxError.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-class CssSyntaxError extends Error {
-  constructor(error) {
-    super(error);
-    const {
-      reason,
-      line,
-      column,
-      file
-    } = error;
-    this.name = "CssSyntaxError";
-
-    // Based on https://github.com/postcss/postcss/blob/master/lib/css-syntax-error.es6#L132
-    // We don't need `plugin` and `file` properties.
-    this.message = `${this.name}\n\n`;
-    if (typeof line !== "undefined") {
-      this.message += `(${line}:${column}) `;
-    }
-    this.message += file ? `${file} ` : "<css input> ";
-    this.message += `${reason}`;
-    const code = error.showSourceCode();
-    if (code) {
-      this.message += `\n\n${code}\n`;
-    }
-
-    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
-    this.stack = false;
-  }
-}
-exports.default = CssSyntaxError;

package/dist/Warning.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-class Warning extends Error {
-  constructor(warning) {
-    super(warning);
-    const {
-      text,
-      line,
-      column
-    } = warning;
-    this.name = "Warning";
-
-    // Based on https://github.com/postcss/postcss/blob/master/lib/warning.es6#L74
-    // We don't need `plugin` properties.
-    this.message = `${this.name}\n\n`;
-    if (typeof line !== "undefined") {
-      this.message += `(${line}:${column}) `;
-    }
-    this.message += `${text}`;
-
-    // We don't need stack https://github.com/postcss/postcss/blob/master/docs/guidelines/runner.md#31-dont-show-js-stack-for-csssyntaxerror
-    this.stack = false;
-  }
-}
-exports.default = Warning;