Make WordPress Core

Changeset 56574


Ignore:
Timestamp:
09/14/2023 04:54:22 AM (3 years ago)
Author:
isabel_brison
Message:

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.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/script-loader.php

    r56568 r56574  
    30543054 *
    30553055 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules.
    3056  *                          Default true.
     3056 *                          Default false.
    30573057 *     @type bool $prettify Whether to add new lines and indents to output.
    30583058 *                          Default to whether the `SCRIPT_DEBUG` constant is defined.
  • trunk/src/wp-includes/style-engine.php

    r55820 r56574  
    131131 *                                 When set, the style engine will attempt to store the CSS rules.
    132132 *     @type bool        $optimize Whether to optimize the CSS output, e.g. combine rules.
    133  *                                 Default true.
     133 *                                 Default false.
    134134 *     @type bool        $prettify Whether to add new lines and indents to output.
    135135 *                                 Defaults to whether the `SCRIPT_DEBUG` constant is defined.
     
    179179 *
    180180 *     @type bool $optimize Whether to optimize the CSS output, e.g. combine rules.
    181  *                          Default true.
     181 *                          Default false.
    182182 *     @type bool $prettify Whether to add new lines and indents to output.
    183183 *                          Defaults to whether the `SCRIPT_DEBUG` constant is defined.
  • trunk/src/wp-includes/style-engine/class-wp-style-engine-processor.php

    r55820 r56574  
    8686         *
    8787         * @since 6.1.0
     88         * @since 6.4.0 The Optimization is no longer the default.
    8889         *
    8990         * @param array $options   {
     
    9192         *
    9293         *     @type bool $optimize Whether to optimize the CSS output, e.g. combine rules.
    93          *                          Default true.
     94         *                          Default false.
    9495         *     @type bool $prettify Whether to add new lines and indents to output.
    9596         *                          Defaults to whether the `SCRIPT_DEBUG` constant is defined.
     
    99100        public function get_css( $options = array() ) {
    100101                $defaults = array(
    101                         'optimize' => true,
     102                        'optimize' => false,
    102103                        'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
    103104                );
  • trunk/src/wp-includes/style-engine/class-wp-style-engine.php

    r56046 r56574  
    625625         *                                 When set, the style engine will attempt to store the CSS rules.
    626626         *     @type bool        $optimize Whether to optimize the CSS output, e.g. combine rules.
    627          *                                 Default true.
     627         *                                 Default false.
    628628         *     @type bool        $prettify Whether to add new lines and indents to output.
    629629         *                                 Defaults to whether the `SCRIPT_DEBUG` constant is defined.
  • trunk/tests/phpunit/tests/style-engine/styleEngine.php

    r56046 r56574  
    655655         * Tests that incoming styles are deduped and merged.
    656656         *
     657         * @ticket 58811
    657658         * @ticket 56467
    658659         *
     
    698699                $compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules, array( 'prettify' => false ) );
    699700
    700                 $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 );
     701                $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 );
    701702        }
    702703}
  • trunk/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php

    r54394 r56574  
    8282                $a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule, $a_more_wonderful_css_rule ) );
    8383
    84                 $expected = '.a-more-wonderful-rule {
     84                $expected = '.a-wonderful-rule {
     85        color: var(--wonderful-color);
     86        background-color: orange;
     87}
     88.a-very_wonderful-rule {
     89        color: var(--wonderful-color);
     90        background-color: orange;
     91}
     92.a-more-wonderful-rule {
    8593        font-family: Wonderful sans;
    8694        font-size: 1em;
    87         background-color: orange;
    88 }
    89 .a-wonderful-rule,
    90 .a-very_wonderful-rule {
    91         color: var(--wonderful-color);
    9295        background-color: orange;
    9396}
     
    185188         * Tests printing out 'unoptimized' CSS, that is, uncombined selectors and duplicate CSS rules.
    186189         *
     190         * This is the default.
     191         *
     192         * @ticket 58811
    187193         * @ticket 56467
    188194         *
     
    231237         * Tests that 'optimized' CSS is output, that is, that duplicate CSS rules are combined under their corresponding selectors.
    232238         *
    233          * @ticket 56467
    234          *
    235          * @covers ::get_css
    236          */
    237         public function test_should_optimize_css_output_by_default() {
     239         * @ticket 58811
     240         * @ticket 56467
     241         *
     242         * @covers ::get_css
     243         */
     244        public function test_should_not_optimize_css_output_by_default() {
    238245                $a_sweet_rule = new WP_Style_Engine_CSS_Rule(
    239246                        '.a-sweet-rule',
     
    256263
    257264                $this->assertSame(
    258                         '.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
     265                        '.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
    259266                        $a_sweet_processor->get_css( array( 'prettify' => false ) )
    260267                );
     
    262269
    263270        /**
    264          * Tests that incoming CSS rules are merged with existing CSS rules.
    265          *
     271         * Tests that incoming CSS rules are optimized and merged with existing CSS rules.
     272         *
     273         * @ticket 58811
    266274         * @ticket 56467
    267275         *
     
    287295                $this->assertSame(
    288296                        '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}',
    289                         $a_lovely_processor->get_css( array( 'prettify' => false ) ),
     297                        $a_lovely_processor->get_css(
     298                                array(
     299                                        'prettify' => false,
     300                                        'optimize' => true,
     301                                )
     302                        ),
    290303                        'Return value of get_css() does not match expectations when combining 2 CSS rules'
    291304                );
     
    309322                $this->assertSame(
    310323                        '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
    311                         $a_lovely_processor->get_css( array( 'prettify' => false ) ),
     324                        $a_lovely_processor->get_css(
     325                                array(
     326                                        'prettify' => false,
     327                                        'optimize' => true,
     328                                )
     329                        ),
    312330                        'Return value of get_css() does not match expectations when combining 4 CSS rules'
    313331                );
Note: See TracChangeset for help on using the changeset viewer.