Support container queries in editor styles (#49915)

WordPress · Aug 10, 2023 · 0d501b6 · 0d501b6
1 parent c1281d1
commit 0d501b6
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 0 deletions.
diff --git a/packages/block-editor/src/utils/transform-styles/ast/parse.js b/packages/block-editor/src/utils/transform-styles/ast/parse.js
@@ -455,6 +455,36 @@ export default function ( css, options ) {
 		} );
 	}
 
+	/**
+	 * Parse container.
+	 */
+
+	function atcontainer() {
+		const pos = position();
+		const m = match( /^@container *([^{]+)/ );
+
+		if ( ! m ) {
+			return;
+		}
+		const container = trim( m[ 1 ] );
+
+		if ( ! open() ) {
+			return error( "@container missing '{'" );
+		}
+
+		const style = comments().concat( rules() );
+
+		if ( ! close() ) {
+			return error( "@container missing '}'" );
+		}
+
+		return pos( {
+			type: 'container',
+			container,
+			rules: style,
+		} );
+	}
+
 	/**
 	 * Parse custom-media.
 	 */
@@ -624,6 +654,7 @@ export default function ( css, options ) {
 		return (
 			atkeyframes() ||
 			atmedia() ||
+			atcontainer() ||
 			atcustommedia() ||
 			atsupports() ||
 			atimport() ||

diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/compress.js
@@ -68,6 +68,19 @@ Compiler.prototype.media = function ( node ) {
 	);
 };
 
+/**
+ * Visit container node.
+ */
+
+Compiler.prototype.container = function ( node ) {
+	return (
+		this.emit( '@container ' + node.container, node.position ) +
+		this.emit( '{' ) +
+		this.mapVisit( node.rules ) +
+		this.emit( '}' )
+	);
+};
+
 /**
  * Visit document node.
  */

diff --git a/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js b/packages/block-editor/src/utils/transform-styles/ast/stringify/identity.js
@@ -83,6 +83,19 @@ Compiler.prototype.media = function ( node ) {
 	);
 };
 
+/**
+ * Visit container node.
+ */
+
+Compiler.prototype.container = function ( node ) {
+	return (
+		this.emit( '@container ' + node.container, node.position ) +
+		this.emit( ' {\n' + this.indent( 1 ) ) +
+		this.mapVisit( node.rules, '\n\n' ) +
+		this.emit( this.indent( -1 ) + '\n}' )
+	);
+};
+
 /**
  * Visit document node.
  */

diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/block-editor/src/utils/transform-styles/transforms/test/__snapshots__/wrap.js.snap
@@ -42,6 +42,14 @@ color: red;
 }"
 `;
 
+exports[`CSS selector wrap should wrap selectors inside container queries 1`] = `
+"@container (width > 400px) {
+.my-namespace h1 {
+color: red;
+}
+}"
+`;
+
 exports[`CSS selector wrap should replace :root selectors 1`] = `
 ".my-namespace {
 --my-color: #ff0000;

diff --git a/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js b/packages/block-editor/src/utils/transform-styles/transforms/test/wrap.js
@@ -50,6 +50,17 @@ describe( 'CSS selector wrap', () => {
 		expect( output ).toMatchSnapshot();
 	} );
 
+	it( 'should wrap selectors inside container queries', () => {
+		const callback = wrap( '.my-namespace' );
+		const input = `
+		@container (width > 400px) {
+  			h1 { color: red; }
+		}`;
+		const output = traverse( input, callback );
+
+		expect( output ).toMatchSnapshot();
+	} );
+
 	it( 'should ignore font-face selectors', () => {
 		const callback = wrap( '.my-namespace' );
 		const input = `