Skip to content

Commit 3f49ed0

Browse files
alexander-akaitalexander-akait
authored
fix: inline loader syntax in @import and modules
1 parent 5e18d7e commit 3f49ed0

13 files changed

+7494
-6057
lines changed

‎package-lock.json

+7,286-6,041
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+12-14
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,7 @@
3333
"pretest": "npm run lint",
3434
"test": "npm run test:coverage",
3535
"prepare": "npm run build",
36-
"release": "standard-version",
37-
"defaults": "webpack-defaults"
36+
"release": "standard-version"
3837
},
3938
"files": [
4039
"dist"
@@ -47,7 +46,7 @@
4746
"cssesc": "^3.0.0",
4847
"icss-utils": "^5.1.0",
4948
"loader-utils": "^2.0.0",
50-
"postcss": "^8.2.6",
49+
"postcss": "^8.2.8",
5150
"postcss-modules-extract-imports": "^3.0.0",
5251
"postcss-modules-local-by-default": "^4.0.0",
5352
"postcss-modules-scope": "^3.0.0",
@@ -57,20 +56,19 @@
5756
"semver": "^7.3.4"
5857
},
5958
"devDependencies": {
60-
"@babel/cli": "^7.12.17",
61-
"@babel/core": "^7.12.17",
62-
"@babel/preset-env": "^7.12.17",
63-
"@commitlint/cli": "^11.0.0",
64-
"@commitlint/config-conventional": "^11.0.0",
65-
"@webpack-contrib/defaults": "^6.3.0",
59+
"@babel/cli": "^7.13.10",
60+
"@babel/core": "^7.13.10",
61+
"@babel/preset-env": "^7.13.10",
62+
"@commitlint/cli": "^12.0.1",
63+
"@commitlint/config-conventional": "^12.0.1",
6664
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
6765
"babel-jest": "^26.6.3",
6866
"cross-env": "^7.0.3",
6967
"del": "^6.0.0",
7068
"del-cli": "^3.0.1",
71-
"es-check": "^5.2.0",
72-
"eslint": "^7.20.0",
73-
"eslint-config-prettier": "^7.2.0",
69+
"es-check": "^5.2.3",
70+
"eslint": "^7.21.0",
71+
"eslint-config-prettier": "^8.1.0",
7472
"eslint-plugin-import": "^2.22.1",
7573
"file-loader": "^6.2.0",
7674
"husky": "^4.3.8",
@@ -79,7 +77,7 @@
7977
"less-loader": "^7.1.0",
8078
"lint-staged": "^10.5.4",
8179
"memfs": "^3.2.0",
82-
"mini-css-extract-plugin": "^1.3.8",
80+
"mini-css-extract-plugin": "^1.3.9",
8381
"npm-run-all": "^4.1.5",
8482
"postcss-loader": "^4.0.4",
8583
"postcss-preset-env": "^6.7.0",
@@ -92,7 +90,7 @@
9290
"stylus": "^0.54.8",
9391
"stylus-loader": "^4.3.0",
9492
"url-loader": "^4.1.1",
95-
"webpack": "^5.23.0"
93+
"webpack": "^5.24.4"
9694
},
9795
"keywords": [
9896
"webpack",

‎src/index.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
getModulesPlugins,
2727
normalizeSourceMap,
2828
sort,
29+
combineRequests,
2930
} from "./utils";
3031

3132
export default async function loader(content, map, meta) {
@@ -79,7 +80,7 @@ export default async function loader(content, map, meta) {
7980
urlHandler: (url) =>
8081
stringifyRequest(
8182
this,
82-
getPreRequester(this)(options.importLoaders) + url
83+
combineRequests(getPreRequester(this)(options.importLoaders), url)
8384
),
8485
})
8586
);
@@ -131,7 +132,7 @@ export default async function loader(content, map, meta) {
131132
urlHandler: (url) =>
132133
stringifyRequest(
133134
this,
134-
getPreRequester(this)(options.importLoaders) + url
135+
combineRequests(getPreRequester(this)(options.importLoaders), url)
135136
),
136137
})
137138
);

