refactor: removed interpolateName in favor webpack template strings

Author: cap-Bernardito

README.md

@@ -758,11 +758,28 @@ Type: `String`
 Default: `'[hash:base64]'`
 
 Allows to configure the generated local ident name.
-See [loader-utils's documentation](https://github.com/webpack/loader-utils#interpolatename) for more information on options.
+
+For more information on options see:
+
+- [webpack template strings](https://webpack.js.org/configuration/output/#template-strings),
+- [output.hashdigest](https://webpack.js.org/configuration/output/#outputhashdigest),
+- [output.hashDigestLength](https://webpack.js.org/configuration/output/#outputhashdigestlength),
+- [output.hashFunction](https://webpack.js.org/configuration/output/#outputhashfunction),
+- [output.hashSalt](https://webpack.js.org/configuration/output/#outputhashsalt).
+
+Supported template strings:
+
+- [name] the basename of the resource
+- [path] the path of the resource relative to the `compiler.context` option or `modules.localIdentContext` option.
+- [file] - filename and path.
+- [ext] - extension with leading .
+- [hash] - the hash of the string, generated based on `hashPrefix`, `localIdentContext`, `resourcePath` and `exportName`
+- [<hashFunction>:hash:<hashDigest>:<hashDigestLength>] - hash with hash settings.
+- [local] - original class.
 
 Recommendations:
 
-- use `'[path][name]__[local]'` for development
+- use `'[file]__[local]'` for development
 - use `'[hash:base64]'` for production
 
 The `[local]` placeholder contains original class.

package.json

@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "icss-utils": "^5.1.0",
-    "loader-utils": "^2.0.0",
     "postcss": "^8.2.15",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",

src/utils.js

@@ -5,7 +5,6 @@
 import { fileURLToPath } from "url";
 import path from "path";
 
-import { interpolateName } from "loader-utils";
 import modulesValues from "postcss-modules-values";
 import localByDefault from "postcss-modules-local-by-default";
 import extractImports from "postcss-modules-extract-imports";
@@ -25,9 +24,7 @@ function isRelativePath(str) {
 
 function stringifyRequest(loaderContext, request) {
   const splitted = request.split("!");
-  const context =
-    loaderContext.context ||
-    (loaderContext.options && loaderContext.options.context);
+  const { context } = loaderContext;
 
   return JSON.stringify(
     splitted
@@ -63,25 +60,14 @@ function stringifyRequest(loaderContext, request) {
 const matchNativeWin32Path = /^[A-Z]:[/\\]|^\\\\/i;
 
 function urlToRequest(url, root) {
-  // Do not rewrite an empty url
-  if (url === "") {
-    return "";
-  }
-
   const moduleRequestRegex = /^[^?]*~/;
   let request;
 
   if (matchNativeWin32Path.test(url)) {
     // absolute windows path, keep it
     request = url;
   } else if (typeof root !== "undefined" && /^\//.test(url)) {
-    // if root is set and the url is root-relative
-    // special case: `~` roots convert to module request
-    if (moduleRequestRegex.test(root)) {
-      request = root.replace(/([^~/])$/, "$1/") + url.slice(1);
-    } else {
-      request = root + url;
-    }
+    request = root + url;
   } else if (/^\.\.?\//.test(url)) {
     // A relative url stays
     request = url;
@@ -325,6 +311,30 @@ function escapeLocalIdent(localident) {
   );
 }
 
+function resolveFolderTemplate(loaderContext, localIdentName, options) {
+  const { context } = options;
+  let { resourcePath } = loaderContext;
+  const parsed = path.parse(loaderContext.resourcePath);
+
+  if (parsed.dir) {
+    resourcePath = parsed.dir + path.sep;
+  }
+
+  let directory = path
+    .relative(context, `${resourcePath}_`)
+    .replace(/\\/g, "/")
+    .replace(/\.\.(\/)?/g, "_$1");
+  directory = directory.substr(0, directory.length - 1);
+
+  if (directory.length > 1) {
+    const folder = path.basename(directory);
+
+    return localIdentName.replace(/\[folder\]/gi, () => folder);
+  }
+
+  return localIdentName;
+}
+
 function defaultGetLocalIdent(
   loaderContext,
   localIdentName,
@@ -348,7 +358,77 @@ function defaultGetLocalIdent(
   // eslint-disable-next-line no-param-reassign
   options.content = `${options.hashPrefix}${relativeMatchResource}${relativeResourcePath}\x00${localName}`;
 
-  return interpolateName(loaderContext, localIdentName, options);
+  // eslint-disable-next-line no-underscore-dangle
+  const { outputOptions } = loaderContext._compilation;
+  const { hashSalt } = outputOptions;
+  let { hashFunction, hashDigest, hashDigestLength } = outputOptions;
+
+  const mathes = localIdentName.match(
+    /\[(?:([^:\]]+):)?(?:(hash|contenthash|fullhash))(?::([a-z]+\d*))?(?::(\d+))?\]/i
+  );
+
+  if (mathes) {
+    const hashName = mathes[2] || hashFunction;
+
+    hashFunction = mathes[1] || hashFunction;
+    hashDigest = mathes[3] || hashDigest;
+    hashDigestLength = mathes[4] || hashDigestLength;
+
+    // `hash` and `contenthash` are same in `loader-utils` context
+    // let's keep `hash` for backward compatibility
+
+    // eslint-disable-next-line no-param-reassign
+    localIdentName = localIdentName.replace(
+      /\[(?:([^:\]]+):)?(?:hash|contenthash|fullhash)(?::([a-z]+\d*))?(?::(\d+))?\]/gi,
+      () => (hashName === "fullhash" ? "[fullhash]" : "[contenthash]")
+    );
+  }
+
+  // eslint-disable-next-line no-underscore-dangle
+  const hash = loaderContext._compiler.webpack.util.createHash(hashFunction);
+  // eslint-disable-next-line no-underscore-dangle
+
+  if (hashSalt) {
+    hash.update(hashSalt);
+  }
+
+  hash.update(options.content);
+
+  const localIdentHash = hash
+    .digest(hashDigest)
+    .slice(0, hashDigestLength)
+    .replace(/[/+]/g, "_")
+    .replace(/^\d/g, "_");
+
+  const ext = path.extname(loaderContext.resourcePath);
+  const base = path.basename(loaderContext.resourcePath);
+  const name = base.slice(0, base.length - ext.length);
+
+  const data = {
+    filename: path.relative(options.context, loaderContext.resourcePath),
+    contentHash: localIdentHash,
+    chunk: {
+      name,
+      hash: localIdentHash,
+      contentHash: localIdentHash,
+    },
+  };
+
+  // eslint-disable-next-line no-underscore-dangle
+  let interpolatedFilename = loaderContext._compilation.getPath(
+    localIdentName,
+    data
+  );
+
+  if (localIdentName.includes("[folder]")) {
+    interpolatedFilename = resolveFolderTemplate(
+      loaderContext,
+      interpolatedFilename,
+      options
+    );
+  }
+
+  return interpolatedFilename;
 }
 
 const NATIVE_WIN32_PATH = /^[A-Z]:[/\\]|^\\\\/i;
@@ -526,6 +606,12 @@ function getModulesOptions(rawOptions, loaderContext) {
     );
   }
 
+  if (modulesOptions.localIdentName.includes("[folder]")) {
+    loaderContext.emitWarning(
+      "[folder] is deprecated and will be removed in next major release. See documentation for available options (https://github.com/webpack-contrib/css-loader#localidentname)"
+    );
+  }
+
   return modulesOptions;
 }
 

test/__snapshots__/esModule-option.test.js.snap

@@ -151,10 +151,10 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.oFwPvuANP2XsfGir7HPVz {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.Yz6vxyapD7cLc0x63wym {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	\\"class\\": \\"oFwPvuANP2XsfGir7HPVz\\"
+	\\"class\\": \\"Yz6vxyapD7cLc0x63wym\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -164,7 +164,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 Array [
   Array [
     "../../src/index.js??ruleSet[1].rules[0].use[0]!./es-module/imported.css",
-    "._2sn2s-Iv44Mnv3FmSmFVuI {
+    ".rJenlm2lw3fBBPGxPidc {
   color: red;
 }
 ",
@@ -176,7 +176,7 @@ Array [
 
 /* Comment */
 
-.oFwPvuANP2XsfGir7HPVz {
+.Yz6vxyapD7cLc0x63wym {
   color: red;
   background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }
@@ -200,10 +200,10 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1
 ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.oFwPvuANP2XsfGir7HPVz {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
+___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.Yz6vxyapD7cLc0x63wym {\\\\n  color: red;\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
-	\\"class\\": \\"oFwPvuANP2XsfGir7HPVz\\"
+	\\"class\\": \\"Yz6vxyapD7cLc0x63wym\\"
 };
 export default ___CSS_LOADER_EXPORT___;
 "
@@ -213,7 +213,7 @@ exports[`"esModule" option should work with a value equal to "true" and the "mod
 Array [
   Array [
     "../../src/index.js??ruleSet[1].rules[0].use[0]!./es-module/imported.css",
-    "._2sn2s-Iv44Mnv3FmSmFVuI {
+    ".rJenlm2lw3fBBPGxPidc {
   color: red;
 }
 ",
@@ -225,7 +225,7 @@ Array [
 
 /* Comment */
 
-.oFwPvuANP2XsfGir7HPVz {
+.Yz6vxyapD7cLc0x63wym {
   color: red;
   background: url(replaced_file_protocol_/webpack/public/path/img.png);
 }

test/__snapshots__/loader.test.js.snap

@@ -660,66 +660,66 @@ exports[`loader should work with inline module syntax: result 1`] = `
 Array [
   Array [
     "other.modules.css!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./index-loader-syntax.modules.css",
-    "._14oM7qkZ6dgC62uK5h4NI0 {
+    ".ABsTUeF6gmFCjdFT2gFj {
   color: red;
 }
 
-._2NqyYysncZeLetATpl0xfW {
+._hMCVXaTnfM6PXNxIi9q {
   color: white;
 }",
     "",
   ],
   Array [
     "button.modules.css!=!./index-loader-syntax-sass.css",
-    "._8aapa4kQQdSsOoRODcrwe {
+    ".Drgxp1xjMmc3NE0RSqYo {
   width: 5px;
 }",
     "",
   ],
   Array [
     "other.modules.scss!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./index-loader-syntax-sass.modules.css",
-    "._2yVYVQfmDwKLZn9Qj6k_Q5 > ._3rHlnRnPEotX4nTkd82-aE {
+    ".Bf1TxkQnV__64Gk9dM7n > .qOILSEPdF7F3GDpf9VWt {
   color: red;
 }",
     "",
   ],
   Array [
     "other.modules.css!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./my-inline-loader/index.js!./index-loader-syntax.modules.css",
-    "._14oM7qkZ6dgC62uK5h4NI0 {
+    ".ABsTUeF6gmFCjdFT2gFj {
   color: red;
 }
 
-._2NqyYysncZeLetATpl0xfW {
+._hMCVXaTnfM6PXNxIi9q {
   color: white;
 }
 
-._1-Aa1c8UQML46IWY0FjGXT {
+._65OKcDrrEG8MI0jTKCQ {
   from: custom;
 }",
     "",
   ],
   Array [
     "other.modules.css!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./my-inline-loader/index.js!./index-loader-syntax.modules.css",
-    "._14oM7qkZ6dgC62uK5h4NI0 {
+    ".ABsTUeF6gmFCjdFT2gFj {
   color: red;
 }
 
-._2NqyYysncZeLetATpl0xfW {
+._hMCVXaTnfM6PXNxIi9q {
   color: white;
 }
 
-._1-Aa1c8UQML46IWY0FjGXT {
+._65OKcDrrEG8MI0jTKCQ {
   from: custom;
 }",
     "",
   ],
   Array [
     "other.modules.scss!=!../../src/index.js??ruleSet[1].rules[0].rules[0]!../../node_modules/sass-loader/dist/cjs.js!./my-inline-loader/index.js!./index-loader-syntax-sass.modules.css",
-    "._2yVYVQfmDwKLZn9Qj6k_Q5 > ._3rHlnRnPEotX4nTkd82-aE {
+    ".Bf1TxkQnV__64Gk9dM7n > .qOILSEPdF7F3GDpf9VWt {
   color: red;
 }
 
-._2kEhhupr-6tgHnCC_d4yO8 {
+.iCwSzW_a1wp1hr9lXhSh {
   from: custom;
 }",
     "",
@@ -733,21 +733,21 @@ Array [
   ],
   Array [
     "button.modules.css!=!./index-loader-syntax-sass.css",
-    "._8aapa4kQQdSsOoRODcrwe {
+    ".Drgxp1xjMmc3NE0RSqYo {
   width: 5px;
 }",
     "",
   ],
   Array [
     "button.module.scss!=!./base64-loader/index.js?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js?foo=bar",
-    "._2hfVrRfux-FOrqimHr-fzt {
+    "._fj422pJ2ianfug99ZY_ {
   color: red;
 }",
     "",
   ],
   Array [
     "other.module.scss!=!./base64-loader/index.js?LmZvbyB7IGNvbG9yOiByZWQ7IH0=!./simple.js?foo=baz",
-    "._2jOyhMQwdpQ85V5dDLcfoG {
+    ".KvYw79kUeYHQWQPScCTK {
   color: red;
 }",
     "",
@@ -812,7 +812,7 @@ exports[`loader should work with the "modules.auto" option and the "import.loade
   color: #333;
 }
 /* CSS modules */
-._1IwxFskZk1cbjNkH0QoBiv {
+.n1RiNLBS8bQwAdVTXBqC {
   overflow-x: hidden;
   overflow-y: auto;
   overflow: hidden auto;
@@ -829,7 +829,7 @@ exports[`loader should work with the "modules.auto" option and the "import.loade
   overflow-y: auto;
   overflow: hidden auto;
 }
-._2on1B_I_5ZLmD6I3yY37jX {
+._3QMvDiwxmm9ffGzfxlc {
   color: #333;
   overflow-x: hidden;
   overflow-y: auto;