From f5763a7f4f2dcfbba92c49d542baa0c8c3e5495c Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 2 Aug 2022 14:20:59 +0300 Subject: [PATCH 01/13] Use the processor to add styles --- ...class-wp-style-engine-css-declarations.php | 17 +++++++++- .../class-wp-style-engine-processor.php | 34 +++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) 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 6e7fdfc58e08ff..a405f2b6a57118 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -185,7 +185,7 @@ public function get_declarations_string( $should_prettify = false, $indent_count $declarations_output .= "{$indent}{$filtered_declaration};$suffix"; } } - return rtrim( $declarations_output ); + return $declarations_output; } /** @@ -198,4 +198,19 @@ public function get_declarations_string( $should_prettify = false, $indent_count protected function sanitize_property( $property ) { return sanitize_key( $property ); } + + /** + * Sanitize values. + * + * @param string $value The CSS value. + * + * @return string The sanitized value. + */ + protected function sanitize_value( $value ) { + // Escape HTML. + $value = esc_html( $value ); + // Fix quotes to account for URLs. + $value = str_replace( array( ''', ''', '"', '"', '"', ''' ), array( "'", "'", '"', '"', '"', "'" ), $value ); + return trim( $value ); + } } diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php index 4974768c652673..6ef71b4bbaab8e 100644 --- a/packages/style-engine/class-wp-style-engine-processor.php +++ b/packages/style-engine/class-wp-style-engine-processor.php @@ -78,6 +78,40 @@ public function add_rules( $css_rules ) { return $this; } + /** + * Adds rules from a plain CSS string. + * + * @param string $css_string The CSS string to add. + */ + public function add_css_string( $css_string ) { + $css_array = array(); + // Split CSS by rules. + $css_rules = explode( '}', $css_string ); + // Loop rules and get the selectors. + foreach ( $css_rules as $css_rule ) { + $rule_parts = explode( '{', $css_rule ); + if ( 2 !== count( $rule_parts ) ) { + continue; + } + $selector = trim( $rule_parts[0] ); + if ( empty( $selector ) ) { + continue; + } + if ( ! isset( $css_array[ $selector ] ) ) { + $css_array[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector ); + } + $declarations = explode( ';', $rule_parts[1] ); + foreach ( $declarations as $declaration ) { + $declaration_parts = explode( ':', $declaration ); + if ( 2 !== count( $declaration_parts ) ) { + continue; + } + $css_array[ $selector ]->add_declarations( array( $declaration_parts[0] => $declaration_parts[1] ) ); + } + } + $this->add_rules( $css_array ); + } + /** * Get the CSS rules as a string. * From 915ab51c3779da429eb1d930f6892fa967331a1f Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 2 Aug 2022 15:36:18 +0300 Subject: [PATCH 02/13] fix failing tests - styles are optimized --- phpunit/class-wp-theme-json-test.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 742c2d948b4515..1b44bcc4e5a083 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -215,7 +215,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $ // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility. $this->assertEquals( - ':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}', + ':where(.is-layout-flex){gap:0.5em;}body .is-layout-flow > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-flow > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-flow > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-flex{display:flex;flex-wrap:wrap;align-items:center;}:where(.wp-block-columns.is-layout-flex){gap:2em;}', $stylesheet ); } @@ -575,7 +575,7 @@ public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; + $element_styles = 'a:where(:not(.wp-element-button)){background-color:red;color:green;}a:where(:not(.wp-element-button)):hover{background-color:green;color:red;font-size:10em;text-transform:uppercase;}a:where(:not(.wp-element-button)):focus{background-color:black;color:yellow;}'; $expected = $base_styles . $element_styles; @@ -614,7 +614,7 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; + $element_styles = 'a:where(:not(.wp-element-button)):hover{background-color:green;color:red;font-size:10em;text-transform:uppercase;}a:where(:not(.wp-element-button)):focus{background-color:black;color:yellow;}'; $expected = $base_styles . $element_styles; @@ -653,7 +653,7 @@ public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_ $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'h4{background-color: red;color: green;}'; + $element_styles = 'h4{background-color:red;color:green;}'; $expected = $base_styles . $element_styles; @@ -692,7 +692,7 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() { $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}'; + $element_styles = 'a:where(:not(.wp-element-button)){background-color:red;color:green;}a:where(:not(.wp-element-button)):hover{background-color:green;color:red;}'; $expected = $base_styles . $element_styles; @@ -740,7 +740,7 @@ public function test_get_stylesheet_handles_priority_of_elements_vs_block_elemen $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color: red;color: green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; + $element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color:red;color:green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color:green;color:red;font-size:10em;text-transform:uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color:black;color:yellow;}'; $expected = $base_styles . $element_styles; @@ -787,7 +787,7 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: black;color: yellow;}'; + $element_styles = 'a:where(:not(.wp-element-button)){background-color:red;color:green;}a:where(:not(.wp-element-button)):hover{background-color:green;color:red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color:black;color:yellow;}'; $expected = $base_styles . $element_styles; From a3dc60d6d2c04ac679e1a92858897949d63ad1b0 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 4 Aug 2022 09:55:02 +0300 Subject: [PATCH 03/13] Remove empty lines --- .../style-engine/class-wp-style-engine-css-declarations.php | 5 +++++ 1 file changed, 5 insertions(+) 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 a405f2b6a57118..aaaacec4282307 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -185,6 +185,11 @@ public function get_declarations_string( $should_prettify = false, $indent_count $declarations_output .= "{$indent}{$filtered_declaration};$suffix"; } } + + if ( $should_prettify ) { + // Remove empty lines. + $declarations_output = str_replace( "\n\n", "\n", $declarations_output ); + } return $declarations_output; } From 67e7702b8bdad5c571ca9ed1502ac091f6d643fd Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 4 Aug 2022 10:05:49 +0300 Subject: [PATCH 04/13] will this fix the error? --- .../style-engine/class-wp-style-engine-css-declarations.php | 4 ---- 1 file changed, 4 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 aaaacec4282307..82e69a70e90053 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -186,10 +186,6 @@ public function get_declarations_string( $should_prettify = false, $indent_count } } - if ( $should_prettify ) { - // Remove empty lines. - $declarations_output = str_replace( "\n\n", "\n", $declarations_output ); - } return $declarations_output; } From bb214a64d236acf5a43701033ba278fbcb3050ef Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 4 Aug 2022 10:39:40 +0300 Subject: [PATCH 05/13] yet another fix for tests --- .../style-engine/class-wp-style-engine-css-declarations.php | 5 +++++ 1 file changed, 5 insertions(+) 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 82e69a70e90053..d6b5623ccaf5b4 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -186,6 +186,11 @@ public function get_declarations_string( $should_prettify = false, $indent_count } } + // Trim if there's no indentation. + if ( $should_prettify && 0 === $indent_count ) { + $declarations_output = trim( $declarations_output ); + } + return $declarations_output; } From 7ccb72f10712546ec4889028542c5fe3a22dd9cc Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 4 Aug 2022 12:48:22 +0300 Subject: [PATCH 06/13] improve CSS string parser --- .../class-wp-style-engine-processor.php | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php index 6ef71b4bbaab8e..a59884df4a459a 100644 --- a/packages/style-engine/class-wp-style-engine-processor.php +++ b/packages/style-engine/class-wp-style-engine-processor.php @@ -87,28 +87,39 @@ public function add_css_string( $css_string ) { $css_array = array(); // Split CSS by rules. $css_rules = explode( '}', $css_string ); - // Loop rules and get the selectors. + foreach ( $css_rules as $css_rule ) { $rule_parts = explode( '{', $css_rule ); if ( 2 !== count( $rule_parts ) ) { continue; } + // Get the selector. $selector = trim( $rule_parts[0] ); if ( empty( $selector ) ) { continue; } + + // Create the rule object. if ( ! isset( $css_array[ $selector ] ) ) { $css_array[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector ); } - $declarations = explode( ';', $rule_parts[1] ); + + // Get the declarations. + $declarations = explode( ';', $rule_parts[1] ); + $declarations_array = array(); foreach ( $declarations as $declaration ) { $declaration_parts = explode( ':', $declaration ); if ( 2 !== count( $declaration_parts ) ) { continue; } - $css_array[ $selector ]->add_declarations( array( $declaration_parts[0] => $declaration_parts[1] ) ); + $declarations_array[ $declaration_parts[0] ] = $declaration_parts[1]; } + + // Add the declarations to the rule. + $css_array[ $selector ]->add_declarations( $declarations_array ); } + + // Add the rules to the processor. $this->add_rules( $css_array ); } From be19d76c0445dc39bbde388534d96f2c3a6ec937 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 5 Aug 2022 09:15:49 +0300 Subject: [PATCH 07/13] fix for generated styles --- .../class-wp-style-engine-css-declarations.php | 9 ++------- 1 file changed, 2 insertions(+), 7 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 d6b5623ccaf5b4..f83c59bb54b9f4 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -182,16 +182,11 @@ public function get_declarations_string( $should_prettify = false, $indent_count foreach ( $declarations_array as $property => $value ) { $filtered_declaration = static::filter_declaration( $property, $value, $spacer ); if ( $filtered_declaration ) { - $declarations_output .= "{$indent}{$filtered_declaration};$suffix"; + $declarations_output .= "{$indent}{$filtered_declaration}$suffix"; } } - // Trim if there's no indentation. - if ( $should_prettify && 0 === $indent_count ) { - $declarations_output = trim( $declarations_output ); - } - - return $declarations_output; + return rtrim( $declarations_output ); } /** From e877576c0866729b73fcbfe137c611ca5db9096a Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 5 Aug 2022 09:18:18 +0300 Subject: [PATCH 08/13] Move ; --- .../style-engine/class-wp-style-engine-css-declarations.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f83c59bb54b9f4..5a454df7260f42 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -182,7 +182,7 @@ public function get_declarations_string( $should_prettify = false, $indent_count foreach ( $declarations_array as $property => $value ) { $filtered_declaration = static::filter_declaration( $property, $value, $spacer ); if ( $filtered_declaration ) { - $declarations_output .= "{$indent}{$filtered_declaration}$suffix"; + $declarations_output .= "{$indent}{$filtered_declaration};$suffix"; } } From f0620e432b3676bb3e426026953e6c9f14b6fb16 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 5 Aug 2022 10:37:04 +0300 Subject: [PATCH 09/13] Move optimizing to gutenberg_get_global_stylesheet --- .../style-engine/class-wp-style-engine-css-declarations.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5a454df7260f42..63e106ea4ee508 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -197,7 +197,7 @@ public function get_declarations_string( $should_prettify = false, $indent_count * @return string The sanitized property name. */ protected function sanitize_property( $property ) { - return sanitize_key( $property ); + return trim( sanitize_key( $property ) ); } /** From 7f41262638ce19d1d7ba561adcb585cd15da052c Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 5 Aug 2022 10:56:27 +0300 Subject: [PATCH 10/13] revert tests tweaks --- phpunit/class-wp-theme-json-test.php | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index 1b44bcc4e5a083..742c2d948b4515 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -215,7 +215,7 @@ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles( $ // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility. $this->assertEquals( - ':where(.is-layout-flex){gap:0.5em;}body .is-layout-flow > .alignleft{float:left;margin-inline-start:0;margin-inline-end:2em;}body .is-layout-flow > .alignright{float:right;margin-inline-start:2em;margin-inline-end:0;}body .is-layout-flow > .aligncenter{margin-left:auto !important;margin-right:auto !important;}body .is-layout-flex{display:flex;flex-wrap:wrap;align-items:center;}:where(.wp-block-columns.is-layout-flex){gap:2em;}', + ':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}', $stylesheet ); } @@ -575,7 +575,7 @@ public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)){background-color:red;color:green;}a:where(:not(.wp-element-button)):hover{background-color:green;color:red;font-size:10em;text-transform:uppercase;}a:where(:not(.wp-element-button)):focus{background-color:black;color:yellow;}'; + $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; $expected = $base_styles . $element_styles; @@ -614,7 +614,7 @@ public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)):hover{background-color:green;color:red;font-size:10em;text-transform:uppercase;}a:where(:not(.wp-element-button)):focus{background-color:black;color:yellow;}'; + $element_styles = 'a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; $expected = $base_styles . $element_styles; @@ -653,7 +653,7 @@ public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_ $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'h4{background-color:red;color:green;}'; + $element_styles = 'h4{background-color: red;color: green;}'; $expected = $base_styles . $element_styles; @@ -692,7 +692,7 @@ public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() { $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)){background-color:red;color:green;}a:where(:not(.wp-element-button)):hover{background-color:green;color:red;}'; + $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}'; $expected = $base_styles . $element_styles; @@ -740,7 +740,7 @@ public function test_get_stylesheet_handles_priority_of_elements_vs_block_elemen $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color:red;color:green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color:green;color:red;font-size:10em;text-transform:uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color:black;color:yellow;}'; + $element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color: red;color: green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}'; $expected = $base_styles . $element_styles; @@ -787,7 +787,7 @@ public function test_get_stylesheet_handles_whitelisted_block_level_element_pseu $base_styles = 'body { margin: 0;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; - $element_styles = 'a:where(:not(.wp-element-button)){background-color:red;color:green;}a:where(:not(.wp-element-button)):hover{background-color:green;color:red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color:black;color:yellow;}'; + $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: black;color: yellow;}'; $expected = $base_styles . $element_styles; From b8f8eefa9797073b6ba67c9b611b0258a4b70a7c Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 9 Aug 2022 11:51:52 +0300 Subject: [PATCH 11/13] sanitize_value no longer needed --- .../class-wp-style-engine-css-declarations.php | 15 --------------- 1 file changed, 15 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 63e106ea4ee508..b2b56d341ea007 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -199,19 +199,4 @@ public function get_declarations_string( $should_prettify = false, $indent_count protected function sanitize_property( $property ) { return trim( sanitize_key( $property ) ); } - - /** - * Sanitize values. - * - * @param string $value The CSS value. - * - * @return string The sanitized value. - */ - protected function sanitize_value( $value ) { - // Escape HTML. - $value = esc_html( $value ); - // Fix quotes to account for URLs. - $value = str_replace( array( ''', ''', '"', '"', '"', ''' ), array( "'", "'", '"', '"', '"', "'" ), $value ); - return trim( $value ); - } } From 7952c2e26f50310dd9ce61c01a1aced4ee7acab0 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 9 Aug 2022 11:55:11 +0300 Subject: [PATCH 12/13] extra trim call not needed --- .../style-engine/class-wp-style-engine-css-declarations.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b2b56d341ea007..c3bef3630282be 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -197,6 +197,6 @@ public function get_declarations_string( $should_prettify = false, $indent_count * @return string The sanitized property name. */ protected function sanitize_property( $property ) { - return trim( sanitize_key( $property ) ); + return sanitize_key( $property ); } } From bb4c216a4da6de83c1495165ba81429fe215d65d Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 8 Mar 2023 12:44:54 +0200 Subject: [PATCH 13/13] Resolve rebase conflicts --- .../wordpress-6.2/get-global-styles-and-settings.php | 10 +++++++++- .../class-wp-style-engine-css-declarations.php | 4 ++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index e02a0466a0b98f..80fbd73f94543d 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -165,7 +165,15 @@ function gutenberg_get_global_stylesheet( $types = array() ) { if ( $can_use_cached ) { wp_cache_set( $cache_key, $stylesheet, $cache_group ); } - return $stylesheet; + + $processor = new WP_Style_Engine_Processor_Gutenberg(); + $processor->add_css_string( $stylesheet ); + + return $processor->get_css( + array( + 'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG, + ) + ); } /** 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 c3bef3630282be..89f2ec1f35d321 100644 --- a/packages/style-engine/class-wp-style-engine-css-declarations.php +++ b/packages/style-engine/class-wp-style-engine-css-declarations.php @@ -180,6 +180,10 @@ public function get_declarations_string( $should_prettify = false, $indent_count $spacer = $should_prettify ? ' ' : ''; foreach ( $declarations_array as $property => $value ) { + if ( 0 === strpos( $property, '--' ) ) { // Account for CSS variables. + $declarations_output .= "{$indent}{$property}:{$spacer}{$value};$suffix"; + continue; + } $filtered_declaration = static::filter_declaration( $property, $value, $spacer ); if ( $filtered_declaration ) { $declarations_output .= "{$indent}{$filtered_declaration};$suffix";