Skip to content

Commit 7c7ca77

Browse files
alexander-akaitalexander-akait
authored
Merge pull request #15812 from noreiller/fix-experiments-css-at-rule-nested
fix(css parser): handle nested atRule
2 parents 7a6e950 + a842049 commit 7c7ca77

8 files changed

Lines changed: 150 additions & 17 deletions

File tree

‎examples/css/README.md‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ body {
3434
\*************************/
3535
/*! default exports */
3636
/*! exports [not provided] [no usage info] */
37-
/*! runtime requirements: module, __webpack_require__.p, __webpack_require__.* */
37+
/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
3838
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
3939

4040
module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
@@ -437,6 +437,18 @@ body {
437437
color: darkblue;
438438
}
439439

440+
@media (min-width: 1024px) {
441+
.app-6-main {
442+
color: green;
443+
}
444+
}
445+
446+
@supports (display: grid) {
447+
.app-6-main {
448+
display: grid
449+
}
450+
}
451+
440452
head{--webpack-app-0:_4,_2,_1,_5,large%main/_6;}
441453
```
442454

@@ -469,6 +481,18 @@ body {
469481
color: darkblue;
470482
}
471483

484+
@media (min-width: 1024px) {
485+
.app-491-D {
486+
color: green;
487+
}
488+
}
489+
490+
@supports (display: grid) {
491+
.app-491-D {
492+
display: grid
493+
}
494+
}
495+
472496
head{--webpack-app-179:_548,_431,_258,_268,b%D/_491;}
473497
```
474498

@@ -487,16 +511,16 @@ head{--webpack-app-1:_7;}
487511
## Unoptimized
488512

489513
```
490-
assets by chunk 16.9 KiB (name: main)
514+
assets by chunk 17 KiB (name: main)
491515
asset output.js 16.5 KiB [emitted] (name: main)
492-
asset output.css 385 bytes [emitted] (name: main)
516+
asset output.css 520 bytes [emitted] (name: main)
493517
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
494518
asset 1.output.css 49 bytes [emitted]
495-
Entrypoint main 16.9 KiB (14.6 KiB) = output.js 16.5 KiB output.css 385 bytes 1 auxiliary asset
496-
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
519+
Entrypoint main 17 KiB (14.6 KiB) = output.js 16.5 KiB output.css 520 bytes 1 auxiliary asset
520+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 458 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
497521
> ./example.js main
498522
runtime modules 10 KiB 9 modules
499-
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
523+
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 458 bytes (css) 42 bytes (css-import) [dependent] 6 modules
500524
./example.js 176 bytes [built] [code generated]
501525
[no exports]
502526
[used exports unknown]
@@ -507,30 +531,30 @@ chunk (runtime: main) 1.output.css 23 bytes
507531
[no exports]
508532
[used exports unknown]
509533
import() ./lazy-style.css ./example.js 4:0-26
510-
webpack 5.66.0 compiled successfully
534+
webpack 5.72.0 compiled successfully
511535
```
512536

513537
## Production mode
514538

515539
```
516-
assets by chunk 4.25 KiB (name: main)
540+
assets by chunk 4.38 KiB (name: main)
517541
asset output.js 3.87 KiB [emitted] [minimized] (name: main)
518-
asset output.css 385 bytes [emitted] (name: main)
542+
asset output.css 518 bytes [emitted] (name: main)
519543
asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
520544
asset 159.output.css 53 bytes [emitted]
521-
Entrypoint main 4.25 KiB (14.6 KiB) = output.js 3.87 KiB output.css 385 bytes 1 auxiliary asset
545+
Entrypoint main 4.38 KiB (14.6 KiB) = output.js 3.87 KiB output.css 518 bytes 1 auxiliary asset
522546
chunk (runtime: main) 159.output.css 23 bytes
523547
> ./lazy-style.css ./example.js 4:0-26
524548
./lazy-style.css 23 bytes [built] [code generated]
525549
[no exports]
526550
import() ./lazy-style.css ./example.js 4:0-26
527-
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 335 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
551+
chunk (runtime: main) output.js, output.css (main) 218 bytes (javascript) 458 bytes (css) 14.6 KiB (asset) 42 bytes (css-import) 10 KiB (runtime) [entry] [rendered]
528552
> ./example.js main
529553
runtime modules 10 KiB 9 modules
530-
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
554+
dependent modules 42 bytes (javascript) 14.6 KiB (asset) 458 bytes (css) 42 bytes (css-import) [dependent] 6 modules
531555
./example.js 176 bytes [built] [code generated]
532556
[no exports]
533557
[no exports used]
534558
entry ./example.js main
535-
webpack 5.66.0 compiled successfully
559+
webpack 5.72.0 compiled successfully
536560
```

‎examples/css/style.module.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,15 @@
66
font-size: var(--large);
77
color: darkblue;
88
}
9+
10+
@media (min-width: 1024px) {
11+
.main {
12+
color: green;
13+
}
14+
}
15+
16+
@supports (display: grid) {
17+
.main {
18+
display: grid
19+
}
20+
}

