Skip to content

Commit df15fa1

Browse files
alexander-akaitalexander-akait
authored
refactor: composes resolve options (#20117)
1 parent 7e7af04 commit df15fa1

File tree

11 files changed

+397
-278
lines changed

11 files changed

+397
-278
lines changed

‎lib/WebpackOptionsApply.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,9 @@ class WebpackOptionsApply extends OptionsApply {
127127
if (dependencyType === "url") {
128128
return callback(null, `asset ${request}`);
129129
} else if (
130-
dependencyType === "css-import" &&
130+
(dependencyType === "css-import" ||
131+
dependencyType === "css-import-local-module" ||
132+
dependencyType === "css-import-global-module") &&
131133
options.experiments.css
132134
) {
133135
return callback(null, `css-import ${request}`);
@@ -150,7 +152,9 @@ class WebpackOptionsApply extends OptionsApply {
150152
if (dependencyType === "url") {
151153
return callback(null, `asset ${request}`);
152154
} else if (
153-
dependencyType === "css-import" &&
155+
(dependencyType === "css-import" ||
156+
dependencyType === "css-import-local-module" ||
157+
dependencyType === "css-import-global-module") &&
154158
options.experiments.css
155159
) {
156160
return callback(null, `css-import ${request}`);

‎lib/config/defaults.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1881,8 +1881,8 @@ const getResolveDefaults = ({
18811881
styleConditions.push(mode === "development" ? "development" : "production");
18821882
styleConditions.push("style");
18831883

1884-
/** @type {NonNullable<ResolveOptions["byDependency"]>} */
1885-
(resolveOptions.byDependency)["css-import"] = {
1884+
/** @type {ResolveOptions} */
1885+
const cssResolveOptions = {
18861886
// We avoid using any main files because we have to be consistent with CSS `@import`
18871887
// and CSS `@import` does not handle `main` files in directories,
18881888
// you should always specify the full URL for styles
@@ -1892,6 +1892,17 @@ const getResolveDefaults = ({
18921892
extensions: [".css"],
18931893
preferRelative: true
18941894
};
1895+
1896+
/** @type {NonNullable<ResolveOptions["byDependency"]>} */
1897+
(resolveOptions.byDependency)["css-import"] = cssResolveOptions;
1898+
// For CSS modules, i.e. `.class { composes: className from "./style.css" }`
1899+
// We inherit for such constructions
1900+
/** @type {NonNullable<ResolveOptions["byDependency"]>} */
1901+
(resolveOptions.byDependency)["css-import-local-module"] =
1902+
cssResolveOptions;
1903+
/** @type {NonNullable<ResolveOptions["byDependency"]>} */
1904+
(resolveOptions.byDependency)["css-import-global-module"] =
1905+
cssResolveOptions;
18951906
}
18961907

18971908
return resolveOptions;

‎lib/css/CssParser.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1076,6 +1076,7 @@ class CssParser extends Parser {
10761076
const dep = new CssImportDependency(
10771077
url,
10781078
[start, newline],
1079+
mode === "local" || mode === "global" ? mode : undefined,
10791080
layer,
10801081
supports && supports.length > 0 ? supports : undefined,
10811082
media && media.length > 0 ? media : undefined
@@ -1249,13 +1250,19 @@ class CssParser extends Parser {
12491250
/** @type {IcssDefinition} */
12501251
(icssDefinitions.get(path));
12511252

1252-
path = definition.value.slice(1, -1);
1253+
path =
1254+
definition.value[0] === "'" || definition.value[0] === '"'
1255+
? definition.value.slice(1, -1)
1256+
: definition.value;
12531257
}
12541258

1255-
const dep = new CssIcssImportDependency(path, value, [
1256-
start,
1257-
end - 1
1258-
]);
1259+
const dep = new CssIcssImportDependency(
1260+
path,
1261+
[start, end - 1],
1262+
/** @type {"local" | "global"} */
1263+
(mode),
1264+
value
1265+
);
12591266
const { line: sl, column: sc } = locConverter.get(start);
12601267
const { line: el, column: ec } = locConverter.get(end - 1);
12611268
dep.setLoc(sl, sc, el, ec);
@@ -1607,8 +1614,10 @@ class CssParser extends Parser {
16071614
} else if (from[2] === false) {
16081615
const dep = new CssIcssImportDependency(
16091616
path.slice(1, -1),
1610-
name,
1611-
[customIdent[0], from[1] - 1]
1617+
[customIdent[0], from[1] - 1],
1618+
/** @type {"local" | "global"} */
1619+
(mode),
1620+
name
16121621
);
16131622
const { line: sl, column: sc } = locConverter.get(
16141623
customIdent[0]

‎lib/dependencies/CssIcssImportDependency.js‎

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
const makeSerializable = require("../util/makeSerializable");
99
const CssIcssExportDependency = require("./CssIcssExportDependency");
10+
const CssImportDependency = require("./CssImportDependency");
1011
const CssLocalIdentifierDependency = require("./CssLocalIdentifierDependency");
11-
const ModuleDependency = require("./ModuleDependency");
1212

1313
/** @typedef {import("webpack-sources").ReplaceSource} ReplaceSource */
1414
/** @typedef {import("../Dependency")} Dependency */
@@ -18,35 +18,30 @@ const ModuleDependency = require("./ModuleDependency");
1818
/** @typedef {import("../serialization/ObjectMiddleware").ObjectDeserializerContext} ObjectDeserializerContext */
1919
/** @typedef {import("../serialization/ObjectMiddleware").ObjectSerializerContext} ObjectSerializerContext */
2020

21-
class CssIcssImportDependency extends ModuleDependency {
21+
class CssIcssImportDependency extends CssImportDependency {
2222
/**
2323
* Example of dependency:
2424
*
2525
*:import('./style.css') { IMPORTED_NAME: v-primary }
2626
* @param {string} request request request path which needs resolving
27-
* @param {string} exportName export name
2827
* @param {Range} range the range of dependency
28+
* @param {"local" | "global"} mode mode of the parsed CSS
29+
* @param {string} exportName export name
2930
*/
30-
constructor(request, exportName, range) {
31-
super(request);
31+
constructor(request, range, mode, exportName) {
32+
super(request, range, mode);
3233
this.exportName = exportName;
33-
this.range = range;
3434
}
3535

3636
get type() {
3737
return "css :import";
3838
}
3939

40-
get category() {
41-
return "css-import";
42-
}
43-
4440
/**
4541
* @param {ObjectSerializerContext} context context
4642
*/
4743
serialize(context) {
4844
const { write } = context;
49-
write(this.range);
5045
write(this.exportName);
5146
super.serialize(context);
5247
}
@@ -56,14 +51,13 @@ class CssIcssImportDependency extends ModuleDependency {
5651
*/
5752
deserialize(context) {
5853
const { read } = context;
59-
this.range = read();
6054
this.exportName = read();
6155
super.deserialize(context);
6256
}
6357
}
6458

6559
CssIcssImportDependency.Template = class CssIcssImportDependencyTemplate extends (
66-
ModuleDependency.Template
60+
CssImportDependency.Template
6761
) {
6862
/**
6963
* @param {Dependency} dependency the dependency for which the template should be applied
@@ -79,36 +73,38 @@ CssIcssImportDependency.Template = class CssIcssImportDependencyTemplate extends
7973
(templateContext.moduleGraph.getModule(dep));
8074
let value;
8175

82-
for (const item of module.dependencies) {
83-
if (
84-
item instanceof CssLocalIdentifierDependency &&
85-
dep.exportName === item.name
86-
) {
87-
value = CssLocalIdentifierDependency.Template.getIdentifier(
88-
item.prefix,
89-
dep.exportName,
90-
{
91-
...templateContext,
92-
module
93-
}
76+
if (module) {
77+
for (const item of module.dependencies) {
78+
if (
79+
item instanceof CssLocalIdentifierDependency &&
80+
dep.exportName === item.name
81+
) {
82+
value = CssLocalIdentifierDependency.Template.getIdentifier(
83+
item.prefix,
84+
dep.exportName,
85+
{
86+
...templateContext,
87+
module
88+
}
89+
);
90+
break;
91+
} else if (
92+
item instanceof CssIcssExportDependency &&
93+
dep.exportName === item.name
94+
) {
95+
value = item.value;
96+
break;
97+
}
98+
}
99+
100+
if (!value) {
101+
throw new Error(
102+
`Imported '${dep.exportName}' name from '${dep.request}' not found`
94103
);
95-
break;
96-
} else if (
97-
item instanceof CssIcssExportDependency &&
98-
dep.exportName === item.name
99-
) {
100-
value = item.value;
101-
break;
102104
}
103-
}
104105

105-
if (!value) {
106-
throw new Error(
107-
`Imported '${dep.exportName}' name from '${dep.request}' not found`
108-
);
106+
source.replace(range[0], range[1], value);
109107
}
110-
111-
source.replace(range[0], range[1], value);
112108
}
113109
};
114110

‎lib/dependencies/CssImportDependency.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,15 @@ class CssImportDependency extends ModuleDependency {
2121
* \@import url("landscape.css") layer(forms) screen and (orientation: landscape) screen and (orientation: landscape);
2222
* @param {string} request request
2323
* @param {Range} range range of the argument
24-
* @param {string | undefined} layer layer
25-
* @param {string | undefined} supports list of supports conditions
26-
* @param {string | undefined} media list of media conditions
24+
* @param {"local" | "global"=} mode mode of the parsed CSS
25+
* @param {string=} layer layer
26+
* @param {string=} supports list of supports conditions
27+
* @param {string=} media list of media conditions
2728
*/
28-
constructor(request, range, layer, supports, media) {
29+
constructor(request, range, mode, layer, supports, media) {
2930
super(request);
3031
this.range = range;
32+
this.mode = mode;
3133
this.layer = layer;
3234
this.supports = supports;
3335
this.media = media;
@@ -38,7 +40,7 @@ class CssImportDependency extends ModuleDependency {
3840
}
3941

4042
get category() {
41-
return "css-import";
43+
return `css-import${this.mode ? `-${this.mode}-module` : ""}`;
4244
}
4345

4446
/**
@@ -47,6 +49,10 @@ class CssImportDependency extends ModuleDependency {
4749
getResourceIdentifier() {
4850
let str = `context${this._context || ""}|module${this.request}`;
4951

52+
if (this.mode) {
53+
str += `|mode${this.mode}`;
54+
}
55+
5056
if (this.layer) {
5157
str += `|layer${this.layer}`;
5258
}
@@ -67,6 +73,8 @@ class CssImportDependency extends ModuleDependency {
6773
*/
6874
serialize(context) {
6975
const { write } = context;
76+
write(this.range);
77+
write(this.mode);
7078
write(this.layer);
7179
write(this.supports);
7280
write(this.media);
@@ -78,6 +86,8 @@ class CssImportDependency extends ModuleDependency {
7886
*/
7987
deserialize(context) {
8088
const { read } = context;
89+
this.range = read();
90+
this.mode = read();
8191
this.layer = read();
8292
this.supports = read();
8393
this.media = read();

‎test/Defaults.unittest.js‎

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2309,8 +2309,7 @@ describe("snapshots", () => {
23092309
+ "localIdentName": "[uniqueName]-[id]-[local]",
23102310
+ },
23112311
@@ ... @@
2312-
+ },
2313-
@@ ... @@
2312+
+ },
23142313
+ "css": Object {
23152314
+ "import": true,
23162315
+ "namedExports": true,
@@ -2338,6 +2337,9 @@ describe("snapshots", () => {
23382337
+ "hashDigestLength": 16,
23392338
+ "hashFunction": "xxhash64",
23402339
@@ ... @@
2340+
+ "...",
2341+
+ ],
2342+
+ },
23412343
+ "css-import": Object {
23422344
+ "conditionNames": Array [
23432345
+ "webpack",
@@ -2349,6 +2351,37 @@ describe("snapshots", () => {
23492351
+ ],
23502352
+ "mainFields": Array [
23512353
+ "style",
2354+
@@ ... @@
2355+
+ "mainFiles": Array [],
2356+
+ "preferRelative": true,
2357+
@@ ... @@
2358+
+ "css-import-global-module": Object {
2359+
+ "conditionNames": Array [
2360+
+ "webpack",
2361+
+ "production",
2362+
+ "style",
2363+
+ ],
2364+
+ "extensions": Array [
2365+
+ ".css",
2366+
+ ],
2367+
+ "mainFields": Array [
2368+
+ "style",
2369+
+ "...",
2370+
+ ],
2371+
+ "mainFiles": Array [],
2372+
+ "preferRelative": true,
2373+
+ },
2374+
+ "css-import-local-module": Object {
2375+
+ "conditionNames": Array [
2376+
+ "webpack",
2377+
+ "production",
2378+
+ "style",
2379+
+ ],
2380+
+ "extensions": Array [
2381+
+ ".css",
2382+
+ ],
2383+
+ "mainFields": Array [
2384+
+ "style",
23522385
+ "...",
23532386
+ ],
23542387
+ "mainFiles": Array [],
@@ -2822,10 +2855,23 @@ describe("snapshots", () => {
28222855
+ "hashDigestLength": 16,
28232856
+ "hashFunction": "xxhash64",
28242857
@@ ... @@
2858+
+ "css-import": Object {
2859+
+ "conditionNames": Array [
2860+
+ "webpack",
2861+
+ "production",
2862+
+ "style",
2863+
+ ],
2864+
+ "extensions": Array [
2865+
+ ".css",
2866+
+ ],
2867+
+ "mainFields": Array [
2868+
+ "style",
28252869
+ "...",
28262870
+ ],
2871+
+ "mainFiles": Array [],
2872+
+ "preferRelative": true,
28272873
+ },
2828-
+ "css-import": Object {
2874+
+ "css-import-global-module": Object {
28292875
+ "conditionNames": Array [
28302876
+ "webpack",
28312877
+ "production",
@@ -2836,9 +2882,27 @@ describe("snapshots", () => {
28362882
+ ],
28372883
+ "mainFields": Array [
28382884
+ "style",
2839-
@@ ... @@
2885+
+ "...",
2886+
+ ],
28402887
+ "mainFiles": Array [],
28412888
+ "preferRelative": true,
2889+
+ },
2890+
+ "css-import-local-module": Object {
2891+
+ "conditionNames": Array [
2892+
+ "webpack",
2893+
+ "production",
2894+
+ "style",
2895+
+ ],
2896+
+ "extensions": Array [
2897+
+ ".css",
2898+
+ ],
2899+
+ "mainFields": Array [
2900+
+ "style",
2901+
+ "...",
2902+
+ ],
2903+
+ "mainFiles": Array [],
2904+
+ "preferRelative": true,
2905+
+ },
28422906
@@ ... @@
28432907
- "<cwd>/node_modules/",
28442908
+ /^(.+?[\\\\/]node_modules[\\\\/])/,

0 commit comments

Comments
 (0)