Changeset 58089 for trunk/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php

Timestamp:

05/03/2024 04:45:20 AM (7 months ago)

Author:

isabel_brison

Message:

Editor: add Style Engine support for nested CSS rules.

Adds support for passing a $rules_group string to wp_style_engine_get_stylesheet_from_css_rules(), so rules can be nested under a media query, layer or other rule.

Props isabel_brison, ramonopoly.
Fixes #61099.

File:

• trunk/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php (modified) (2 diffs)

trunk/tests/phpunit/tests/style-engine/wpStyleEngineProcessor.php

@@ -50 +50 @@
 
     /**
+     * Tests adding nested rules with at-rules and returning compiled CSS rules.
+     *
+     * @ticket 61099
+     *
+     * @covers ::add_rules
+     * @covers ::get_css
+     */
+    public function test_should_return_nested_rules_as_compiled_css() {
+        $a_nice_css_rule = new WP_Style_Engine_CSS_Rule( '.a-nice-rule' );
+        $a_nice_css_rule->add_declarations(
+            array(
+                'color'            => 'var(--nice-color)',
+                'background-color' => 'purple',
+            )
+        );
+        $a_nice_css_rule->set_rules_group( '@media (min-width: 80rem)' );
+
+        $a_nicer_css_rule = new WP_Style_Engine_CSS_Rule( '.a-nicer-rule' );
+        $a_nicer_css_rule->add_declarations(
+            array(
+                'font-family'      => 'Nice sans',
+                'font-size'        => '1em',
+                'background-color' => 'purple',
+            )
+        );
+        $a_nicer_css_rule->set_rules_group( '@layer nicety' );
+
+        $a_nice_processor = new WP_Style_Engine_Processor();
+        $a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
+
+        $this->assertSame(
+            '@media (min-width: 80rem){.a-nice-rule{color:var(--nice-color);background-color:purple;}}@layer nicety{.a-nicer-rule{font-family:Nice sans;font-size:1em;background-color:purple;}}',
+            $a_nice_processor->get_css( array( 'prettify' => false ) )
+        );
+    }
+
+    /**
      * Tests compiling CSS rules and formatting them with new lines and indents.
      *
@@ -97 +134 @@
 ';
         $this->assertSameIgnoreEOL(
+            $expected,
+            $a_wonderful_processor->get_css( array( 'prettify' => true ) )
+        );
+    }
+
+    /**
+     * Tests compiling nested CSS rules and formatting them with new lines and indents.
+     *
+     * @ticket 61099
+     *
+     * @covers ::get_css
+     */
+    public function test_should_return_prettified_nested_css_rules() {
+        $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_wonderful_css_rule->set_rules_group( '@media (min-width: 80rem)' );
+
+        $a_very_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-very_wonderful-rule' );
+        $a_very_wonderful_css_rule->add_declarations(
+            array(
+                'color'            => 'var(--wonderful-color)',
+                'background-color' => 'orange',
+            )
+        );
+        $a_very_wonderful_css_rule->set_rules_group( '@layer wonderfulness' );
+
+        $a_wonderful_processor = new WP_Style_Engine_Processor();
+        $a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule ) );
+
+        $expected = '@media (min-width: 80rem) {
+    .a-wonderful-rule {
+        color: var(--wonderful-color);
+        background-color: orange;
+    }
+}
+@layer wonderfulness {
+    .a-very_wonderful-rule {
+        color: var(--wonderful-color);
+        background-color: orange;
+    }
+}
+';
+        $this->assertSame(
             $expected,
             $a_wonderful_processor->get_css( array( 'prettify' => true ) )