From 2f7e2cd93a95f0f5eac3f9c7fda9519de7494f62 Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 3 Aug 2022 22:10:52 +1000 Subject: [PATCH] Style engine: prettify output (#42909) * 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 --- ...class-wp-style-engine-css-declarations.php | 14 +++- .../class-wp-style-engine-css-rule.php | 11 ++- .../class-wp-style-engine-processor.php | 4 +- .../style-engine/class-wp-style-engine.php | 2 +- ...-wp-style-engine-css-declarations-test.php | 67 +++++++++++++++++-- .../class-wp-style-engine-css-rule-test.php | 33 +++++++-- ...s-wp-style-engine-css-rules-store-test.php | 4 +- .../class-wp-style-engine-processor-test.php | 54 ++++++++++++--- .../phpunit/class-wp-style-engine-test.php | 30 ++++----- phpunit/block-supports/border-test.php | 16 ++--- phpunit/block-supports/colors-test.php | 2 +- phpunit/block-supports/spacing-test.php | 4 +- phpunit/block-supports/typography-test.php | 4 +- 13 files changed, 187 insertions(+), 58 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php index fe686edddaac06..c223dc74de2c0c 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -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 ); diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php index 5429b282f328db..91e40c7d9cfcaf 100644 --- a/packages/style-engine/class-wp-style-engine-css-rule.php +++ b/packages/style-engine/class-wp-style-engine-css-rule.php @@ -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}}"; } } diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php index e33c40e50abb8c..067f7f48c53fdb 100644 --- a/packages/style-engine/class-wp-style-engine-processor.php +++ b/packages/style-engine/class-wp-style-engine-processor.php @@ -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 ); @@ -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; } diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index 944a3cc7872a08..d7459ecc9d8297 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -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 ); diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php index f093a496d538a7..243a6bfd9956a9 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-css-declarations-test.php @@ -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. */ @@ -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() ); } @@ -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() ); } @@ -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() ); } diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php index 80547d998fb876..053f30acb46155 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rule-test.php @@ -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() ); } @@ -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. @@ -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'; @@ -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'; @@ -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 ) ); + } } diff --git a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php index 9fe664752e4bff..3105235008f1fd 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-css-rules-store-test.php @@ -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( @@ -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() ); } diff --git a/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php b/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php index af306390136072..2612a5757dced1 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php @@ -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. */ @@ -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() ); } @@ -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() ); @@ -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() ); } @@ -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 ) ) ); } @@ -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() ); } @@ -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', @@ -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() ); } diff --git a/packages/style-engine/phpunit/class-wp-style-engine-test.php b/packages/style-engine/phpunit/class-wp-style-engine-test.php index 9c3ca271faa3d8..dfd95443ecf92e 100644 --- a/packages/style-engine/phpunit/class-wp-style-engine-test.php +++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php @@ -100,7 +100,7 @@ public function data_get_styles_fixtures() { ), 'options' => array( 'convert_vars_to_classnames' => true ), 'expected_output' => array( - 'css' => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;', + 'css' => 'border-style:dotted;border-width:2rem;padding:0;margin:111px;', 'declarations' => array( 'border-style' => 'dotted', 'border-width' => '2rem', @@ -125,7 +125,7 @@ public function data_get_styles_fixtures() { 'context' => 'block-supports', ), 'expected_output' => array( - 'css' => 'margin: 20px;', + 'css' => 'margin:20px;', 'declarations' => array( 'margin' => '20px', ), @@ -176,7 +176,7 @@ public function data_get_styles_fixtures() { ), 'options' => null, 'expected_output' => array( - 'css' => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;', + 'css' => 'border-top-left-radius:99px;border-top-right-radius:98px;border-bottom-left-radius:97px;border-bottom-right-radius:96px;padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;', 'declarations' => array( 'border-top-left-radius' => '99px', 'border-top-right-radius' => '98px', @@ -209,7 +209,7 @@ public function data_get_styles_fixtures() { ), 'options' => null, 'expected_output' => array( - 'css' => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;', + 'css' => 'font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;', 'declarations' => array( 'font-size' => 'clamp(2em, 2vw, 4em)', 'font-family' => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif', @@ -236,7 +236,7 @@ public function data_get_styles_fixtures() { ), 'options' => array( 'selector' => '.wp-selector > p' ), 'expected_output' => array( - 'css' => '.wp-selector > p {padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem;}', + 'css' => '.wp-selector > p{padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;}', 'declarations' => array( 'padding-top' => '42px', 'padding-left' => '2%', @@ -256,7 +256,7 @@ public function data_get_styles_fixtures() { 'selector' => '.wp-selector', ), 'expected_output' => array( - 'css' => '.wp-selector {color: var(--wp--preset--color--my-little-pony);}', + 'css' => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}', 'declarations' => array( 'color' => 'var(--wp--preset--color--my-little-pony)', ), @@ -302,7 +302,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'color: var(--wp--preset--color--teal-independents);', + 'css' => 'color:var(--wp--preset--color--teal-independents);', 'declarations' => array( 'color' => 'var(--wp--preset--color--teal-independents)', ), @@ -319,7 +319,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'color: #fff;', + 'css' => 'color:#fff;', 'declarations' => array( 'color' => '#fff', ), @@ -353,7 +353,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);', + 'css' => 'padding:var(--wp--preset--spacing--20);margin:var(--wp--preset--spacing--10);', 'declarations' => array( 'padding' => 'var(--wp--preset--spacing--20)', 'margin' => 'var(--wp--preset--spacing--10)', @@ -380,7 +380,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;', + 'css' => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--20);margin-top:1rem;margin-bottom:1rem;', 'declarations' => array( 'padding-left' => 'var(--wp--preset--spacing--30)', 'padding-right' => 'var(--wp--preset--spacing--40)', @@ -407,7 +407,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'margin-top: 1rem; margin-bottom: 0;', + 'css' => 'margin-top:1rem;margin-bottom:0;', 'declarations' => array( 'margin-top' => '1rem', 'margin-bottom' => '0', @@ -456,7 +456,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;', + 'css' => 'border-top-color:#fe1;border-top-width:1.5rem;border-top-style:dashed;border-right-color:#fe2;border-right-width:1.4rem;border-right-style:solid;border-bottom-color:#fe3;border-bottom-width:1.3rem;border-left-color:var(--wp--preset--color--swampy-yellow);border-left-width:0.5rem;border-left-style:dotted;', 'declarations' => array( 'border-top-color' => '#fe1', 'border-top-width' => '1.5rem', @@ -499,7 +499,7 @@ public function data_get_styles_fixtures() { ), 'options' => array(), 'expected_output' => array( - 'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);', + 'css' => 'border-bottom-color:var(--wp--preset--color--terrible-lizard);', 'declarations' => array( 'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)', ), @@ -610,7 +610,7 @@ public function test_get_stylesheet_from_css_rules() { ); $compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules ); - $this->assertSame( '.saruman {color: white; height: 100px; border-style: solid; align-self: unset;}.gandalf {color: grey; height: 90px; border-style: dotted; align-self: safe center;}.radagast {color: brown; height: 60px; border-style: dashed; align-self: stretch;}', $compiled_stylesheet ); + $this->assertSame( '.saruman{color:white;height:100px;border-style:solid;align-self:unset;}.gandalf{color:grey;height:90px;border-style:dotted;align-self:safe center;}.radagast{color:brown;height:60px;border-style:dashed;align-self:stretch;}', $compiled_stylesheet ); } /** @@ -654,6 +654,6 @@ public function test_get_deduped_and_merged_stylesheet() { ); $compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules ); - $this->assertSame( '.gandalf {color: white; height: 190px; border-style: dotted; padding: 10px; margin-bottom: 100px;}.dumbledore,.rincewind {color: grey; height: 90px; border-style: dotted;}', $compiled_stylesheet ); + $this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet ); } } diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php index a199dd34ad833c..dd2b279867aeb7 100644 --- a/phpunit/block-supports/border-test.php +++ b/phpunit/block-supports/border-test.php @@ -117,7 +117,7 @@ function test_border_color_slug_with_numbers_is_kebab_cased_properly() { $actual = gutenberg_apply_border_support( $block_type, $block_atts ); $expected = array( 'class' => 'has-border-color has-red-border-color', - 'style' => 'border-radius: 10px; border-style: dashed; border-width: 1px;', + 'style' => 'border-radius:10px;border-style:dashed;border-width:1px;', ); $this->assertSame( $expected, $actual ); @@ -179,7 +179,7 @@ function test_flat_border_with_individual_skipped_serialization() { $actual = gutenberg_apply_border_support( $block_type, $block_atts ); $expected = array( - 'style' => 'border-style: dotted; border-width: 1px;', + 'style' => 'border-style:dotted;border-width:1px;', ); $this->assertSame( $expected, $actual ); @@ -208,7 +208,7 @@ function test_split_border_radius() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-left-radius: 1em; border-top-right-radius: 2rem; border-bottom-left-radius: 30px; border-bottom-right-radius: 4vh;', + 'style' => 'border-top-left-radius:1em;border-top-right-radius:2rem;border-bottom-left-radius:30px;border-bottom-right-radius:4vh;', ); $this->assertSame( $expected, $actual ); @@ -237,7 +237,7 @@ function test_flat_border_with_custom_color() { $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( 'class' => 'has-border-color', - 'style' => 'border-color: #72aee6; border-style: dashed; border-width: 2px;', + 'style' => 'border-color:#72aee6;border-style:dashed;border-width:2px;', ); $this->assertSame( $expected, $actual ); @@ -282,7 +282,7 @@ function test_split_borders_with_custom_colors() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-width: 2px; border-top-color: #72aee6; border-top-style: dashed; border-right-width: 0.25rem; border-right-color: #e65054; border-right-style: dotted; border-bottom-width: 0.5em; border-bottom-color: #007017; border-bottom-style: solid; border-left-width: 1px; border-left-color: #f6f7f7; border-left-style: solid;', + 'style' => 'border-top-width:2px;border-top-color:#72aee6;border-top-style:dashed;border-right-width:0.25rem;border-right-color:#e65054;border-right-style:dotted;border-bottom-width:0.5em;border-bottom-color:#007017;border-bottom-style:solid;border-left-width:1px;border-left-color:#f6f7f7;border-left-style:solid;', ); $this->assertSame( $expected, $actual ); @@ -372,7 +372,7 @@ function test_split_borders_with_skipped_individual_feature_serialization() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-color: #72aee6; border-right-color: #e65054; border-bottom-color: #007017; border-left-color: #f6f7f7;', + 'style' => 'border-top-color:#72aee6;border-right-color:#e65054;border-bottom-color:#007017;border-left-color:#f6f7f7;', ); $this->assertSame( $expected, $actual ); @@ -409,7 +409,7 @@ function test_partial_split_borders() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-width: 2px; border-top-color: #72aee6; border-top-style: dashed; border-right-width: 0.25rem; border-right-color: #e65054; border-left-style: solid;', + 'style' => 'border-top-width:2px;border-top-color:#72aee6;border-top-style:dashed;border-right-width:0.25rem;border-right-color:#e65054;border-left-style:solid;', ); $this->assertSame( $expected, $actual ); @@ -454,7 +454,7 @@ function test_split_borders_with_named_colors() { ); $actual = gutenberg_apply_border_support( $block_type, $block_attrs ); $expected = array( - 'style' => 'border-top-width: 2px; border-top-color: var(--wp--preset--color--red); border-top-style: dashed; border-right-width: 0.25rem; border-right-color: var(--wp--preset--color--green); border-right-style: dotted; border-bottom-width: 0.5em; border-bottom-color: var(--wp--preset--color--blue); border-bottom-style: solid; border-left-width: 1px; border-left-color: var(--wp--preset--color--yellow); border-left-style: solid;', + 'style' => 'border-top-width:2px;border-top-color:var(--wp--preset--color--red);border-top-style:dashed;border-right-width:0.25rem;border-right-color:var(--wp--preset--color--green);border-right-style:dotted;border-bottom-width:0.5em;border-bottom-color:var(--wp--preset--color--blue);border-bottom-style:solid;border-left-width:1px;border-left-color:var(--wp--preset--color--yellow);border-left-style:solid;', ); $this->assertSame( $expected, $actual ); diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php index fba82fafb4becb..89b3a9192270e6 100644 --- a/phpunit/block-supports/colors-test.php +++ b/phpunit/block-supports/colors-test.php @@ -136,7 +136,7 @@ function test_gradient_with_individual_skipped_serialization_block_supports() { $actual = gutenberg_apply_colors_support( $block_type, $block_atts ); $expected = array( 'class' => 'has-text-color', - 'style' => 'color: #d92828;', + 'style' => 'color:#d92828;', ); $this->assertSame( $expected, $actual ); diff --git a/phpunit/block-supports/spacing-test.php b/phpunit/block-supports/spacing-test.php index 51b537bff4d14a..4caaf12911f9ad 100644 --- a/phpunit/block-supports/spacing-test.php +++ b/phpunit/block-supports/spacing-test.php @@ -62,7 +62,7 @@ function test_spacing_style_is_applied() { $actual = gutenberg_apply_spacing_support( $block_type, $block_atts ); $expected = array( - 'style' => 'padding: 111px; margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;', + 'style' => 'padding:111px;margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;', ); $this->assertSame( $expected, $actual ); @@ -152,7 +152,7 @@ function test_margin_with_individual_skipped_serialization_block_supports() { $actual = gutenberg_apply_spacing_support( $block_type, $block_atts ); $expected = array( - 'style' => 'padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;', + 'style' => 'padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;', ); $this->assertSame( $expected, $actual ); diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index f5b5ac954f9e21..297c90a1bc8a91 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -75,7 +75,7 @@ function test_font_family_with_legacy_inline_styles_using_a_value() { $block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'serif' ) ) ); $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); - $expected = array( 'style' => 'font-family: serif;' ); + $expected = array( 'style' => 'font-family:serif;' ); $this->assertSame( $expected, $actual ); } @@ -175,7 +175,7 @@ function test_font_family_with_legacy_inline_styles_using_a_css_var() { $block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'var:preset|font-family|h1' ) ) ); $actual = gutenberg_apply_typography_support( $block_type, $block_atts ); - $expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' ); + $expected = array( 'style' => 'font-family:var(--wp--preset--font-family--h-1);' ); $this->assertSame( $expected, $actual ); }