Add support for local keyframes through a PostCSS plugin. (WordPress#…

…62476) Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: jsnajdr <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: mirka <[email protected]>
patil-vipul · Jun 17, 2024 · e890935 · e890935
1 parent be3baa1
commit e890935
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
@@ -126,9 +126,10 @@ async function buildCSS( file ) {
 		data: ''.concat( '@use "sass:math";', importLists, contents ),
 	} );
 
-	const result = await postcss(
-		require( '@wordpress/postcss-plugins-preset' )
-	).process( builtSass.css, {
+	const result = await postcss( [
+		require( 'postcss-local-keyframes' ),
+		...require( '@wordpress/postcss-plugins-preset' ),
+	] ).process( builtSass.css, {
 		from: 'src/app.css',
 		to: 'dest/app.css',
 	} );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -92,7 +92,8 @@
 		"@wordpress/warning": "file:packages/warning",
 		"@wordpress/widgets": "file:packages/widgets",
 		"@wordpress/wordcount": "file:packages/wordcount",
-		"es-module-shims": "^1.8.2"
+		"es-module-shims": "^1.8.2",
+		"postcss-local-keyframes": "^0.0.2"
 	},
 	"devDependencies": {
 		"@actions/core": "1.9.1",

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -3,7 +3,7 @@
 	overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes local--slide-from-right {
 	from {
 		transform: translateX(50px);
 		opacity: 0;
@@ -14,7 +14,7 @@
 	}
 }
 
-@keyframes slide-from-left {
+@keyframes local--slide-from-left {
 	from {
 		transform: translateX(-50px);
 		opacity: 0;
@@ -47,11 +47,11 @@
 	}
 
 	&.slide-from-left {
-		animation-name: slide-from-left;
+		animation-name: local--slide-from-left;
 	}
 
 	&.slide-from-right {
-		animation-name: slide-from-right;
+		animation-name: local--slide-from-right;
 	}
 
 }