Skip to content

Commit 1ef747c

Browse files
xiaoxiaojxxiaoxiaojx
authored
fix: CSS @import should inherit parent's exportType over parser config (#20838)
1 parent 485d4ce commit 1ef747c

8 files changed

Lines changed: 134 additions & 47 deletions

File tree

‎.changeset/fix-css-import-inherit-parent-export-type.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+
CSS @import now inherits the parent module's exportType, so a file configured as "text" correctly creates a style tag when @imported by a "style" parent.

‎lib/css/CssModulesPlugin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ class CssModulesPlugin {
405405
supports: dependency.supports,
406406
media: dependency.media,
407407
inheritance,
408-
exportType: exportType || parent.exportType
408+
exportType: parent.exportType || exportType
409409
})
410410
);
411411
}

‎test/configCases/css/charset/__snapshots__/ConfigCacheTest.snap‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -152,49 +152,58 @@ exports[`ConfigCacheTestCases css charset exported tests should handle \`@charse
152152

153153
exports[`ConfigCacheTestCases css charset exported tests should handle \`@charset\` at-rule 4`] = `
154154
"@charset \\"UTF-8\\";
155-
/*!*******************************************************!*\\\\
156-
!*** css ./import-nested.text.css (exportType: text) ***!
157-
\\\\*******************************************************/
155+
.import-nested {
156+
color: red;
157+
}.import-nested {
158+
color: red;
159+
}.import {
160+
color: red;
161+
}/*!************************************************************************!*\\\\
162+
!*** css ./styles-5.css-style-sheet.css (exportType: css-style-sheet) ***!
163+
\\\\************************************************************************/
158164
159165
160-
.import-nested {
166+
167+
.class-5 {
161168
color: red;
162169
}
163170
164-
/*!***************************************************************!*\\\\
165-
!*** css ./import-nested.text.css?foo=bar (exportType: text) ***!
166-
\\\\***************************************************************/
171+
"
172+
`;
167173

174+
exports[`ConfigCacheTestCases css charset exported tests should handle \`@charset\` at-rule 5`] = `
175+
Array [
176+
"/*!********************************************************!*\\\\
177+
!*** css ./import-nested.text.css (exportType: style) ***!
178+
\\\\********************************************************/
179+
@charset \\"UTF-8\\";
168180
169181
.import-nested {
170182
color: red;
171183
}
172184
173-
/*!************************************************!*\\\\
174-
!*** css ./import.text.css (exportType: text) ***!
175-
\\\\************************************************/
176-
177-
185+
",
186+
"/*!****************************************************************!*\\\\
187+
!*** css ./import-nested.text.css?foo=bar (exportType: style) ***!
188+
\\\\****************************************************************/
189+
@charset \\"UTF-8\\";
178190
179-
.import {
191+
.import-nested {
180192
color: red;
181193
}
182194
183-
/*!************************************************************************!*\\\\
184-
!*** css ./styles-5.css-style-sheet.css (exportType: css-style-sheet) ***!
185-
\\\\************************************************************************/
186-
195+
",
196+
"/*!*************************************************!*\\\\
197+
!*** css ./import.text.css (exportType: style) ***!
198+
\\\\*************************************************/
199+
@charset \\"UTF-8\\";
187200
188201
189-
.class-5 {
202+
.import {
190203
color: red;
191204
}
192205
193-
"
194-
`;
195-
196-
exports[`ConfigCacheTestCases css charset exported tests should handle \`@charset\` at-rule 5`] = `
197-
Array [
206+
",
198207
"/*!****************************************************!*\\\\
199208
!*** css ./styles-6.style.css (exportType: style) ***!
200209
\\\\****************************************************/

‎test/configCases/css/charset/__snapshots__/ConfigTest.snap‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -152,49 +152,58 @@ exports[`ConfigTestCases css charset exported tests should handle \`@charset\` a
152152

153153
exports[`ConfigTestCases css charset exported tests should handle \`@charset\` at-rule 4`] = `
154154
"@charset \\"UTF-8\\";
155-
/*!*******************************************************!*\\\\
156-
!*** css ./import-nested.text.css (exportType: text) ***!
157-
\\\\*******************************************************/
155+
.import-nested {
156+
color: red;
157+
}.import-nested {
158+
color: red;
159+
}.import {
160+
color: red;
161+
}/*!************************************************************************!*\\\\
162+
!*** css ./styles-5.css-style-sheet.css (exportType: css-style-sheet) ***!
163+
\\\\************************************************************************/
158164
159165
160-
.import-nested {
166+
167+
.class-5 {
161168
color: red;
162169
}
163170
164-
/*!***************************************************************!*\\\\
165-
!*** css ./import-nested.text.css?foo=bar (exportType: text) ***!
166-
\\\\***************************************************************/
171+
"
172+
`;
167173

