Skip to content

Commit

Permalink
Style engine: prettify output (#42909)
Browse files Browse the repository at this point in the history 
* Introducing prettify to making debugging a little easier

* Updated tests

* Updated block supports tests

* Updated style engine tests

* Formatting.

Turning off prettify by default.

* Linter! You beast!

* Revert prettify by default

* Remove rtrim
Add defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) to style engine to determine prettifier
  • Loading branch information
@ramonjd
ramonjd authored Aug 3, 2022
1 parent 0c2ce6d commit 2f7e2cd
Show file tree
Hide file tree
Showing 13 changed files with 187 additions and 58 deletions.
14 changes: 11 additions & 3 deletions packages/style-engine/class-wp-style-engine-css-declarations.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,15 +116,23 @@ public function get_declarations() {
/**
* Filters and compiles the CSS declarations.
*
* @param boolean $should_prettify Whether to add spacing, new lines and indents.
* @param number $indent_count The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
*
* @return string The CSS declarations.
*/
public function get_declarations_string() {
public function get_declarations_string( $should_prettify = false, $indent_count = 0 ) {
$declarations_array = $this->get_declarations();
$declarations_output = '';
$indent = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
$suffix = $should_prettify ? ' ' : '';
$suffix = $should_prettify && $indent_count > 0 ? "\n" : $suffix;

foreach ( $declarations_array as $property => $value ) {
$filtered_declaration = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
$spacer = $should_prettify ? ' ' : '';
$filtered_declaration = esc_html( safecss_filter_attr( "{$property}:{$spacer}{$value}" ) );
if ( $filtered_declaration ) {
$declarations_output .= $filtered_declaration . '; ';
$declarations_output .= "{$indent}{$filtered_declaration};$suffix";
}
}
return rtrim( $declarations_output );
Expand Down
11 changes: 9 additions & 2 deletions packages/style-engine/class-wp-style-engine-css-rule.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,16 @@ public function get_selector() {
/**
* Get the CSS.
*
* @param boolean $should_prettify Whether to add spacing, new lines and indents.
* @param number $indent_count The number of tab indents to apply to the rule. Applies if `prettify` is `true`.
*
* @return string
*/
public function get_css() {
return $this->get_selector() . ' {' . $this->declarations->get_declarations_string() . '}';
public function get_css( $should_prettify = false, $indent_count = 0 ) {
$rule_indent = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
$declarations_indent = $should_prettify ? $indent_count + 1 : 0;
$new_line = $should_prettify ? "\n" : '';
$space = $should_prettify ? ' ' : '';
return $rule_indent . $this->get_selector() . "{$space}{{$new_line}" . $this->declarations->get_declarations_string( $should_prettify, $declarations_indent ) . "{$new_line}{$rule_indent}}";
}
}
4 changes: 3 additions & 1 deletion packages/style-engine/class-wp-style-engine-processor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ public function add_rules( $css_rules ) {
public function get_css( $options = array() ) {
$defaults = array(
'optimize' => true,
'prettify' => false,
);
$options = wp_parse_args( $options, $defaults );

Expand All @@ -88,7 +89,8 @@ public function get_css( $options = array() ) {
// Build the CSS.
$css = '';
foreach ( $this->css_rules as $rule ) {
$css .= $rule->get_css();
$css .= $rule->get_css( $options['prettify'] );
$css .= $options['prettify'] ? "\n" : '';
}
return $css;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ public static function process_and_enqueue_stored_styles() {
foreach ( $stores as $key => $store ) {
$processor = new WP_Style_Engine_Processor();
$processor->add_store( $store );
$styles = $processor->get_css();
$styles = $processor->get_css( array( 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) );

if ( ! empty( $styles ) ) {
wp_register_style( $key, false, array(), true, true );
Expand Down
67 changes: 61 additions & 6 deletions packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,66 @@ public function test_generate_css_declarations_string() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: red; border-top-left-radius: 99px; text-decoration: underline;',
'color:red;border-top-left-radius:99px;text-decoration:underline;',
$css_declarations->get_declarations_string()
);
}

/**
* Should compile css declarations into a prettified css declarations block string.
*/
public function test_generate_prettified_css_declarations_string() {
$input_declarations = array(
'color' => 'red',
'border-top-left-radius' => '99px',
'text-decoration' => 'underline',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: red; border-top-left-radius: 99px; text-decoration: underline;',
$css_declarations->get_declarations_string( true )
);
}

/**
* Should compile css declarations into a prettified and indented css declarations block string.
*/
public function test_generate_prettified_with_indent_css_declarations_string() {
$input_declarations = array(
'color' => 'red',
'border-top-left-radius' => '99px',
'text-decoration' => 'underline',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
' color: red;
border-top-left-radius: 99px;
text-decoration: underline;',
$css_declarations->get_declarations_string( true, 1 )
);
}

/**
* Should compile css declarations into a css declarations block string.
*/
public function test_generate_prettified_with_more_indents_css_declarations_string() {
$input_declarations = array(
'color' => 'red',
'border-top-left-radius' => '99px',
'text-decoration' => 'underline',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
' color: red;
border-top-left-radius: 99px;
text-decoration: underline;',
$css_declarations->get_declarations_string( true, 2 )
);
}

/**
* Should escape values and run the CSS through safecss_filter_attr.
*/
Expand All @@ -101,7 +156,7 @@ public function test_remove_unsafe_properties_and_values() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: <red/>; margin-right: 10em;',
'color:<red/>;margin-right:10em;',
$css_declarations->get_declarations_string()
);
}
Expand All @@ -118,13 +173,13 @@ public function test_remove_declaration() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: tomato; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
'color:tomato;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);

$css_declarations->remove_declaration( 'color' );
$this->assertSame(
'margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
'margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);
}
Expand All @@ -141,13 +196,13 @@ public function test_remove_declarations() {
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );

$this->assertSame(
'color: cucumber; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
'color:cucumber;margin:10em 10em 20em 1px;font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);

$css_declarations->remove_declarations( array( 'color', 'margin' ) );
$this->assertSame(
'font-family: Happy Font serif;',
'font-family:Happy Font serif;',
$css_declarations->get_declarations_string()
);
}
Expand Down
33 changes: 26 additions & 7 deletions packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ public function test_instantiate_with_selector_and_rules() {

$this->assertSame( $selector, $css_rule->get_selector() );

$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$expected = "$selector{{$css_declarations->get_declarations_string()}}";
$this->assertSame( $expected, $css_rule->get_css() );
}

Expand All @@ -45,12 +45,12 @@ public function test_dedupe_properties_in_rules() {
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
$css_rule->add_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );

$expected = '.taggart {font-size: 4px;}';
$expected = '.taggart{font-size:4px;}';
$this->assertSame( $expected, $css_rule->get_css() );
}

/**
* Should set selector and rules on instantiation.
* Should add declarations.
*/
public function test_add_declarations() {
// Declarations using a WP_Style_Engine_CSS_Declarations object.
Expand All @@ -60,12 +60,12 @@ public function test_add_declarations() {
$css_rule = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
$css_rule->add_declarations( $some_more_css_declarations );

$expected = '.hill-street-blues {margin-top: 10px; font-size: 1rem;}';
$expected = '.hill-street-blues{margin-top:10px;font-size:1rem;}';
$this->assertSame( $expected, $css_rule->get_css() );
}

/**
* Should set selector and rules on instantiation.
* Should set selector.
*/
public function test_set_selector() {
$selector = '.taggart';
Expand All @@ -79,7 +79,7 @@ public function test_set_selector() {
}

/**
* Should set selector and rules on instantiation.
* Should generate CSS rules.
*/
public function test_get_css() {
$selector = '.chips';
Expand All @@ -89,8 +89,27 @@ public function test_get_css() {
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$expected = "$selector{{$css_declarations->get_declarations_string()}}";

$this->assertSame( $expected, $css_rule->get_css() );
}

/**
* Should generate prettified CSS rules.
*/
public function test_get_prettified_css() {
$selector = '.baptiste';
$input_declarations = array(
'margin-left' => '0',
'font-family' => 'Detective Sans',
);
$css_declarations = new WP_Style_Engine_CSS_Declarations( $input_declarations );
$css_rule = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
$expected = '.baptiste {
margin-left: 0;
font-family: Detective Sans;
}';

$this->assertSame( $expected, $css_rule->get_css( true ) );
}
}
4 changes: 2 additions & 2 deletions packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ public function test_add_rule() {
$new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
$selector = '.wp-block-sauce a:hover';
$store_rule = $new_pie_store->add_rule( $selector );
$expected = "$selector {}";
$expected = "$selector{}";
$this->assertEquals( $expected, $store_rule->get_css() );

$pie_declarations = array(
Expand All @@ -97,7 +97,7 @@ public function test_add_rule() {
$store_rule->add_declarations( $css_declarations );

$store_rule = $new_pie_store->add_rule( $selector );
$expected = "$selector {{$css_declarations->get_declarations_string()}}";
$expected = "$selector{{$css_declarations->get_declarations_string()}}";
$this->assertEquals( $expected, $store_rule->get_css() );
}

Expand Down
54 changes: 46 additions & 8 deletions packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,49 @@ public function test_return_rules_as_css() {
$a_nice_processor = new WP_Style_Engine_Processor();
$a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
$this->assertEquals(
'.a-nice-rule {color: var(--nice-color); background-color: purple;}.a-nicer-rule {font-family: Nice sans; font-size: 1em; background-color: purple;}',
'.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
$a_nice_processor->get_css()
);
}

/**
* Should compile CSS rules.
*/
public function test_return_prettified_rules_as_css() {
$a_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-wonderful-rule' );
$a_wonderful_css_rule->add_declarations(
array(
'color' => 'var(--wonderful-color)',
'background-color' => 'orange',
)
);
$a_more_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-more-wonderful-rule' );
$a_more_wonderful_css_rule->add_declarations(
array(
'font-family' => 'Wonderful sans',
'font-size' => '1em',
'background-color' => 'orange',
)
);
$a_wonderful_processor = new WP_Style_Engine_Processor();
$a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_more_wonderful_css_rule ) );

$expected = '.a-wonderful-rule {
color: var(--wonderful-color);
background-color: orange;
}
.a-more-wonderful-rule {
font-family: Wonderful sans;
font-size: 1em;
background-color: orange;
}
';
$this->assertEquals(
$expected,
$a_wonderful_processor->get_css( array( 'prettify' => true ) )
);
}

/**
* Should compile CSS rules from the store.
*/
Expand All @@ -62,7 +100,7 @@ public function test_return_store_rules_as_css() {
$a_nice_renderer = new WP_Style_Engine_Processor();
$a_nice_renderer->add_store( $a_nice_store );
$this->assertEquals(
'.a-nice-rule {color: var(--nice-color); background-color: purple;}.a-nicer-rule {font-family: Nice sans; font-size: 1em; background-color: purple;}',
'.a-nice-rule{color:var(--nice-color);background-color:purple;}.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}',
$a_nice_renderer->get_css()
);
}
Expand Down Expand Up @@ -91,7 +129,7 @@ public function test_dedupe_and_merge_css_declarations() {
);
$an_excellent_processor->add_rules( $another_excellent_rule );
$this->assertEquals(
'.an-excellent-rule {color: var(--excellent-color); border-style: dotted; border-color: brown;}',
'.an-excellent-rule{color:var(--excellent-color);border-style:dotted;border-color:brown;}',
$an_excellent_processor->get_css()
);

Expand All @@ -105,7 +143,7 @@ public function test_dedupe_and_merge_css_declarations() {
);
$an_excellent_processor->add_rules( $yet_another_excellent_rule );
$this->assertEquals(
'.an-excellent-rule {color: var(--excellent-color); border-style: dashed; border-color: brown; border-width: 2px;}',
'.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}',
$an_excellent_processor->get_css()
);
}
Expand Down Expand Up @@ -142,7 +180,7 @@ public function test_output_verbose_css_rules() {
$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule, $the_sweetest_rule ) );

$this->assertEquals(
'.a-sweet-rule {color: var(--sweet-color); background-color: purple;}#an-even-sweeter-rule > marquee {color: var(--sweet-color); background-color: purple;}.the-sweetest-rule-of-all a {color: var(--sweet-color); background-color: purple;}',
'.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}.the-sweetest-rule-of-all a{color:var(--sweet-color);background-color:purple;}',
$a_sweet_processor->get_css( array( 'optimize' => false ) )
);
}
Expand Down Expand Up @@ -171,7 +209,7 @@ public function test_combine_css_rules() {
$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) );

$this->assertEquals(
'.a-sweet-rule,#an-even-sweeter-rule > marquee {color: var(--sweet-color); background-color: purple;}',
'.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
$a_sweet_processor->get_css()
);
}
Expand All @@ -194,7 +232,7 @@ public function test_combine_previously_added_css_rules() {
)
);
$a_lovely_processor->add_rules( $a_lovelier_rule );
$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule {border-color: purple;}', $a_lovely_processor->get_css() );
$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', $a_lovely_processor->get_css() );

$a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
'.a-most-lovely-rule',
Expand All @@ -213,7 +251,7 @@ public function test_combine_previously_added_css_rules() {
$a_lovely_processor->add_rules( $a_perfectly_lovely_rule );

$this->assertEquals(
'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule {border-color: purple;}',
'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
$a_lovely_processor->get_css()
);
}
Expand Down
Loading

0 comments on commit 2f7e2cd

Please sign in to comment.