fix: inline loader syntax in @import and modules

package.json

@@ -33,8 +33,7 @@
     "pretest": "npm run lint",
     "test": "npm run test:coverage",
     "prepare": "npm run build",
-    "release": "standard-version",
-    "defaults": "webpack-defaults"
+    "release": "standard-version"
   },
   "files": [
     "dist"
@@ -47,7 +46,7 @@
     "cssesc": "^3.0.0",
     "icss-utils": "^5.1.0",
     "loader-utils": "^2.0.0",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.8",
     "postcss-modules-extract-imports": "^3.0.0",
     "postcss-modules-local-by-default": "^4.0.0",
     "postcss-modules-scope": "^3.0.0",
@@ -57,20 +56,19 @@
     "semver": "^7.3.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.17",
-    "@babel/core": "^7.12.17",
-    "@babel/preset-env": "^7.12.17",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
-    "@webpack-contrib/defaults": "^6.3.0",
+    "@babel/cli": "^7.13.10",
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
     "babel-jest": "^26.6.3",
     "cross-env": "^7.0.3",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "es-check": "^5.2.0",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^7.2.0",
+    "es-check": "^5.2.3",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-import": "^2.22.1",
     "file-loader": "^6.2.0",
     "husky": "^4.3.8",
@@ -79,7 +77,7 @@
     "less-loader": "^7.1.0",
     "lint-staged": "^10.5.4",
     "memfs": "^3.2.0",
-    "mini-css-extract-plugin": "^1.3.8",
+    "mini-css-extract-plugin": "^1.3.9",
     "npm-run-all": "^4.1.5",
     "postcss-loader": "^4.0.4",
     "postcss-preset-env": "^6.7.0",
@@ -92,7 +90,7 @@
     "stylus": "^0.54.8",
     "stylus-loader": "^4.3.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.23.0"
+    "webpack": "^5.24.4"
   },
   "keywords": [
     "webpack",

src/index.js

@@ -26,6 +26,7 @@ import {
   getModulesPlugins,
   normalizeSourceMap,
   sort,
+  combineRequests,
 } from "./utils";
 
 export default async function loader(content, map, meta) {
@@ -79,7 +80,7 @@ export default async function loader(content, map, meta) {
         urlHandler: (url) =>
           stringifyRequest(
             this,
-            getPreRequester(this)(options.importLoaders) + url
+            combineRequests(getPreRequester(this)(options.importLoaders), url)
           ),
       })
     );
@@ -131,7 +132,7 @@ export default async function loader(content, map, meta) {
         urlHandler: (url) =>
           stringifyRequest(
             this,
-            getPreRequester(this)(options.importLoaders) + url
+            combineRequests(getPreRequester(this)(options.importLoaders), url)
           ),
       })
     );

src/utils.js

@@ -703,6 +703,14 @@ function sort(a, b) {
   return a.index - b.index;
 }
 
