Style engine: prettify combined selectors

[ramonjd]

What?

A follow up to

• Style engine: prettify output #42909

This PR:

• Inserts a new line after combined selectors
• Returns empty string where no declarations are found in a CSS rule
• Adds tests for both

Why?

The difference in prettified output is:

Trunk

.wp-block-column.wp-container-9 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-column.wp-container-13 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-column.wp-container-17 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 26px;
	margin-left: auto !important;
	margin-right: auto !important;
}

This PR

.wp-block-column.wp-container-9 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-column.wp-container-13 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-column.wp-container-17 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 26px;
	margin-left: auto !important;
	margin-right: auto !important;
}

How?

Adding a \n after each , in the selector string.

Testing Instructions

Run the tests:
npm run tests-unit-php

Check the source of a page that has a bunch of similar layout blocks (e.g., group blocks).

The selectors should be stacked in development, not printed in a line.

[glendaviesnz]

Worked as advertised to me:

With SCRIPT_DEBUG set:

Without SCRIPT_DEBUG set: