Skip to content

Commit 5f0874b

Browse files
xiaoxiaojxxiaoxiaojx
authored
fix: make asset modules available in JS when referenced from CSS and lazy JS (#20801)
1 parent b63ab37 commit 5f0874b

10 files changed

Lines changed: 126 additions & 60 deletions

File tree

‎.changeset/fix-css-lazy-asset-resource.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"webpack": patch
3+
---
4+
5+
Make asset modules available in JS context when referenced from both CSS and a lazily compiled JS chunk.

‎lib/NormalModule.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1750,6 +1750,15 @@ class NormalModule extends Module {
17501750
/** @type {string} */
17511751
(buildInfo.hash)
17521752
);
1753+
// Clear cached source types and re-compute so that changes in incoming
1754+
// connections (e.g. asset module newly referenced from JS via lazy
1755+
// compilation) are reflected in the hash and trigger code generation
1756+
// cache invalidation.
1757+
// https://github.com/webpack/webpack/issues/20800
1758+
this._sourceTypes = undefined;
1759+
for (const type of this.getSourceTypes()) {
1760+
hash.update(type);
1761+
}
17531762
/** @type {Generator} */
17541763
(this.generator).updateHash(hash, {
17551764
module: this,

‎test/configCases/css/local-ident-name/__snapshots__/ConfigCacheTest.snap‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@ Object {
1414

1515
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 2`] = `
1616
Object {
17-
"btn--info_is-disabled_1": "_15e922b2c97f47f17c54",
18-
"btn-info_is-disabled": "_15e922b2c97f47f17c54",
19-
"color-red": "--_15e922b2c97f47f17c54",
17+
"btn--info_is-disabled_1": "_0dd29f73dea88606ae8e",
18+
"btn-info_is-disabled": "_0dd29f73dea88606ae8e",
19+
"color-red": "--_0dd29f73dea88606ae8e",
2020
"foo": "bar",
21-
"foo_bar": "_15e922b2c97f47f17c54",
21+
"foo_bar": "_0dd29f73dea88606ae8e",
2222
"my-btn-info_is-disabled": "value",
23-
"simple": "_15e922b2c97f47f17c54",
23+
"simple": "_0dd29f73dea88606ae8e",
2424
}
2525
`;
2626

2727
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 3`] = `
2828
Object {
29-
"btn--info_is-disabled_1": "_04a0a4472ff4d45a1166-btn--info_is-disabled_1",
30-
"btn-info_is-disabled": "_04a0a4472ff4d45a1166-btn-info_is-disabled",
31-
"color-red": "--_04a0a4472ff4d45a1166-color-red",
29+
"btn--info_is-disabled_1": "_26658d651495575453a9-btn--info_is-disabled_1",
30+
"btn-info_is-disabled": "_26658d651495575453a9-btn-info_is-disabled",
31+
"color-red": "--_26658d651495575453a9-color-red",
3232
"foo": "bar",
33-
"foo_bar": "_04a0a4472ff4d45a1166-foo_bar",
33+
"foo_bar": "_26658d651495575453a9-foo_bar",
3434
"my-btn-info_is-disabled": "value",
35-
"simple": "_04a0a4472ff4d45a1166-simple",
35+
"simple": "_26658d651495575453a9-simple",
3636
}
3737
`;
3838

@@ -86,13 +86,13 @@ Object {
8686

8787
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 8`] = `
8888
Object {
89-
"btn--info_is-disabled_1": "ba1a7d6d0bb21c7b0653-btn--info_is-disabled_1",
90-
"btn-info_is-disabled": "ba1a7d6d0bb21c7b0653-btn-info_is-disabled",
91-
"color-red": "--ba1a7d6d0bb21c7b0653-color-red",
89+
"btn--info_is-disabled_1": "_78c918141017246fe472-btn--info_is-disabled_1",
90+
"btn-info_is-disabled": "_78c918141017246fe472-btn-info_is-disabled",
91+
"color-red": "--_78c918141017246fe472-color-red",
9292
"foo": "bar",
93-
"foo_bar": "ba1a7d6d0bb21c7b0653-foo_bar",
93+
"foo_bar": "_78c918141017246fe472-foo_bar",
9494
"my-btn-info_is-disabled": "value",
95-
"simple": "ba1a7d6d0bb21c7b0653-simple",
95+
"simple": "_78c918141017246fe472-simple",
9696
}
9797
`;
9898

@@ -110,25 +110,25 @@ Object {
110110

111111
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 10`] = `
112112
Object {
113-
"btn--info_is-disabled_1": "a02ad227dd548bb84a61",
114-
"btn-info_is-disabled": "a02ad227dd548bb84a61",
115-
"color-red": "--a02ad227dd548bb84a61",
113+
"btn--info_is-disabled_1": "fd8953d7b68db99277a0",
114+
"btn-info_is-disabled": "fd8953d7b68db99277a0",
115+
"color-red": "--fd8953d7b68db99277a0",
116116
"foo": "bar",
117-
"foo_bar": "a02ad227dd548bb84a61",
117+
"foo_bar": "fd8953d7b68db99277a0",
118118
"my-btn-info_is-disabled": "value",
119-
"simple": "a02ad227dd548bb84a61",
119+
"simple": "fd8953d7b68db99277a0",
120120
}
121121
`;
122122

123123
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 11`] = `
124124
Object {
125-
"btn--info_is-disabled_1": "_81378ae70e35838d73e5-btn--info_is-disabled_1",
126-
"btn-info_is-disabled": "_81378ae70e35838d73e5-btn-info_is-disabled",
127-
"color-red": "--_81378ae70e35838d73e5-color-red",
125+
"btn--info_is-disabled_1": "_54bf27341e3b9f7be65e-btn--info_is-disabled_1",
126+
"btn-info_is-disabled": "_54bf27341e3b9f7be65e-btn-info_is-disabled",
127+
"color-red": "--_54bf27341e3b9f7be65e-color-red",
128128
"foo": "bar",
129-
"foo_bar": "_81378ae70e35838d73e5-foo_bar",
129+
"foo_bar": "_54bf27341e3b9f7be65e-foo_bar",
130130
"my-btn-info_is-disabled": "value",
131-
"simple": "_81378ae70e35838d73e5-simple",
131+
"simple": "_54bf27341e3b9f7be65e-simple",
132132
}
133133
`;
134134

@@ -182,12 +182,12 @@ Object {
182182

183183
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 16`] = `
184184
Object {
185-
"btn--info_is-disabled_1": "_68c15c0000bcbbd61f4d-btn--info_is-disabled_1",
186-
"btn-info_is-disabled": "_68c15c0000bcbbd61f4d-btn-info_is-disabled",
187-
"color-red": "--_68c15c0000bcbbd61f4d-color-red",
185+
"btn--info_is-disabled_1": "_31b7efe08dce677d1ef4-btn--info_is-disabled_1",
186+
"btn-info_is-disabled": "_31b7efe08dce677d1ef4-btn-info_is-disabled",
187+
"color-red": "--_31b7efe08dce677d1ef4-color-red",
188188
"foo": "bar",
189-
"foo_bar": "_68c15c0000bcbbd61f4d-foo_bar",
189+
"foo_bar": "_31b7efe08dce677d1ef4-foo_bar",
190190
"my-btn-info_is-disabled": "value",
191-
"simple": "_68c15c0000bcbbd61f4d-simple",
191+
"simple": "_31b7efe08dce677d1ef4-simple",
192192
}
193193
`;

‎test/configCases/css/local-ident-name/__snapshots__/ConfigTest.snap‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@ Object {
1414

1515
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 2`] = `
1616
Object {
17-
"btn--info_is-disabled_1": "_15e922b2c97f47f17c54",
18-
"btn-info_is-disabled": "_15e922b2c97f47f17c54",
19-
"color-red": "--_15e922b2c97f47f17c54",
17+
"btn--info_is-disabled_1": "_0dd29f73dea88606ae8e",
18+
"btn-info_is-disabled": "_0dd29f73dea88606ae8e",
19+
"color-red": "--_0dd29f73dea88606ae8e",
2020
"foo": "bar",
21-
"foo_bar": "_15e922b2c97f47f17c54",
21+
"foo_bar": "_0dd29f73dea88606ae8e",
2222
"my-btn-info_is-disabled": "value",
23-
"simple": "_15e922b2c97f47f17c54",
23+
"simple": "_0dd29f73dea88606ae8e",
2424
}
2525
`;
2626

2727
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 3`] = `
2828
Object {
29-
"btn--info_is-disabled_1": "_04a0a4472ff4d45a1166-btn--info_is-disabled_1",
30-
"btn-info_is-disabled": "_04a0a4472ff4d45a1166-btn-info_is-disabled",
31-
"color-red": "--_04a0a4472ff4d45a1166-color-red",
29+
"btn--info_is-disabled_1": "_26658d651495575453a9-btn--info_is-disabled_1",
30+
"btn-info_is-disabled": "_26658d651495575453a9-btn-info_is-disabled",
31+
"color-red": "--_26658d651495575453a9-color-red",
3232
"foo": "bar",
33-
"foo_bar": "_04a0a4472ff4d45a1166-foo_bar",
33+
"foo_bar": "_26658d651495575453a9-foo_bar",
3434
"my-btn-info_is-disabled": "value",
35-
"simple": "_04a0a4472ff4d45a1166-simple",
35+
"simple": "_26658d651495575453a9-simple",
3636
}
3737
`;
3838

@@ -86,13 +86,13 @@ Object {
8686

8787
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 8`] = `
8888
Object {
89-
"btn--info_is-disabled_1": "ba1a7d6d0bb21c7b0653-btn--info_is-disabled_1",
90-
"btn-info_is-disabled": "ba1a7d6d0bb21c7b0653-btn-info_is-disabled",
91-
"color-red": "--ba1a7d6d0bb21c7b0653-color-red",
89+
"btn--info_is-disabled_1": "_78c918141017246fe472-btn--info_is-disabled_1",
90+
"btn-info_is-disabled": "_78c918141017246fe472-btn-info_is-disabled",
91+
"color-red": "--_78c918141017246fe472-color-red",
9292
"foo": "bar",
93-
"foo_bar": "ba1a7d6d0bb21c7b0653-foo_bar",
93+
"foo_bar": "_78c918141017246fe472-foo_bar",
9494
"my-btn-info_is-disabled": "value",
95-
"simple": "ba1a7d6d0bb21c7b0653-simple",
95+
"simple": "_78c918141017246fe472-simple",
9696
}
9797
`;
9898

@@ -110,25 +110,25 @@ Object {
110110

111111
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 10`] = `
112112
Object {
113-
"btn--info_is-disabled_1": "a02ad227dd548bb84a61",
114-
"btn-info_is-disabled": "a02ad227dd548bb84a61",
115-
"color-red": "--a02ad227dd548bb84a61",
113+
"btn--info_is-disabled_1": "fd8953d7b68db99277a0",
114+
"btn-info_is-disabled": "fd8953d7b68db99277a0",
115+
"color-red": "--fd8953d7b68db99277a0",
116116
"foo": "bar",
117-
"foo_bar": "a02ad227dd548bb84a61",
117+
"foo_bar": "fd8953d7b68db99277a0",
118118
"my-btn-info_is-disabled": "value",
119-
"simple": "a02ad227dd548bb84a61",
119+
"simple": "fd8953d7b68db99277a0",
120120
}
121121
`;
122122

123123
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 11`] = `
124124
Object {
125-
"btn--info_is-disabled_1": "_81378ae70e35838d73e5-btn--info_is-disabled_1",
126-
"btn-info_is-disabled": "_81378ae70e35838d73e5-btn-info_is-disabled",
127-
"color-red": "--_81378ae70e35838d73e5-color-red",
125+
"btn--info_is-disabled_1": "_54bf27341e3b9f7be65e-btn--info_is-disabled_1",
126+
"btn-info_is-disabled": "_54bf27341e3b9f7be65e-btn-info_is-disabled",
127+
"color-red": "--_54bf27341e3b9f7be65e-color-red",
128128
"foo": "bar",
129-
"foo_bar": "_81378ae70e35838d73e5-foo_bar",
129+
"foo_bar": "_54bf27341e3b9f7be65e-foo_bar",
130130
"my-btn-info_is-disabled": "value",
131-
"simple": "_81378ae70e35838d73e5-simple",
131+
"simple": "_54bf27341e3b9f7be65e-simple",
132132
}
133133
`;
134134

@@ -182,12 +182,12 @@ Object {
182182

183183
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 16`] = `
184184
Object {
185-
"btn--info_is-disabled_1": "_68c15c0000bcbbd61f4d-btn--info_is-disabled_1",
186-
"btn-info_is-disabled": "_68c15c0000bcbbd61f4d-btn-info_is-disabled",
187-
"color-red": "--_68c15c0000bcbbd61f4d-color-red",
185+
"btn--info_is-disabled_1": "_31b7efe08dce677d1ef4-btn--info_is-disabled_1",
186+
"btn-info_is-disabled": "_31b7efe08dce677d1ef4-btn-info_is-disabled",
187+
"color-red": "--_31b7efe08dce677d1ef4-color-red",
188188
"foo": "bar",
189-
"foo_bar": "_68c15c0000bcbbd61f4d-foo_bar",
189+
"foo_bar": "_31b7efe08dce677d1ef4-foo_bar",
190190
"my-btn-info_is-disabled": "value",
191-
"simple": "_68c15c0000bcbbd61f4d-simple",
191+
"simple": "_31b7efe08dce677d1ef4-simple",
192192
}
193193
`;

‎test/hotCases/css/lazy-compilation-asset/file.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
asset-content

‎test/hotCases/css/lazy-compilation-asset/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import "./style.css";
2+
3+
it("should make asset available in both CSS and lazy JS chunk", (done) => {
4+
const promise = import("./mod.js");
5+
NEXT_DEFERRED(
6+
require("../../update")(done, true, () => {
7+
promise.then((mod) => {
8+
expect(mod.default).toContain("file.txt");
9+
done();
10+
}, done);
11+
})
12+
);
13+
});

‎test/hotCases/css/lazy-compilation-asset/mod.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import file from "./file.txt";
2+
export default file;

‎test/hotCases/css/lazy-compilation-asset/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.font {
2+
src: url("./file.txt");
3+
}

‎test/hotCases/css/lazy-compilation-asset/test.filter.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
"use strict";
2+
3+
module.exports = (config) => config.target === "web";

‎test/hotCases/css/lazy-compilation-asset/webpack.config.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use strict";
2+
3+
/** @type {import("../../../../").Configuration} */
4+
module.exports = {
5+
mode: "development",
6+
devtool: false,
7+
output: {
8+
cssFilename: "[name].css",
9+
cssChunkFilename: "[name].css",
10+
assetModuleFilename: "assets/[name][ext]"
11+
},
12+
experiments: {
13+
css: true,
14+
lazyCompilation: {
15+
entries: false,
16+
imports: true
17+
}
18+
},
19+
module: {
20+
rules: [
21+
{
22+
test: /\.txt$/,
23+
type: "asset/resource"
24+
}
25+
]
26+
},
27+
node: {
28+
__dirname: false
29+
}
30+
};

0 commit comments

Comments
 (0)