test(css): add more @supports/@media cases

webpack · May 27, 2022 · a842049 · a842049
1 parent 7b71e81
commit a842049
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 1 deletion.
diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js
@@ -384,7 +384,6 @@ class CssParser extends Parser {
 				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) {

diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js
@@ -24,9 +24,21 @@ it("should allow to create css modules", done => {
 				media: prod
 					? "my-app-491-w7"
 					: "./style.module.css-wideScreenClass",
+				mediaWithOperator: prod
+					? "my-app-491-J"
+					: "./style.module.css-narrowScreenClass",
 				supports: prod
 					? "my-app-491-T$"
 					: "./style.module.css-displayGridInSupports",
+				supportsWithOperator: prod
+					? "my-app-491-zz"
+					: "./style.module.css-floatRightInNegativeSupports",
+				mediaInSupports: prod
+					? "my-app-491-Kr"
+					: "./style.module.css-displayFlexInMediaInSupports",
+				supportsInMedia: prod
+					? "my-app-491-SQ"
+					: "./style.module.css-displayFlexInSupportsInMedia",
 			});
 		} catch (e) {
 			return done(e);

diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js
@@ -27,9 +27,21 @@ it("should allow to create css modules", done => {
 				media: prod
 					? "my-app-491-w7"
 					: "./style.module.css-wideScreenClass",
+				mediaWithOperator: prod
+					? "my-app-491-J"
+					: "./style.module.css-narrowScreenClass",
 				supports: prod
 					? "my-app-491-T$"
 					: "./style.module.css-displayGridInSupports",
+				supportsWithOperator: prod
+					? "my-app-491-zz"
+					: "./style.module.css-floatRightInNegativeSupports",
+				mediaInSupports: prod
+					? "my-app-491-Kr"
+					: "./style.module.css-displayFlexInMediaInSupports",
+				supportsInMedia: prod
+					? "my-app-491-SQ"
+					: "./style.module.css-displayFlexInSupportsInMedia",
 			});
 		} catch (e) {
 			return done(e);

diff --git a/test/configCases/css/css-modules/style.module.css b/test/configCases/css/css-modules/style.module.css
@@ -77,8 +77,37 @@
 	}
 }
 
+@media screen and (max-width: 600px) {
+	.narrowScreenClass {
+		color: var(--local-color);
+		--local-color: purple;
+	}
+}
+
 @supports (display: grid) {
 	.displayGridInSupports {
 		display: grid;
 	}
 }
+
+@supports not (display: grid) {
+  .floatRightInNegativeSupports {
+    float: right;
+  }
+}
+
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    .displayFlexInMediaInSupports {
+      display: flex;
+    }
+  }
+}
+
+@media screen and (min-width: 900px) {
+	@supports (display: flex) {
+    .displayFlexInSupportsInMedia {
+      display: flex;
+    }
+  }
+}
diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js
@@ -12,5 +12,9 @@ export default {
 	animation: style.animation,
 	vars: `${style["local-color"]} ${style.vars} ${style["global-color"]} ${style.globalVars}`,
 	media: style.wideScreenClass,
+	mediaWithOperator: style.narrowScreenClass,
 	supports: style.displayGridInSupports,
+	supportsWithOperator: style.floatRightInNegativeSupports,
+	mediaInSupports: style.displayFlexInMediaInSupports,
+	supportsInMedia: style.displayFlexInSupportsInMedia,
 };