Style engine: trim multiple selector strings

[ramonjd]

What?

This PR trims multiple selector string, that is a string of selectors separated by a comma, passed to the style engine.

Basically removing spaces between selectors in a given string. A "selector" is defined by a comma boundary: ','.

For example, let's say we pass a selector of .poirot, .poirot:active, #miss-marple > .st-mary-mead for a given set of CSS declarations.

Before

.poirot, .poirot:active, #miss-marple > .st-mary-mead{margin-left:0;font-family:Detective Sans;}

After

.poirot,.poirot:active,#miss-marple > .st-mary-mead{margin-left:0;font-family:Detective Sans;}'

And, prettified, this:

.poirot,
 .poirot:active,
 #miss-marple > .st-mary-mead {
	margin-left: 0;
	font-family: Detective Sans;
}

Becomes this:

.poirot,
.poirot:active,
#miss-marple > .st-mary-mead {
	margin-left: 0;
	font-family: Detective Sans;
}

Why?

This is so we can correctly align prettified content, and remove spaces between multiple selectors with the same styles.

How?

Exploding, mapping, trimming, imploding.

Testing Instructions

Run the tests!

npm run test:unit:php -- --filter WP_Style_Engine_CSS_Rule_Test

If you're feeling really keen, try adding multiple selectors to a block supports style. Layouts is a good place to test.

Here's a diff:

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index a50e1fb883..2f9a882e2e 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -54,11 +54,11 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 					$slug            = _wp_to_kebab_case( substr( $gap_value, $index_to_splice ) );
 					$gap_value       = "var(--wp--preset--spacing--$slug)";
 				}
-
+				$test_id = wp_unique_id( 'pachycephalosaurus-' );
 				array_push(
 					$layout_styles,
 					array(
-						'selector'     => "$selector > *",
+						'selector'     => "$selector > *, .$test_id",
 						'declarations' => array(
 							'margin-block-start' => '0',
 							'margin-block-end'   => '0',

For any page with a default layout (e.g., add a simple group block to a page), the styles should be printed out neatly:

<style id='core-block-supports-inline-css'>
.wp-container-16.wp-container-16 > *,
.pachycephalosaurus-17,
.wp-container-19.wp-container-19 > *,
.pachycephalosaurus-20 {
	margin-block-start: 0;
	margin-block-end: 0;
}
</style>

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[andrewserong]

Thanks for picking this one up, and for the eagle eyes on the formatting of the output!

I've left a comment — I'm mostly wondering if it's worth only enabling this for prettified output, to attempt to (albeit very slightly) avoid extra processing when not prettifying. What do you think?

[andrewserong]

Since this adds an extra step of processing, what do you think about only enabling this when $should_prettify is true?

[ramonjd]

Thanks for looking at this.

That's a fair point, and I totally agree.

Just to note that if we skip it, it'll mean that non-prettified selectors will have the space, e.g., the difference between:

.test, .me{...}

and

.test,.me{...}

This is, as they say, "no big deal". 😄

[ramonjd]

DONE!

[andrewserong]

Thanks for the follow-up!

Prettifying works as expected:

And the default non-prettified behaviour appears to be unaffected:

LGTM! ✨