+function combineRequests(preRequest, url) {
+  const idx = url.indexOf("!=!");
+
+  return idx !== -1
+    ? url.slice(0, idx + 3) + preRequest + url.slice(idx + 3)
+    : preRequest + url;
+}
+
 export {
   normalizeOptions,
   shouldUseModulesPlugins,
@@ -723,4 +731,5 @@ export {
   isUrlRequestable,
   sort,
   webpackIgnoreCommentRegexp,
+  combineRequests,
 };

test/__snapshots__/loader.test.js.snap

@@ -636,6 +636,111 @@ a[href=\\"\\" i] {
 
 exports[`loader should work with empty options: warnings 1`] = `Array []`;
 
+exports[`loader should work with inline module syntax: errors 1`] = `Array []`;
+
+exports[`loader should work with inline module syntax: module 1`] = `
+"// Imports
+import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"other.modules.css!=!-!../../src/index.js??[ident]!./index-loader-syntax.modules.css\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"plain.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax-sass.css\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_2___ from \\"other.modules.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax-sass.modules.css\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_3___ from \\"other.modules.css!=!-!../../src/index.js??[ident]!./index-loader-syntax.modules.css\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_4___ from \\"plain.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax.modules.css\\";
+import ___CSS_LOADER_AT_RULE_IMPORT_5___ from \\"other.modules.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax-sass.modules.css\\";
+var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_3___);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_4___);
+___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_5___);
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n  color: red;\\\\n}\\", \\"\\"]);
+// Exports
+export default ___CSS_LOADER_EXPORT___;
+"
+`;
+
+exports[`loader should work with inline module syntax: result 1`] = `
+Array [
+  Array [
+    "other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
+    "._1ZJhuRHDA53bY_Z4Qfm2b4 {
+  color: red;
+}
+
+.j3CQSVq_DdDvo0Ew74yQi {
+  color: white;
+}",
+    "",
+  ],
+  Array [
+    "plain.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.css",
+    ".baz {
+  width: 5px;
+}",
+    "",
+  ],
+  Array [
+    "other.modules.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.modules.css",
+    "._1fGl5mRxLFCqIet0X3JYrB > ._2pVMnENaxk1YmKug-4EMYF {
+  color: red;
+}",
+    "",
+  ],
+  Array [
+    "other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
+    "._1ZJhuRHDA53bY_Z4Qfm2b4 {
+  color: red;
+}
+
+.j3CQSVq_DdDvo0Ew74yQi {
+  color: white;
+}
+
+.B7fdaUjwJ3YVou1v7dYEE {
+  from: custom;
+}",
+    "",
+  ],
+  Array [
+    "other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
+    "._1ZJhuRHDA53bY_Z4Qfm2b4 {
+  color: red;
+}
+
+.j3CQSVq_DdDvo0Ew74yQi {
+  color: white;
+}
+
+.B7fdaUjwJ3YVou1v7dYEE {
+  from: custom;
+}",
+    "",
+  ],
+  Array [
+    "other.modules.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.modules.css",
+    "._1fGl5mRxLFCqIet0X3JYrB > ._2pVMnENaxk1YmKug-4EMYF {
+  color: red;
+}
+
+._1kK_VYa-N303wnLgpvL-7d {
+  from: custom;
+}",
+    "",
+  ],
+  Array [
+    "./index-loader-syntax.css",
+    ".a {
+  color: red;
+}",
+    "",
+  ],
+]
+`;
+
+exports[`loader should work with inline module syntax: warnings 1`] = `Array []`;
+
 exports[`loader should work with none AST metadata: errors 1`] = `Array []`;
 
 exports[`loader should work with none AST metadata: result 1`] = `

test/fixtures/index-loader-syntax-sass.css

@@ -0,0 +1,6 @@
+// Uses Sass syntax
+$width: 1px + 4px;
+
+.baz {
+    width: $width
+}

test/fixtures/index-loader-syntax-sass.modules.css

@@ -0,0 +1,8 @@
+$color: red;
+
+// Uses Sass syntax
+.foo {
+    > .bar {
+        color: $color;
+    }
+}

test/fixtures/index-loader-syntax.css

@@ -0,0 +1,11 @@
+@import 'other.modules.css!=!./index-loader-syntax.modules.css';
+@import 'plain.scss!=!./index-loader-syntax-sass.css';
+@import 'other.modules.scss!=!./index-loader-syntax-sass.modules.css';
+
+@import 'other.modules.css!=!./my-inline-loader!./index-loader-syntax.modules.css';
+@import 'plain.scss!=!./my-inline-loader!./index-loader-syntax.modules.css';
+@import 'other.modules.scss!=!./my-inline-loader!./index-loader-syntax-sass.modules.css';
+
+.a {
+    color: red;
+}

test/fixtures/index-loader-syntax.js

@@ -0,0 +1,5 @@
+import css from './index-loader-syntax.css';
+
+__export__ = css;
+
+export default css;

test/fixtures/index-loader-syntax.modules.css

@@ -0,0 +1,7 @@
+.foo {
+    color: red;
+}
+
+.blue {
+    color: white;
+}

test/fixtures/my-inline-loader/index.js

@@ -0,0 +1,3 @@
+module.exports = (content) => {
+    return `${content}\n.class { from: custom; }`;
+};

test/helpers/getExecutedCode.js

@@ -8,6 +8,10 @@ export default (asset, compiler, stats) => {
       // Todo remove after drop webpack@4
       // eslint-disable-next-line no-param-reassign
       module[0] = module[0].replace(/\?.*!/g, "?[ident]!");
+      // eslint-disable-next-line no-param-reassign
+      module[0] = module[0].replace(/!\.\/=!/g, "!=!");
+      // eslint-disable-next-line no-param-reassign
+      module[0] = module[0].replace(/\.\/(.+)!=!/g, "$1!=!");
 
       return module;
     });

test/loader.test.js

@@ -524,4 +524,39 @@ describe("loader", () => {
     expect(getWarnings(stats)).toMatchSnapshot("warnings");
     expect(getErrors(stats)).toMatchSnapshot("errors");
   });
+
+  it("should work with inline module syntax", async () => {
+    const compiler = getCompiler(
+      "./index-loader-syntax.js",
+      {},
+      {
+        module: {
+          rules: [
+            {
+              test: /\.s?[ca]ss$/i,
+              rules: [
+                {
+                  loader: path.resolve(__dirname, "../src"),
+                  options: { importLoaders: 1 },
+                },
+                {
+                  loader: "sass-loader",
+                },
+              ],
+            },
+          ],
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(getModuleSource("./index-loader-syntax.css", stats)).toMatchSnapshot(
+      "module"
+    );
+    expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
+      "result"
+    );
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
 });