fix(css parser): handle nested atRule

This will handle @media and @supports atRule identifiers and
enable the replacements of the nested rules names with the
unique ids.

examples/css/README.md

@@ -34,7 +34,7 @@ body {
   \*************************/
 /*! default exports */
 /*! exports [not provided] [no usage info] */
-/*! runtime requirements: module, __webpack_require__.p, __webpack_require__.* */
+/*! runtime requirements: __webpack_require__.p, module, __webpack_require__.* */
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 module.exports = __webpack_require__.p + "89a353e9c515885abd8e.png";
@@ -437,6 +437,18 @@ body {
 	color: darkblue;
 }
 
+@media (min-width: 1024px) {
+	.app-6-main {
+		color: green;
+	}
+}
+
+@supports (display: grid) {
+  .app-6-main {
+    display: grid
+  }
+}
+
 head{--webpack-app-0:_4,_2,_1,_5,large%main/_6;}
 ```
 
@@ -469,6 +481,18 @@ body {
 	color: darkblue;
 }
 
+@media (min-width: 1024px) {
+	.app-491-D {
+		color: green;
+	}
+}
+
+@supports (display: grid) {
+  .app-491-D {
+    display: grid
+  }
+}
+
 head{--webpack-app-179:_548,_431,_258,_268,b%D/_491;}
 ```
 
@@ -487,16 +511,16 @@ head{--webpack-app-1:_7;}
 ## Unoptimized
 
 ```
-assets by chunk 16.9 KiB (name: main)
+assets by chunk 17 KiB (name: main)
   asset output.js 16.5 KiB [emitted] (name: main)
-  asset output.css 385 bytes [emitted] (name: main)
+  asset output.css 520 bytes [emitted] (name: main)
 asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
 asset 1.output.css 49 bytes [emitted]
-Entrypoint main 16.9 KiB (14.6 KiB) = output.js 16.5 KiB output.css 385 bytes 1 auxiliary asset
-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]
+Entrypoint main 17 KiB (14.6 KiB) = output.js 16.5 KiB output.css 520 bytes 1 auxiliary asset
+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]
   > ./example.js main
   runtime modules 10 KiB 9 modules
-  dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
+  dependent modules 42 bytes (javascript) 14.6 KiB (asset) 458 bytes (css) 42 bytes (css-import) [dependent] 6 modules
   ./example.js 176 bytes [built] [code generated]
     [no exports]
     [used exports unknown]
@@ -507,30 +531,30 @@ chunk (runtime: main) 1.output.css 23 bytes
     [no exports]
     [used exports unknown]
     import() ./lazy-style.css ./example.js 4:0-26
-webpack 5.66.0 compiled successfully
+webpack 5.72.0 compiled successfully
 ```
 
 ## Production mode
 
 ```
-assets by chunk 4.25 KiB (name: main)
+assets by chunk 4.38 KiB (name: main)
   asset output.js 3.87 KiB [emitted] [minimized] (name: main)
-  asset output.css 385 bytes [emitted] (name: main)
+  asset output.css 518 bytes [emitted] (name: main)
 asset 89a353e9c515885abd8e.png 14.6 KiB [emitted] [immutable] [from: images/file.png] (auxiliary name: main)
 asset 159.output.css 53 bytes [emitted]
-Entrypoint main 4.25 KiB (14.6 KiB) = output.js 3.87 KiB output.css 385 bytes 1 auxiliary asset
+Entrypoint main 4.38 KiB (14.6 KiB) = output.js 3.87 KiB output.css 518 bytes 1 auxiliary asset
 chunk (runtime: main) 159.output.css 23 bytes
   > ./lazy-style.css ./example.js 4:0-26
   ./lazy-style.css 23 bytes [built] [code generated]
     [no exports]
     import() ./lazy-style.css ./example.js 4:0-26
-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]
+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]
   > ./example.js main
   runtime modules 10 KiB 9 modules
-  dependent modules 42 bytes (javascript) 14.6 KiB (asset) 335 bytes (css) 42 bytes (css-import) [dependent] 6 modules
+  dependent modules 42 bytes (javascript) 14.6 KiB (asset) 458 bytes (css) 42 bytes (css-import) [dependent] 6 modules
   ./example.js 176 bytes [built] [code generated]
     [no exports]
     [no exports used]
     entry ./example.js main
-webpack 5.66.0 compiled successfully
+webpack 5.72.0 compiled successfully
 ```

examples/css/style.module.css

@@ -6,3 +6,15 @@
 	font-size: var(--large);
 	color: darkblue;
 }
+
+@media (min-width: 1024px) {
+	.main {
+		color: green;
+	}
+}
+
+@supports (display: grid) {
+  .main {
+    display: grid
+  }
+}

lib/css/CssParser.js

@@ -296,6 +296,7 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 			}
 		};
+		const eatAtRuleNested = eatUntil("{};/");
 		const eatKeyframes = eatUntil("{};/");
 		const eatNameInVar = eatUntil(",)};/");
 		walkCssTokens(source, {
@@ -380,6 +381,19 @@ class CssParser extends Parser {
 					modeNestingLevel = 1;
 					return pos + 1;
 				}
+				if (name === "@media" || name === "@supports") {
+					let pos = end;
+					const [newPos] = eatText(input, pos, eatAtRuleNested);
+					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
+					pos = newPos;
+					if (pos === input.length) return pos;
+					if (input.charCodeAt(pos) !== CC_LEFT_CURLY) {
+						throw new Error(
+							`Unexpected ${input[pos]} at ${pos} during parsing of @media or @supports (expected '{')`
+						);
+					}
+					return pos + 1;
+				}
 				return end;
 			},
 			semicolon: (input, start, end) => {