fix: more cases

webpack · Apr 5, 2023 · b735a56 · b735a56
1 parent 5a5b140
commit b735a56
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 6 deletions.
diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js
@@ -279,8 +279,8 @@ class CssParser extends Parser {
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
 			} else if (
-				propertyName === "animation-name" ||
-				propertyName === "animation"
+				propertyName.toLowerCase() === "animation-name" ||
+				propertyName.toLowerCase() === "animation"
 			) {
 				modeData = "animation";
 				lastIdentifier = undefined;
@@ -543,7 +543,7 @@ class CssParser extends Parser {
 				singleClassSelector = false;
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
-						const name = input.slice(start, end);
+						const name = input.slice(start, end).toLowerCase();
 						if (this.allowModeSwitch && name === ":global") {
 							modeData = "global";
 							const dep = new ConstDependency("", [start, end]);
@@ -566,7 +566,7 @@ class CssParser extends Parser {
 			pseudoFunction: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_TOP_LEVEL: {
-						const name = input.slice(start, end - 1);
+						const name = input.slice(start, end - 1).toLowerCase();
 						if (this.allowModeSwitch && name === ":global") {
 							modeStack.push(modeData);
 							modeData = "global";
@@ -589,7 +589,7 @@ class CssParser extends Parser {
 			function: (input, start, end) => {
 				switch (mode) {
 					case CSS_MODE_IN_LOCAL_RULE: {
-						const name = input.slice(start, end - 1);
+						const name = input.slice(start, end - 1).toLowerCase();
 						if (name === "var") {
 							let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
 							if (pos === input.length) return pos;

diff --git a/test/configCases/css/css-modules-in-node/index.js b/test/configCases/css/css-modules-in-node/index.js
@@ -53,6 +53,18 @@ it("should allow to create css modules", done => {
 				supportsInMedia: prod
 					? "my-app-491-SQ"
 					: "./style.module.css-displayFlexInSupportsInMedia",
+				displayFlexInSupportsInMediaUpperCase: prod
+					? "my-app-491-XM"
+					: "./style.module.css-displayFlexInSupportsInMediaUpperCase",
+				keyframesUPPERCASE: prod
+					? "my-app-491-T4"
+					: "./style.module.css-localkeyframesUPPERCASE",
+				localkeyframes2UPPPERCASE: prod
+					? "my-app-491-Xi"
+					: "./style.module.css-localkeyframes2UPPPERCASE",
+				VARS: prod
+					? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU"
+					: "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase",
 			});
 		} catch (e) {
 			return done(e);

diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js
@@ -56,6 +56,18 @@ it("should allow to create css modules", done => {
 				supportsInMedia: prod
 					? "my-app-491-SQ"
 					: "./style.module.css-displayFlexInSupportsInMedia",
+				displayFlexInSupportsInMediaUpperCase: prod
+					? "my-app-491-XM"
+					: "./style.module.css-displayFlexInSupportsInMediaUpperCase",
+				keyframesUPPERCASE: prod
+					? "my-app-491-T4"
+					: "./style.module.css-localkeyframesUPPERCASE",
+				localkeyframes2UPPPERCASE: prod
+					? "my-app-491-Xi"
+					: "./style.module.css-localkeyframes2UPPPERCASE",
+				VARS: prod
+					? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU"
+					: "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase",
 			});
 		} 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
@@ -166,3 +166,56 @@
     }
   }
 }
+
+@MEDIA screen and (min-width: 900px) {
+	@SUPPORTS (display: flex) {
+		.displayFlexInSupportsInMediaUpperCase {
+			display: flex;
+		}
+	}
+}
+
+.animationUpperCase {
+	ANIMATION-NAME: localkeyframesUPPERCASE;
+	ANIMATION: 3s ease-in 1s 2 reverse both paused localkeyframesUPPERCASE, localkeyframes2UPPPERCASE;
+	--pos1x: 0px;
+	--pos1y: 0px;
+	--pos2x: 10px;
+	--pos2y: 20px;
+}
+
+@KEYFRAMES localkeyframesUPPERCASE {
+	0% {
+		left: VAR(--pos1x);
+		top: VAR(--pos1y);
+		color: VAR(--theme-color1);
+	}
+	100% {
+		left: VAR(--pos2x);
+		top: VAR(--pos2y);
+		color: VAR(--theme-color2);
+	}
+}
+
+@KEYframes localkeyframes2UPPPERCASE {
+	0% {
+		left: 0;
+	}
+	100% {
+		left: 100px;
+	}
+}
+
+:GLOBAL .globalUpperCase :LOCAL .localUpperCase {
+	color: yellow;
+}
+
+.VARS {
+	color: VAR(--LOCAL-COLOR);
+	--LOCAL-COLOR: red;
+}
+
+.globalVarsUpperCase :GLOBAL {
+	COLOR: VAR(--GLOBAR-COLOR);
+	--GLOBAR-COLOR: red;
+}
diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js
@@ -19,6 +19,8 @@ export default {
 	webkitAnyWmultiParams: `${style.local16}`,
 	ident,
 	keyframes: style.localkeyframes,
+	keyframesUPPERCASE: style.localkeyframesUPPERCASE,
+	localkeyframes2UPPPERCASE: style.localkeyframes2UPPPERCASE,
 	animation: style.animation,
 	vars: `${style["local-color"]} ${style.vars} ${style["global-color"]} ${style.globalVars}`,
 	media: style.wideScreenClass,
@@ -27,4 +29,6 @@ export default {
 	supportsWithOperator: style.floatRightInNegativeSupports,
 	mediaInSupports: style.displayFlexInMediaInSupports,
 	supportsInMedia: style.displayFlexInSupportsInMedia,
+	displayFlexInSupportsInMediaUpperCase: style.displayFlexInSupportsInMediaUpperCase,
+	VARS: `${style["LOCAL-COLOR"]} ${style.VARS} ${style["GLOBAL-COLOR"]} ${style.globalVarsUpperCase}`,
 };
diff --git a/test/configCases/css/css-modules/warnings.js b/test/configCases/css/css-modules/warnings.js
@@ -2,7 +2,9 @@ module.exports = [
 	[/export 'global' \(imported as 'style'\) was not found/],
 	[/export 'nested2' \(imported as 'style'\) was not found/],
 	[/export 'global-color' \(imported as 'style'\) was not found/],
+	[/export 'GLOBAL-COLOR' \(imported as 'style'\) was not found/],
 	[/export 'global' \(imported as 'style'\) was not found/],
 	[/export 'nested2' \(imported as 'style'\) was not found/],
-	[/export 'global-color' \(imported as 'style'\) was not found/]
+	[/export 'global-color' \(imported as 'style'\) was not found/],
+	[/export 'GLOBAL-COLOR' \(imported as 'style'\) was not found/]
 ];