From 514a1dd6a82247a9c8a9383f3773e267732d0f7a Mon Sep 17 00:00:00 2001
From: Luis Felipe Zaguini <luisfelipezaguini@gmail.com>
Date: Tue, 14 Nov 2023 00:33:36 +0100
Subject: [PATCH] PostCSS style transformation: fail gracefully instead of
 throwing error

---
 .../src/utils/test/transform-styles.js        | 22 +++++++++++
 .../src/utils/transform-styles/index.js       | 38 ++++++++++++-------
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/utils/test/transform-styles.js b/packages/block-editor/src/utils/test/transform-styles.js
index f162a0b2f6048c..b00720fd2142c4 100644
--- a/packages/block-editor/src/utils/test/transform-styles.js
+++ b/packages/block-editor/src/utils/test/transform-styles.js
@@ -4,6 +4,28 @@
 import transformStyles from '../transform-styles';
 
 describe( 'transformStyles', () => {
+	it( 'should not throw error in case of invalid css', () => {
+		const run = () =>
+			transformStyles(
+				[
+					{
+						css: 'h1 { color: red; }', // valid CSS
+					},
+					{
+						css: 'h1 { color: red;', // invalid CSS
+					},
+				],
+				'.my-namespace'
+			);
+
+		expect( run ).not.toThrow();
+
+		const [ validCSS, invalidCSS ] = run();
+
+		expect( validCSS ).toBe( '.my-namespace h1 { color: red; }' );
+		expect( invalidCSS ).toBe( null );
+	} );
+
 	describe( 'selector wrap', () => {
 		it( 'should wrap regular selectors', () => {
 			const input = `h1 { color: red; }`;
diff --git a/packages/block-editor/src/utils/transform-styles/index.js b/packages/block-editor/src/utils/transform-styles/index.js
index 8f5e1702307a45..4c7300d331d02c 100644
--- a/packages/block-editor/src/utils/transform-styles/index.js
+++ b/packages/block-editor/src/utils/transform-styles/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import postcss from 'postcss';
+import postcss, { CssSyntaxError } from 'postcss';
 import wrap from 'postcss-prefixwrap';
 import rebaseUrl from 'postcss-urlrebase';
 
@@ -19,18 +19,30 @@ import rebaseUrl from 'postcss-urlrebase';
  */
 const transformStyles = ( styles, wrapperSelector = '' ) => {
 	return styles.map( ( { css, ignoredSelectors = [], baseURL } ) => {
-		return postcss(
-			[
-				wrapperSelector &&
-					wrap( wrapperSelector, {
-						ignoredSelectors: [
-							...ignoredSelectors,
-							wrapperSelector,
-						],
-					} ),
-				baseURL && rebaseUrl( { rootUrl: baseURL } ),
-			].filter( Boolean )
-		).process( css, {} ).css; // use sync PostCSS API
+		try {
+			return postcss(
+				[
+					wrapperSelector &&
+						wrap( wrapperSelector, {
+							ignoredSelectors: [
+								...ignoredSelectors,
+								wrapperSelector,
+							],
+						} ),
+					baseURL && rebaseUrl( { rootUrl: baseURL } ),
+				].filter( Boolean )
+			).process( css, {} ).css; // use sync PostCSS API
+		} catch ( error ) {
+			if ( ! ( error instanceof CssSyntaxError ) ) {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'wp.blockEditor.transformStyles Failed to transform CSS.',
+					error
+				);
+			}
+
+			return null;
+		}
 	} );
 };