css-loader 6.7.4 → 6.8.1

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");
@@ -125,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));
@@ -151,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,42 @@ 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(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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "6.7.4",
+  "version": "6.8.1",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",
@@ -49,7 +49,7 @@
     "icss-utils": "^5.1.0",
     "postcss": "^8.4.21",
     "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-local-by-default": "^4.0.1",
+    "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",
@@ -89,7 +89,7 @@
     "standard-version": "^9.5.0",
     "strip-ansi": "^6.0.0",
     "style-loader": "^3.3.2",
-    "stylus": "^0.56.0",
+    "stylus": "^0.59.0",
     "stylus-loader": "^6.1.0",
     "url-loader": "^4.1.1",
     "webpack": "^5.77.0"

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;