174+
exports[`ConfigTestCases css charset exported tests should handle \`@charset\` at-rule 5`] = `
175+
Array [
176+
"/*!********************************************************!*\\\\
177+
!*** css ./import-nested.text.css (exportType: style) ***!
178+
\\\\********************************************************/
179+
@charset \\"UTF-8\\";
168180
169181
.import-nested {
170182
color: red;
171183
}
172184
173-
/*!************************************************!*\\\\
174-
!*** css ./import.text.css (exportType: text) ***!
175-
\\\\************************************************/
176-
177-
185+
",
186+
"/*!****************************************************************!*\\\\
187+
!*** css ./import-nested.text.css?foo=bar (exportType: style) ***!
188+
\\\\****************************************************************/
189+
@charset \\"UTF-8\\";
178190
179-
.import {
191+
.import-nested {
180192
color: red;
181193
}
182194
183-
/*!************************************************************************!*\\\\
184-
!*** css ./styles-5.css-style-sheet.css (exportType: css-style-sheet) ***!
185-
\\\\************************************************************************/
186-
195+
",
196+
"/*!*************************************************!*\\\\
197+
!*** css ./import.text.css (exportType: style) ***!
198+
\\\\*************************************************/
199+
@charset \\"UTF-8\\";
187200
188201
189-
.class-5 {
202+
.import {
190203
color: red;
191204
}
192205
193-
"
194-
`;
195-
196-
exports[`ConfigTestCases css charset exported tests should handle \`@charset\` at-rule 5`] = `
197-
Array [
206+
",
198207
"/*!****************************************************!*\\\\
199208
!*** css ./styles-6.style.css (exportType: style) ***!
200209
\\\\****************************************************/

‎test/configCases/css/export-type-style-and-text-import/base.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.base-class {
2+
color: red;
3+
}

‎test/configCases/css/export-type-style-and-text-import/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { "wrapper-style-class" as wrapperStyleClass } from "./wrapper-style.css";
2+
import textContent from "./base.css";
3+
4+
it("should export correct class name for wrapper-style.css", () => {
5+
expect(wrapperStyleClass).toBe("wrapper-style_css-wrapper-style-class");
6+
});
7+
8+
it("should export text content for base.css", () => {
9+
expect(typeof textContent).toBe("string");
10+
expect(textContent).toContain("color: red");
11+
});
12+
13+
it("should create a style tag for wrapper-style.css own content", () => {
14+
const allCSS = Array.from(
15+
window.document.getElementsByTagName("style")
16+
).map(s => s.textContent);
17+
18+
expect(allCSS.some(c => c.includes("padding: 10px"))).toBe(true);
19+
});
20+
21+
it("should create a style tag for base.css when @imported by a style-type parent even though base.css itself is text-type", () => {
22+
const allCSS = Array.from(
23+
window.document.getElementsByTagName("style")
24+
).map(s => s.textContent);
25+
26+
expect(allCSS.some(c => c.includes("color: red"))).toBe(true);
27+
});

‎test/configCases/css/export-type-style-and-text-import/webpack.config.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
"use strict";
2+
3+
/** @type {import("../../../../").Configuration} */
4+
module.exports = {
5+
target: "web",
6+
mode: "development",
7+
devtool: false,
8+
module: {
9+
rules: [
10+
{
11+
test: /wrapper-style\.css$/,
12+
type: "css/module",
13+
parser: {
14+
exportType: "style"
15+
}
16+
},
17+
{
18+
test: /base\.css$/,
19+
type: "css/module",
20+
parser: {
21+
exportType: "text"
22+
}
23+
}
24+
]
25+
},
26+
experiments: {
27+
css: true
28+
}
29+
};

‎test/configCases/css/export-type-style-and-text-import/wrapper-style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import url(./base.css);
2+
3+
.wrapper-style-class {
4+
padding: 10px;
5+
}

0 commit comments

Comments
 (0)