Style engine: prettify output

[ramonjd]

What?

Introducing prettify to making debugging a little easier.

❗❗❗ Note! Prettify must be turned on. We remove spaces and new lines by default.

Prettify is supported for CSS rules and CSS declarations.

An $indent_count parameter is also available in case we ever want to print nested CSS layers or rules.

Why?

Gutenberg uses defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG in various place to control the styles output.

This gives developers the option to see prettified CSS during development for ease of debugging.

So, from this:

<style id='layout-block-supports-inline-css'>
.wp-block-navigation.wp-container-3{justify-content:flex-end;}.wp-block-group.wp-container-12 > .alignfull{margin-right:calc(26px * -1);margin-left:calc(69px * -1);}.wp-block-group.wp-container-16 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:402px;margin-left:auto !important;margin-right:auto !important;}.wp-block-group.wp-container-16 > .alignwide{max-width:402px;}.wp-block-group.wp-container-4,.wp-block-group.wp-container-26{justify-content:space-between;}.wp-block-group.wp-container-5 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-12 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-post-content.wp-container-22 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-24 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-27 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-28 > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width:650px;margin-left:auto !important;margin-right:auto !important;}.wp-block-group.wp-container-5 > .alignwide,.wp-block-group.wp-container-6 > .alignwide,.wp-block-group.wp-container-12 > .alignwide,.wp-block-post-content.wp-container-22 > .alignwide,.wp-block-group.wp-container-24 > .alignwide,.wp-block-group.wp-container-27 > .alignwide,.wp-block-group.wp-container-28 > .alignwide{max-width:1000px;}.wp-block-group.wp-container-5 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-column.wp-container-9 .alignfull,.wp-block-group.wp-container-12 .alignfull,.wp-block-column.wp-container-13 .alignfull,.wp-block-group.wp-container-16 .alignfull,.wp-block-column.wp-container-17 .alignfull,.wp-block-post-content.wp-container-22 .alignfull,.wp-block-group.wp-container-24 .alignfull,.wp-block-group.wp-container-27 .alignfull,.wp-block-group.wp-container-28 .alignfull{max-width:none;}.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;}.wp-block-column.wp-container-9 > .alignwide,.wp-block-column.wp-container-13 > .alignwide,.wp-block-column.wp-container-17 > .alignwide{max-width:26px;}.wp-block-columns.wp-container-11,.wp-block-columns.wp-container-15,.wp-block-columns.wp-container-19,.wp-block-group.wp-container-20{flex-wrap:nowrap;}
</style>

To this:

<style id='layout-block-supports-inline-css'>
.wp-block-navigation.wp-container-3 {
	justify-content: flex-end;
}
.wp-block-group.wp-container-12 > .alignfull {
	margin-right: calc(26px * -1);
	margin-left: calc(69px * -1);
}
.wp-block-group.wp-container-16 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 402px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wp-block-group.wp-container-16 > .alignwide {
	max-width: 402px;
}
.wp-block-group.wp-container-4,.wp-block-group.wp-container-26 {
	justify-content: space-between;
}
.wp-block-group.wp-container-5 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-6 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-12 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-post-content.wp-container-22 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-24 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-27 > :where(:not(.alignleft):not(.alignright):not(.alignfull)),.wp-block-group.wp-container-28 > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 650px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.wp-block-group.wp-container-5 > .alignwide,.wp-block-group.wp-container-6 > .alignwide,.wp-block-group.wp-container-12 > .alignwide,.wp-block-post-content.wp-container-22 > .alignwide,.wp-block-group.wp-container-24 > .alignwide,.wp-block-group.wp-container-27 > .alignwide,.wp-block-group.wp-container-28 > .alignwide {
	max-width: 1000px;
}
.wp-block-group.wp-container-5 .alignfull,.wp-block-group.wp-container-6 .alignfull,.wp-block-column.wp-container-9 .alignfull,.wp-block-group.wp-container-12 .alignfull,.wp-block-column.wp-container-13 .alignfull,.wp-block-group.wp-container-16 .alignfull,.wp-block-column.wp-container-17 .alignfull,.wp-block-post-content.wp-container-22 .alignfull,.wp-block-group.wp-container-24 .alignfull,.wp-block-group.wp-container-27 .alignfull,.wp-block-group.wp-container-28 .alignfull {
	max-width: none;
}
.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;
}
.wp-block-column.wp-container-9 > .alignwide,.wp-block-column.wp-container-13 > .alignwide,.wp-block-column.wp-container-17 > .alignwide {
	max-width: 26px;
}
.wp-block-columns.wp-container-11,.wp-block-columns.wp-container-15,.wp-block-columns.wp-container-19,.wp-block-group.wp-container-20 {
	flex-wrap: nowrap;
}
</style>

How?

WP_Style_Engine_Processor->get_css( array( 'prettify'=> true ) ); // add new lines, a single indent and spaces.

WP_Style_Engine_CSS_Rule->get_css( true, 2 ); // prettify with an indent of 2 tabs

WP_Style_Engine_CSS_Declarations->get_declarations_string( true ); // prettify declarations (add spaces)

Testing Instructions

Unit tests

npm run test-unit-php

Manual

Run this branch using npm run wp-env start

Check that the pretty styles are output in the dev environment (http://localhost:8888/)

Disable prettify manually in order to see the minified CSS if you're working in a dev environment:

--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -365,7 +365,7 @@ class WP_Style_Engine {
                foreach ( $stores as $key => $store ) {
                        $processor = new WP_Style_Engine_Processor();
                        $processor->add_store( $store );
-                       $styles = $processor->get_css( array( 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) );
+                       $styles = $processor->get_css( array( 'prettify' => false ) );
 
                        if ( ! empty( $styles ) ) {
                                wp_register_style( $key, false, array(), true, true );

Check the source of your test page. 🚀

[andrewserong]

Nice one, this is going to make debugging style output quite a bit easier!

[skorasaurus]

Thanks for working on this; does this require use of wp-env to since it's relying on prettier ?

[ramonjd]

Thanks for working on this; does this require use of wp-env to since it's relying on prettier ?

👋 Do you mean prettier, the formatter?

The formatting options in the style engine, are completely independent and require no library.

Ultimately, it's formatting the CSS output with spaces, tabs and new lines to make it a bit more readable during development.

If you're not using wp-env to develop, you can set the PHP global constant SCRIPT_DEBUG to true in your development environment.

Now that you've brought it up, it might be a good idea to introduce some sort of filter/toggle. I'll make a note. Thank you!