Add support for local keyframes through a PostCSS plugin.

bin/packages/build-worker.js

@@ -122,9 +122,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',
 	} );

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",

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;
 	}
 
 }