‎lib/css/CssParser.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,7 @@ class CssParser extends Parser {
296296
module.addDependency(dep);
297297
}
298298
};
299+
const eatAtRuleNested = eatUntil("{};/");
299300
const eatKeyframes = eatUntil("{};/");
300301
const eatNameInVar = eatUntil(",)};/");
301302
walkCssTokens(source, {
@@ -380,6 +381,18 @@ class CssParser extends Parser {
380381
modeNestingLevel = 1;
381382
return pos + 1;
382383
}
384+
if (name === "@media" || name === "@supports") {
385+
let pos = end;
386+
const [newPos] = eatText(input, pos, eatAtRuleNested);
387+
pos = newPos;
388+
if (pos === input.length) return pos;
389+
if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
390+
throw new Error(
391+
`Unexpected ${input[pos]} at ${pos} during parsing of @media or @supports (expected '{')`
392+
);
393+
}
394+
return pos + 1;
395+
}
383396
return end;
384397
},
385398
semicolon: (input, start, end) => {

‎test/configCases/css/css-modules-in-node/index.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,25 @@ it("should allow to create css modules", done => {
2020
animation: prod ? "my-app-491-oQ" : "./style.module.css-animation",
2121
vars: prod
2222
? "--my-app-491-y4 my-app-491-gR undefined my-app-491-xk"
23-
: "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars"
23+
: "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars",
24+
media: prod
25+
? "my-app-491-w7"
26+
: "./style.module.css-wideScreenClass",
27+
mediaWithOperator: prod
28+
? "my-app-491-J"
29+
: "./style.module.css-narrowScreenClass",
30+
supports: prod
31+
? "my-app-491-T$"
32+
: "./style.module.css-displayGridInSupports",
33+
supportsWithOperator: prod
34+
? "my-app-491-zz"
35+
: "./style.module.css-floatRightInNegativeSupports",
36+
mediaInSupports: prod
37+
? "my-app-491-Kr"
38+
: "./style.module.css-displayFlexInMediaInSupports",
39+
supportsInMedia: prod
40+
? "my-app-491-SQ"
41+
: "./style.module.css-displayFlexInSupportsInMedia",
2442
});
2543
} catch (e) {
2644
return done(e);

‎test/configCases/css/css-modules/index.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,25 @@ it("should allow to create css modules", done => {
2323
animation: prod ? "my-app-491-oQ" : "./style.module.css-animation",
2424
vars: prod
2525
? "--my-app-491-y4 my-app-491-gR undefined my-app-491-xk"
26-
: "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars"
26+
: "--./style.module.css-local-color ./style.module.css-vars undefined ./style.module.css-globalVars",
27+
media: prod
28+
? "my-app-491-w7"
29+
: "./style.module.css-wideScreenClass",
30+
mediaWithOperator: prod
31+
? "my-app-491-J"
32+
: "./style.module.css-narrowScreenClass",
33+
supports: prod
34+
? "my-app-491-T$"
35+
: "./style.module.css-displayGridInSupports",
36+
supportsWithOperator: prod
37+
? "my-app-491-zz"
38+
: "./style.module.css-floatRightInNegativeSupports",
39+
mediaInSupports: prod
40+
? "my-app-491-Kr"
41+
: "./style.module.css-displayFlexInMediaInSupports",
42+
supportsInMedia: prod
43+
? "my-app-491-SQ"
44+
: "./style.module.css-displayFlexInSupportsInMedia",
2745
});
2846
} catch (e) {
2947
return done(e);

‎test/configCases/css/css-modules/style.module.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,45 @@
6969
color: var(--global-color);
7070
--global-color: red;
7171
}
72+
73+
@media (min-width: 1600px) {
74+
.wideScreenClass {
75+
color: var(--local-color);
76+
--local-color: green;
77+
}
78+
}
79+
80+
@media screen and (max-width: 600px) {
81+
.narrowScreenClass {
82+
color: var(--local-color);
83+
--local-color: purple;
84+
}
85+
}
86+
87+
@supports (display: grid) {
88+
.displayGridInSupports {
89+
display: grid;
90+
}
91+
}
92+
93+
@supports not (display: grid) {
94+
.floatRightInNegativeSupports {
95+
float: right;
96+
}
97+
}
98+
99+
@supports (display: flex) {
100+
@media screen and (min-width: 900px) {
101+
.displayFlexInMediaInSupports {
102+
display: flex;
103+
}
104+
}
105+
}
106+
107+
@media screen and (min-width: 900px) {
108+
@supports (display: flex) {
109+
.displayFlexInSupportsInMedia {
110+
display: flex;
111+
}
112+
}
113+
}

‎test/configCases/css/css-modules/use-style.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,11 @@ export default {
1010
ident,
1111
keyframes: style.localkeyframes,
1212
animation: style.animation,
13-
vars: `${style["local-color"]} ${style.vars} ${style["global-color"]} ${style.globalVars}`
13+
vars: `${style["local-color"]} ${style.vars} ${style["global-color"]} ${style.globalVars}`,
14+
media: style.wideScreenClass,
15+
mediaWithOperator: style.narrowScreenClass,
16+
supports: style.displayGridInSupports,
17+
supportsWithOperator: style.floatRightInNegativeSupports,
18+
mediaInSupports: style.displayFlexInMediaInSupports,
19+
supportsInMedia: style.displayFlexInSupportsInMedia,
1420
};

‎test/configCases/css/large/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ it("should allow to create css modules", done => {
88
try {
99
expect(x).toEqual({
1010
placeholder: prod
11-
? "26-uhH"
11+
? "26-uhHx"
1212
: "my-app-./tailwind.module.css-placeholder-gray-700"
1313
});
1414
} catch (e) {

0 commit comments

Comments
 (0)