Custom CSS per-page functionality breaks on media queries.

[georgestephanis]

Code:

wp-spectra/src/blocks/extensions/custom-page-css/index.js

Lines 6 to 27 in 62d0b6f

	export const applyScopedCSS = ( customCSS ) => {
	if ( 'string' !== typeof customCSS ) {
	return;
	}
	// This makes sure CSS only gets applied to blocks and not the editor elements.
	const scopedCSS = customCSS
	.replace( /\\/g, '' ) // Removes all backslashes.
	.split( '}' )
	.map( rule => rule.trim() ? `.block-editor-block-list__layout ${rule}}` : '' )
	.join( ' ' );
	const isExistStyle = document.getElementById( 'uagb-blocks-editor-custom-css' );
	if ( !isExistStyle ) {
	const node = document.createElement( 'style' );
	node.setAttribute( 'id', 'uagb-blocks-editor-custom-css' );
	node.textContent = scopedCSS;
	document.head.appendChild( node );
	} else {
	isExistStyle.textContent = scopedCSS;
	}
	};

This will prepend any chunks having media queries with .block-editor-block-list__layout thereby breaking the syntax.

Example:

.foo {
    color: red;
}
@media ( width > 800px ) {
    .foo {
        color: blue;
    }
}

outputs as follows:

<style id="uagb-blocks-editor-custom-css">.block-editor-block-list__layout .foo {
    color: red;
} .block-editor-block-list__layout 
@media ( width > 800px ) {
    .foo {
        color: blue;
    }  </style>

Not only does it break by injecting the selector before the media query, it also eats the closing curly brace.