PostCSS style transformation: fail gracefully instead of throwing an error

packages/block-editor/src/utils/test/transform-styles.js

@@ -4,6 +4,55 @@
 import transformStyles from '../transform-styles';
 
 describe( 'transformStyles', () => {
+	describe( 'error handling', () => {
+		beforeEach( () => {
+			// Intentionally suppress the expected console errors and warnings to reduce
+			// noise in the test output.
+			jest.spyOn( console, 'warn' ).mockImplementation( jest.fn() );
+		} );
+
+		it( 'should not throw error in case of invalid css', () => {
+			const run = () =>
+				transformStyles(
+					[
+						{
+							css: 'h1 { color: red;', // invalid CSS
+						},
+					],
+					'.my-namespace'
+				);
+
+			expect( run ).not.toThrow();
+			expect( console ).toHaveWarned();
+		} );
+
+		it( 'should warn invalid css in the console', () => {
+			const run = () =>
+				transformStyles(
+					[
+						{
+							css: 'h1 { color: red; }', // valid CSS
+						},
+						{
+							css: 'h1 { color: red;', // invalid CSS
+						},
+					],
+					'.my-namespace'
+				);
+
+			const [ validCSS, invalidCSS ] = run();
+
+			expect( validCSS ).toBe( '.my-namespace h1 { color: red; }' );
+			expect( invalidCSS ).toBe( null );
+
+			expect( console ).toHaveWarnedWith(
+				'wp.blockEditor.transformStyles Failed to transform CSS.',
+				'<css input>:1:1: Unclosed block\n> 1 | h1 { color: red;\n    | ^'
+				//                                                        ^^^^ In PostCSS, a tab is equal four spaces
+			);
+		} );
+	} );
+
 	describe( 'selector wrap', () => {
 		it( 'should wrap regular selectors', () => {
 			const input = `h1 { color: red; }`;

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,36 @@ 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.message + '\n' + error.showSourceCode( false )
+				);
+			} else {
+				// eslint-disable-next-line no-console
+				console.warn(
+					'wp.blockEditor.transformStyles Failed to transform CSS.',
+					error
+				);
+			}
+
+			return null;
+		}
 	} );
 };