fix: handle vendor prefixed keyframes and animation in CSS modules

webpack · Apr 12, 2023 · f84a051 · f84a051
1 parent ecdcc1a
commit f84a051
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 5 deletions.
diff --git a/lib/css/CssParser.js b/lib/css/CssParser.js
@@ -278,10 +278,7 @@ class CssParser extends Parser {
 				dep.setLoc(sl, sc, el, ec);
 				module.addDependency(dep);
 				declaredCssVariables.add(name);
-			} else if (
-				propertyName.toLowerCase() === "animation-name" ||
-				propertyName.toLowerCase() === "animation"
-			) {
+			} else if (/^(-\w+-)?animation(-name)?$/i.test(propertyName)) {
 				modeData = "animation";
 				lastIdentifier = undefined;
 			}
@@ -361,7 +358,7 @@ class CssParser extends Parser {
 						supports: undefined
 					};
 				}
-				if (name === "@keyframes") {
+				if (/^@(-\w+-)?keyframes$/.test(name)) {
 					let pos = end;
 					pos = walkCssTokens.eatWhitespaceAndComments(input, pos);
 					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
@@ -65,6 +65,9 @@ it("should allow to create css modules", done => {
 				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",
+				animationName: prod
+					? "my-app-491-w3"
+					: "./style.module.css-animationName",
 			});
 		} catch (e) {
 			return done(e);

diff --git a/test/configCases/css/css-modules/index.js b/test/configCases/css/css-modules/index.js
@@ -68,6 +68,9 @@ it("should allow to create css modules", done => {
 				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",
+				animationName: prod
+					? "my-app-491-w3"
+					: "./style.module.css-animationName",
 			});
 		} 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
@@ -219,3 +219,40 @@
 	COLOR: VAR(--GLOBAR-COLOR);
 	--GLOBAR-COLOR: red;
 }
+
+.a {
+	animation: 3s animationName;
+	-webkit-animation: 3s animationName;
+}
+
+.b {
+	animation: animationName 3s;
+	-webkit-animation: animationName 3s;
+}
+
+.c {
+	animation-name: animationName;
+	-webkit-animation-name: animationName;
+}
+
+.d {
+	--animation-name: animationName;
+}
+
+@keyframes animationName {
+	0% {
+		background: white;
+	}
+	100% {
+		background: red;
+	}
+}
+
+@-webkit-keyframes animationName {
+	0% {
+		background: white;
+	}
+	100% {
+		background: red;
+	}
+}
diff --git a/test/configCases/css/css-modules/use-style.js b/test/configCases/css/css-modules/use-style.js
@@ -31,4 +31,5 @@ export default {
 	supportsInMedia: style.displayFlexInSupportsInMedia,
 	displayFlexInSupportsInMediaUpperCase: style.displayFlexInSupportsInMediaUpperCase,
 	VARS: `${style["LOCAL-COLOR"]} ${style.VARS} ${style["GLOBAL-COLOR"]} ${style.globalVarsUpperCase}`,
+	animationName: style.animationName,
 };