‎src/utils.js

+9
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,14 @@ function sort(a, b) {
703703
return a.index - b.index;
704704
}
705705

706+
function combineRequests(preRequest, url) {
707+
const idx = url.indexOf("!=!");
708+
709+
return idx !== -1
710+
? url.slice(0, idx + 3) + preRequest + url.slice(idx + 3)
711+
: preRequest + url;
712+
}
713+
706714
export {
707715
normalizeOptions,
708716
shouldUseModulesPlugins,
@@ -723,4 +731,5 @@ export {
723731
isUrlRequestable,
724732
sort,
725733
webpackIgnoreCommentRegexp,
734+
combineRequests,
726735
};

‎test/__snapshots__/loader.test.js.snap

+105
Original file line numberDiff line numberDiff line change
@@ -636,6 +636,111 @@ a[href=\\"\\" i] {
636636
637637
exports[`loader should work with empty options: warnings 1`] = `Array []`;
638638
639+
exports[`loader should work with inline module syntax: errors 1`] = `Array []`;
640+
641+
exports[`loader should work with inline module syntax: module 1`] = `
642+
"// Imports
643+
import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\";
644+
import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"other.modules.css!=!-!../../src/index.js??[ident]!./index-loader-syntax.modules.css\\";
645+
import ___CSS_LOADER_AT_RULE_IMPORT_1___ from \\"plain.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax-sass.css\\";
646+
import ___CSS_LOADER_AT_RULE_IMPORT_2___ from \\"other.modules.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax-sass.modules.css\\";
647+
import ___CSS_LOADER_AT_RULE_IMPORT_3___ from \\"other.modules.css!=!-!../../src/index.js??[ident]!./index-loader-syntax.modules.css\\";
648+
import ___CSS_LOADER_AT_RULE_IMPORT_4___ from \\"plain.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax.modules.css\\";
649+
import ___CSS_LOADER_AT_RULE_IMPORT_5___ from \\"other.modules.scss!=!-!../../src/index.js??[ident]!./index-loader-syntax-sass.modules.css\\";
650+
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
651+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
652+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_1___);
653+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_2___);
654+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_3___);
655+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_4___);
656+
___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_5___);
657+
// Module
658+
___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n color: red;\\\\n}\\", \\"\\"]);
659+
// Exports
660+
export default ___CSS_LOADER_EXPORT___;
661+
"
662+
`;
663+
664+
exports[`loader should work with inline module syntax: result 1`] = `
665+
Array [
666+
Array [
667+
"other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
668+
"._1ZJhuRHDA53bY_Z4Qfm2b4 {
669+
color: red;
670+
}
671+
672+
.j3CQSVq_DdDvo0Ew74yQi {
673+
color: white;
674+
}",
675+
"",
676+
],
677+
Array [
678+
"plain.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.css",
679+
".baz {
680+
width: 5px;
681+
}",
682+
"",
683+
],
684+
Array [
685+
"other.modules.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.modules.css",
686+
"._1fGl5mRxLFCqIet0X3JYrB > ._2pVMnENaxk1YmKug-4EMYF {
687+
color: red;
688+
}",
689+
"",
690+
],
691+
Array [
692+
"other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
693+
"._1ZJhuRHDA53bY_Z4Qfm2b4 {
694+
color: red;
695+
}
696+
697+
.j3CQSVq_DdDvo0Ew74yQi {
698+
color: white;
699+
}
700+
701+
.B7fdaUjwJ3YVou1v7dYEE {
702+
from: custom;
703+
}",
704+
"",
705+
],
706+
Array [
707+
"other.modules.css!=!../../src/index.js?[ident]!./index-loader-syntax.modules.css",
708+
"._1ZJhuRHDA53bY_Z4Qfm2b4 {
709+
color: red;
710+
}
711+
712+
.j3CQSVq_DdDvo0Ew74yQi {
713+
color: white;
714+
}
715+
716+
.B7fdaUjwJ3YVou1v7dYEE {
717+
from: custom;
718+
}",
719+
"",
720+
],
721+
Array [
722+
"other.modules.scss!=!../../src/index.js?[ident]!./index-loader-syntax-sass.modules.css",
723+
"._1fGl5mRxLFCqIet0X3JYrB > ._2pVMnENaxk1YmKug-4EMYF {
724+
color: red;
725+
}
726+
727+
._1kK_VYa-N303wnLgpvL-7d {
728+
from: custom;
729+
}",
730+
"",
731+
],
732+
Array [
733+
"./index-loader-syntax.css",
734+
".a {
735+
color: red;
736+
}",
737+
"",
738+
],
739+
]
740+
`;
741+
742+
exports[`loader should work with inline module syntax: warnings 1`] = `Array []`;
743+
639744
exports[`loader should work with none AST metadata: errors 1`] = `Array []`;
640745
641746
exports[`loader should work with none AST metadata: result 1`] = `

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Uses Sass syntax
2+
$width: 1px + 4px;
3+
4+
.baz {
5+
width: $width
6+
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$color: red;
2+
3+
// Uses Sass syntax
4+
.foo {
5+
> .bar {
6+
color: $color;
7+
}
8+
}

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import 'other.modules.css!=!./index-loader-syntax.modules.css';
2+
@import 'plain.scss!=!./index-loader-syntax-sass.css';
3+
@import 'other.modules.scss!=!./index-loader-syntax-sass.modules.css';
4+
5+
@import 'other.modules.css!=!./my-inline-loader!./index-loader-syntax.modules.css';
6+
@import 'plain.scss!=!./my-inline-loader!./index-loader-syntax.modules.css';
7+
@import 'other.modules.scss!=!./my-inline-loader!./index-loader-syntax-sass.modules.css';
8+
9+
.a {
10+
color: red;
11+
}

‎test/fixtures/index-loader-syntax.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import css from './index-loader-syntax.css';
2+
3+
__export__ = css;
4+
5+
export default css;

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.foo {
2+
color: red;
3+
}
4+
5+
.blue {
6+
color: white;
7+
}

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

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

‎test/helpers/getExecutedCode.js

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ export default (asset, compiler, stats) => {
88
// Todo remove after drop webpack@4
99
// eslint-disable-next-line no-param-reassign
1010
module[0] = module[0].replace(/\?.*!/g, "?[ident]!");
11+
// eslint-disable-next-line no-param-reassign
12+
module[0] = module[0].replace(/!\.\/=!/g, "!=!");
13+
// eslint-disable-next-line no-param-reassign
14+
module[0] = module[0].replace(/\.\/(.+)!=!/g, "$1!=!");
1115

1216
return module;
1317
});

‎test/loader.test.js

+35
Original file line numberDiff line numberDiff line change
@@ -524,4 +524,39 @@ describe("loader", () => {
524524
expect(getWarnings(stats)).toMatchSnapshot("warnings");
525525
expect(getErrors(stats)).toMatchSnapshot("errors");
526526
});
527+
528+
it("should work with inline module syntax", async () => {
529+
const compiler = getCompiler(
530+
"./index-loader-syntax.js",
531+
{},
532+
{
533+
module: {
534+
rules: [
535+
{
536+
test: /\.s?[ca]ss$/i,
537+
rules: [
538+
{
539+
loader: path.resolve(__dirname, "../src"),
540+
options: { importLoaders: 1 },
541+
},
542+
{
543+
loader: "sass-loader",
544+
},
545+
],
546+
},
547+
],
548+
},
549+
}
550+
);
551+
const stats = await compile(compiler);
552+
553+
expect(getModuleSource("./index-loader-syntax.css", stats)).toMatchSnapshot(
554+
"module"
555+
);
556+
expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot(
557+
"result"
558+
);
559+
expect(getWarnings(stats)).toMatchSnapshot("warnings");
560+
expect(getErrors(stats)).toMatchSnapshot("errors");
561+
});
527562
});

0 commit comments

Comments
 (0)