From 1a168a199e3497ac254db09862b0c0b15497b849 Mon Sep 17 00:00:00 2001 From: Isabel Brison Date: Thu, 14 Sep 2023 04:54:22 +0000 Subject: [PATCH] Editor: disable default style engine optimisation. Stops style engine from combining CSS selectors by default so that rule order is preserved. Props ramonopoly, rajinsharwar, timdix, costdev, audrasjb, SergeyBiryukov, JeffPaul, mukesh27. Fixes #58811. git-svn-id: https://develop.svn.wordpress.org/trunk@56574 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/script-loader.php | 2 +- src/wp-includes/style-engine.php | 4 +-- .../class-wp-style-engine-processor.php | 5 +-- .../style-engine/class-wp-style-engine.php | 2 +- .../tests/style-engine/styleEngine.php | 3 +- .../style-engine/wpStyleEngineProcessor.php | 36 ++++++++++++++----- 6 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 27f5a3714c..adf309a12f 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -3053,7 +3053,7 @@ function wp_enqueue_block_support_styles( $style, $priority = 10 ) { * Default empty array. * * @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. - * Default true. + * Default false. * @type bool $prettify Whether to add new lines and indents to output. * Default to whether the `SCRIPT_DEBUG` constant is defined. * } diff --git a/src/wp-includes/style-engine.php b/src/wp-includes/style-engine.php index 4a93d2cc5a..5b5545c85e 100644 --- a/src/wp-includes/style-engine.php +++ b/src/wp-includes/style-engine.php @@ -130,7 +130,7 @@ function wp_style_engine_get_styles( $block_styles, $options = array() ) { * e.g. 'block-supports' or 'global-styles'. Default 'block-supports'. * When set, the style engine will attempt to store the CSS rules. * @type bool $optimize Whether to optimize the CSS output, e.g. combine rules. - * Default true. + * Default false. * @type bool $prettify Whether to add new lines and indents to output. * Defaults to whether the `SCRIPT_DEBUG` constant is defined. * } @@ -178,7 +178,7 @@ function wp_style_engine_get_stylesheet_from_css_rules( $css_rules, $options = a * Optional. An array of options. Default empty array. * * @type bool $optimize Whether to optimize the CSS output, e.g. combine rules. - * Default true. + * Default false. * @type bool $prettify Whether to add new lines and indents to output. * Defaults to whether the `SCRIPT_DEBUG` constant is defined. * } diff --git a/src/wp-includes/style-engine/class-wp-style-engine-processor.php b/src/wp-includes/style-engine/class-wp-style-engine-processor.php index c603d1c509..0778748498 100644 --- a/src/wp-includes/style-engine/class-wp-style-engine-processor.php +++ b/src/wp-includes/style-engine/class-wp-style-engine-processor.php @@ -85,12 +85,13 @@ class WP_Style_Engine_Processor { * Gets the CSS rules as a string. * * @since 6.1.0 + * @since 6.4.0 The Optimization is no longer the default. * * @param array $options { * Optional. An array of options. Default empty array. * * @type bool $optimize Whether to optimize the CSS output, e.g. combine rules. - * Default true. + * Default false. * @type bool $prettify Whether to add new lines and indents to output. * Defaults to whether the `SCRIPT_DEBUG` constant is defined. * } @@ -98,7 +99,7 @@ class WP_Style_Engine_Processor { */ public function get_css( $options = array() ) { $defaults = array( - 'optimize' => true, + 'optimize' => false, 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG, ); $options = wp_parse_args( $options, $defaults ); diff --git a/src/wp-includes/style-engine/class-wp-style-engine.php b/src/wp-includes/style-engine/class-wp-style-engine.php index bdaae4a1f7..da1afe42ca 100644 --- a/src/wp-includes/style-engine/class-wp-style-engine.php +++ b/src/wp-includes/style-engine/class-wp-style-engine.php @@ -624,7 +624,7 @@ final class WP_Style_Engine { * e.g. 'block-supports' or 'global-styles'. Default 'block-supports'. * When set, the style engine will attempt to store the CSS rules. * @type bool $optimize Whether to optimize the CSS output, e.g. combine rules. - * Default true. + * Default false. * @type bool $prettify Whether to add new lines and indents to output. * Defaults to whether the `SCRIPT_DEBUG` constant is defined. * } diff --git a/tests/phpunit/tests/style-engine/styleEngine.php b/tests/phpunit/tests/style-engine/styleEngine.php index 3d6a47aa94..299cf23fbc 100644 --- a/tests/phpunit/tests/style-engine/styleEngine.php +++ b/tests/phpunit/tests/style-engine/styleEngine.php @@ -654,6 +654,7 @@ class Tests_wpStyleEngine extends WP_UnitTestCase { /** * Tests that incoming styles are deduped and merged. * + * @ticket 58811 * @ticket 56467 * * @covers ::wp_style_engine_get_stylesheet_from_css_rules @@ -697,6 +698,6 @@ class Tests_wpStyleEngine extends WP_UnitTestCase { $compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) ); - $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{color:grey;height:90px;border-style:dotted;}.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet ); } } diff --git a/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php b/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php index 46201dab14..d38f46d0de 100644 --- a/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php +++ b/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php @@ -81,16 +81,19 @@ class Tests_Style_Engine_wpStyleEngineProcessor extends WP_UnitTestCase { $a_wonderful_processor = new WP_Style_Engine_Processor(); $a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule, $a_more_wonderful_css_rule ) ); - $expected = '.a-more-wonderful-rule { - font-family: Wonderful sans; - font-size: 1em; + $expected = '.a-wonderful-rule { + color: var(--wonderful-color); background-color: orange; } -.a-wonderful-rule, .a-very_wonderful-rule { color: var(--wonderful-color); background-color: orange; } +.a-more-wonderful-rule { + font-family: Wonderful sans; + font-size: 1em; + background-color: orange; +} '; $this->assertSameIgnoreEOL( $expected, @@ -184,6 +187,9 @@ class Tests_Style_Engine_wpStyleEngineProcessor extends WP_UnitTestCase { /** * Tests printing out 'unoptimized' CSS, that is, uncombined selectors and duplicate CSS rules. * + * This is the default. + * + * @ticket 58811 * @ticket 56467 * * @covers ::get_css @@ -230,11 +236,12 @@ class Tests_Style_Engine_wpStyleEngineProcessor extends WP_UnitTestCase { /** * Tests that 'optimized' CSS is output, that is, that duplicate CSS rules are combined under their corresponding selectors. * + * @ticket 58811 * @ticket 56467 * * @covers ::get_css */ - public function test_should_optimize_css_output_by_default() { + public function test_should_not_optimize_css_output_by_default() { $a_sweet_rule = new WP_Style_Engine_CSS_Rule( '.a-sweet-rule', array( @@ -255,14 +262,15 @@ class Tests_Style_Engine_wpStyleEngineProcessor extends WP_UnitTestCase { $a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) ); $this->assertSame( - '.a-sweet-rule,#an-even-sweeter-rule > marquee{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;}', $a_sweet_processor->get_css( array( 'prettify' => false ) ) ); } /** - * Tests that incoming CSS rules are merged with existing CSS rules. + * Tests that incoming CSS rules are optimized and merged with existing CSS rules. * + * @ticket 58811 * @ticket 56467 * * @covers ::add_rules @@ -286,7 +294,12 @@ class Tests_Style_Engine_wpStyleEngineProcessor extends WP_UnitTestCase { $this->assertSame( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', - $a_lovely_processor->get_css( array( 'prettify' => false ) ), + $a_lovely_processor->get_css( + array( + 'prettify' => false, + 'optimize' => true, + ) + ), 'Return value of get_css() does not match expectations when combining 2 CSS rules' ); @@ -308,7 +321,12 @@ class Tests_Style_Engine_wpStyleEngineProcessor extends WP_UnitTestCase { $this->assertSame( '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}', - $a_lovely_processor->get_css( array( 'prettify' => false ) ), + $a_lovely_processor->get_css( + array( + 'prettify' => false, + 'optimize' => true, + ) + ), 'Return value of get_css() does not match expectations when combining 4 CSS rules' ); }