From a0c2c36ed33a2bc122888ccec0a9958e5ab0b275 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 13:17:41 +0300
Subject: [PATCH 01/26] Add a new CSS_Rules object in the style engine

---
 lib/load.php                                  |   3 +
 .../class-wp-style-engine-css-rules.php       | 147 ++++++++++++++++++
 .../style-engine/class-wp-style-engine.php    |  27 +---
 3 files changed, 157 insertions(+), 20 deletions(-)
 create mode 100644 packages/style-engine/class-wp-style-engine-css-rules.php

diff --git a/lib/load.php b/lib/load.php
index 5504e8bd3fc3d0..367fa6bc9cea9d 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -156,6 +156,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php' ) ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
 }
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-gutenberg.php';
+}
 
 // Block supports overrides.
 require __DIR__ . '/block-supports/utils.php';
diff --git a/packages/style-engine/class-wp-style-engine-css-rules.php b/packages/style-engine/class-wp-style-engine-css-rules.php
new file mode 100644
index 00000000000000..801758b25df135
--- /dev/null
+++ b/packages/style-engine/class-wp-style-engine-css-rules.php
@@ -0,0 +1,147 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rules
+ *
+ * Holds, sanitizes and prints CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rules' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS styles rules for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rules {
+
+	/**
+	 * An array of styles (property => value pairs).
+	 *
+	 * @var array
+	 */
+	protected $styles = array();
+
+	/**
+	 * Add a single declaration.
+	 *
+	 * @param string $property The CSS property.
+	 * @param string $value    The CSS value.
+	 *
+	 * @return void
+	 */
+	public function add_declaration( $property, $value ) {
+		// Sanity check.
+		if ( empty( $property ) || ! is_string( $property ) || empty( $value ) ) {
+			return;
+		}
+
+		// Sanitize the property.
+		$property = $this->sanitize_property( $property );
+		// Bail early if the property is empty.
+		if ( empty( $property ) ) {
+			return;
+		}
+
+		// Trim the value. If empty, bail early.
+		$value = trim( $value );
+		if ( empty( $value ) ) {
+			return;
+		}
+
+		// Add the style.
+		$this->styles[ $property ] = $value;
+	}
+
+	/**
+	 * Add multiple declarations.
+	 *
+	 * @param array $declarations An array of declarations.
+	 *
+	 * @return void
+	 */
+	public function add_declarations( $declarations ) {
+		// Remove empty declarations.
+		$declarations = array_filter( $declarations );
+
+		// Loop declarations and add them.
+		foreach ( $declarations as $property => $value ) {
+			if ( empty( $property ) || empty( $value ) ) {
+				continue;
+			}
+			$this->add_declaration( $property, $value );
+		}
+	}
+
+	/**
+	 * Get the styles array.
+	 *
+	 * @return array
+	 */
+	public function get_styles() {
+		return $this->styles;
+	}
+
+	/**
+	 * Get the CSS styles.
+	 *
+	 * @return string The CSS styles.
+	 */
+	public function get_styles_string() {
+		$styles_array = $this->get_styles();
+		$styles       = '';
+		foreach ( $styles_array as $property => $value ) {
+			$styles .= esc_html( safecss_filter_attr( "{$property}:{$value}" ) ) . ';';
+		}
+		return $styles;
+	}
+
+	/**
+	 * Sanitize property names.
+	 *
+	 * @param string $property The CSS property.
+	 *
+	 * @return string The sanitized property name.
+	 */
+	protected function sanitize_property( $property ) {
+		$property = trim( $property );
+		return preg_replace( '/[^a-zA-Z0-9_-]/', '', $property );
+	}
+
+	/**
+	 * Add declarations from a CSS string.
+	 *
+	 * @param string $css A string of declarations.
+	 * @return void
+	 */
+	public function add_declarations_from_string( $css ) {
+		$this->add_declarations( $this->parse_declarations_string( $css ) );
+	}
+
+	/**
+	 * Parse CSS string declarations to an array.
+	 *
+	 * @param string $css The CSS string.
+	 *
+	 * @return array An array of declarations.
+	 */
+	protected function parse_declarations_string( $css ) {
+		$declarations = array();
+		$parts        = explode( ';', $css );
+		foreach ( $parts as $part ) {
+			if ( empty( $part ) ) {
+				continue;
+			}
+			$part        = trim( $part );
+			$declaration = explode( ':', $part );
+			if ( count( $declaration ) === 2 ) {
+				$declarations[ $declaration[0] ] = $declaration[1];
+			}
+		}
+
+		return $declarations;
+	}
+}
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index c4cdd0c19419cb..f146200f9234bb 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -396,32 +396,19 @@ public function generate( $block_styles, $options ) {
 		}
 
 		// Build CSS rules output.
-		$css_selector              = isset( $options['selector'] ) ? $options['selector'] : null;
-		$filtered_css_declarations = array();
-
-		if ( ! empty( $css_declarations ) ) {
-			// Generate inline style declarations.
-			foreach ( $css_declarations as $css_property => $css_value ) {
-				$filtered_css_declaration = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) );
-				if ( ! empty( $filtered_css_declaration ) ) {
-					$filtered_css_declarations[] = $filtered_css_declaration . ';';
-				}
-			}
-		}
+		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
+		$style_rules  = new WP_Style_Engine_CSS_Rules();
+		$style_rules->add_declarations( $css_declarations );
 
 		// The return object.
-		$styles_output = array();
+		$styles_output        = array();
+		$styles_output['css'] = $style_rules->get_styles_string();
 
 		// Return css, if any.
-		if ( ! empty( $filtered_css_declarations ) ) {
+		if ( ! empty( $styles_output['css'] ) ) {
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
-				$css_rule             = "$css_selector { ";
-				$css_rule            .= implode( ' ', $filtered_css_declarations );
-				$css_rule            .= ' }';
-				$styles_output['css'] = $css_rule;
-			} else {
-				$styles_output['css'] = implode( ' ', $filtered_css_declarations );
+				$styles_output['css'] = $css_selector . '{' . $styles_output['css'] . '}';
 			}
 		}
 

From 9f0b4baba4d7d2c09e28fc765da0618dbdb33cb7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 13:26:47 +0300
Subject: [PATCH 02/26] Allow named instances

---
 .../style-engine/class-wp-style-engine.php    | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index f146200f9234bb..750a8849d0ea62 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -230,6 +230,26 @@ public static function get_instance() {
 		return self::$instance;
 	}
 
+	/**
+	 * Get an instance of the WP_Style_Engine_CSS_Rules object.
+	 *
+	 * If a $selector is provided, then the same instance will be used each time the same $selector is used,
+	 * otherwise, a new instance will be created each time.
+	 *
+	 * @param string $selector The selector to use for the CSS rules.
+	 * @return WP_Style_Engine_CSS_Rules The CSS rules object.
+	 */
+	public function get_css_rules_object( $selector = null ) {
+		if ( null === $selector ) {
+			return new WP_Style_Engine_CSS_Rules();
+		}
+		static $instances = array();
+		if ( ! isset( $instances[ $selector ] ) ) {
+			$instances[ $selector ] = new WP_Style_Engine_CSS_Rules();
+		}
+		return $instances[ $selector ];
+	}
+
 	/**
 	 * Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
 	 *
@@ -397,7 +417,7 @@ public function generate( $block_styles, $options ) {
 
 		// Build CSS rules output.
 		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
-		$style_rules  = new WP_Style_Engine_CSS_Rules();
+		$style_rules  = $this->get_css_rules_object( $options['selector'] );
 		$style_rules->add_declarations( $css_declarations );
 
 		// The return object.
@@ -420,7 +440,6 @@ public function generate( $block_styles, $options ) {
 		return $styles_output;
 	}
 
-
 	/**
 	 * Style value parser that returns a CSS definition array comprising style properties
 	 * that have keys representing individual style properties, otherwise known as longhand CSS properties.

From 477f330457759c2ed0a3f4392d634f7ce2b06622 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 15:25:42 +0300
Subject: [PATCH 03/26] styles should be minified

---
 phpunit/block-supports/border-test.php | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php
index b139f83452a0a3..403889c059e013 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 );

From 55aad4bfc315dcfb2280fb3676fc88955e4f14dd Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 15:33:23 +0300
Subject: [PATCH 04/26] use sanitize_key

---
 packages/style-engine/class-wp-style-engine-css-rules.php | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules.php b/packages/style-engine/class-wp-style-engine-css-rules.php
index 801758b25df135..e00853414bb9cb 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules.php
@@ -107,8 +107,7 @@ public function get_styles_string() {
 	 * @return string The sanitized property name.
 	 */
 	protected function sanitize_property( $property ) {
-		$property = trim( $property );
-		return preg_replace( '/[^a-zA-Z0-9_-]/', '', $property );
+		return sanitize_key( $property );
 	}
 
 	/**

From 2a4f88d6bd73de17649252b1c43fc2c074dcd257 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 15:59:40 +0300
Subject: [PATCH 05/26] minify CSS in more tests

---
 phpunit/block-supports/colors-test.php     | 2 +-
 phpunit/block-supports/spacing-test.php    | 4 ++--
 phpunit/block-supports/typography-test.php | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php
index 11be67427a972a..e1b6d76cdf7920 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 613f415557cfdd..618c809b84f6ad 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 d41218a974ac64..c5d301485ef9d2 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 );
 	}

From d9e6790905a60a5147f45df78c5b54ad80e1f4dc Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 16:20:15 +0300
Subject: [PATCH 06/26] use the renamed classname

---
 packages/style-engine/class-wp-style-engine.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 750a8849d0ea62..f6bf7b30f6e563 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -231,21 +231,21 @@ public static function get_instance() {
 	}
 
 	/**
-	 * Get an instance of the WP_Style_Engine_CSS_Rules object.
+	 * Get an instance of the WP_Style_Engine_Gutenberg_CSS_Rules object.
 	 *
 	 * If a $selector is provided, then the same instance will be used each time the same $selector is used,
 	 * otherwise, a new instance will be created each time.
 	 *
 	 * @param string $selector The selector to use for the CSS rules.
-	 * @return WP_Style_Engine_CSS_Rules The CSS rules object.
+	 * @return WP_Style_Engine_Gutenberg_CSS_Rules The CSS rules object.
 	 */
 	public function get_css_rules_object( $selector = null ) {
 		if ( null === $selector ) {
-			return new WP_Style_Engine_CSS_Rules();
+			return new WP_Style_Engine_Gutenberg_CSS_Rules();
 		}
 		static $instances = array();
 		if ( ! isset( $instances[ $selector ] ) ) {
-			$instances[ $selector ] = new WP_Style_Engine_CSS_Rules();
+			$instances[ $selector ] = new WP_Style_Engine_Gutenberg_CSS_Rules();
 		}
 		return $instances[ $selector ];
 	}

From efd1f0c6ef331e3459d28571495607f65937031e Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 16:20:15 +0300
Subject: [PATCH 07/26] Revert "use the renamed classname"

This reverts commit 754af98fc51e4de5c026dcc6664137a18263e045.
---
 packages/style-engine/class-wp-style-engine.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index f6bf7b30f6e563..750a8849d0ea62 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -231,21 +231,21 @@ public static function get_instance() {
 	}
 
 	/**
-	 * Get an instance of the WP_Style_Engine_Gutenberg_CSS_Rules object.
+	 * Get an instance of the WP_Style_Engine_CSS_Rules object.
 	 *
 	 * If a $selector is provided, then the same instance will be used each time the same $selector is used,
 	 * otherwise, a new instance will be created each time.
 	 *
 	 * @param string $selector The selector to use for the CSS rules.
-	 * @return WP_Style_Engine_Gutenberg_CSS_Rules The CSS rules object.
+	 * @return WP_Style_Engine_CSS_Rules The CSS rules object.
 	 */
 	public function get_css_rules_object( $selector = null ) {
 		if ( null === $selector ) {
-			return new WP_Style_Engine_Gutenberg_CSS_Rules();
+			return new WP_Style_Engine_CSS_Rules();
 		}
 		static $instances = array();
 		if ( ! isset( $instances[ $selector ] ) ) {
-			$instances[ $selector ] = new WP_Style_Engine_Gutenberg_CSS_Rules();
+			$instances[ $selector ] = new WP_Style_Engine_CSS_Rules();
 		}
 		return $instances[ $selector ];
 	}

From aff41623ac50be0f0f67dd2790bcb75cab3a53d5 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 16:23:31 +0300
Subject: [PATCH 08/26] require the class in tests

---
 packages/style-engine/phpunit/class-wp-style-engine-test.php | 1 +
 1 file changed, 1 insertion(+)

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 e8274e85425fa3..4b643ab215d0ee 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php
@@ -6,6 +6,7 @@
  * @subpackage style-engine
  */
 
+require __DIR__ . '/../class-wp-style-engine-css-rules.php';
 require __DIR__ . '/../class-wp-style-engine.php';
 
 /**

From 54c7e51ea9aae208c1bf75f11eaf6efe1c5aa08a Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 09:06:35 +0300
Subject: [PATCH 09/26] Add back spaces

---
 packages/style-engine/class-wp-style-engine-css-rules.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules.php b/packages/style-engine/class-wp-style-engine-css-rules.php
index e00853414bb9cb..3f266b5d5138e1 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules.php
@@ -94,9 +94,9 @@ public function get_styles_string() {
 		$styles_array = $this->get_styles();
 		$styles       = '';
 		foreach ( $styles_array as $property => $value ) {
-			$styles .= esc_html( safecss_filter_attr( "{$property}:{$value}" ) ) . ';';
+			$styles .= esc_html( safecss_filter_attr( "{$property}: {$value}" ) ) . '; ';
 		}
-		return $styles;
+		return rtrim( $styles );
 	}
 
 	/**

From 8f4c70400b7b734cecaed7a7e099844615af6163 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 15:59:40 +0300
Subject: [PATCH 10/26] Revert "minify CSS in more tests"

This reverts commit b64d3892833e77c32ae65fad4deef972e5dc7454.
---
 phpunit/block-supports/colors-test.php     | 2 +-
 phpunit/block-supports/spacing-test.php    | 4 ++--
 phpunit/block-supports/typography-test.php | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/phpunit/block-supports/colors-test.php b/phpunit/block-supports/colors-test.php
index e1b6d76cdf7920..11be67427a972a 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 618c809b84f6ad..613f415557cfdd 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 c5d301485ef9d2..d41218a974ac64 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 );
 	}

From 20e4c95fd13387fd32f3a3304fc2d4b8abf6c96e Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 29 Jun 2022 15:25:42 +0300
Subject: [PATCH 11/26] Revert "styles should be minified"

This reverts commit b684a9f7ae8425289c17a4fee106642d27266071.
---
 phpunit/block-supports/border-test.php | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php
index 403889c059e013..b139f83452a0a3 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 );

From e3a60183ed27510f86e405bd1ea62eeb95f005a1 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 09:22:12 +0300
Subject: [PATCH 12/26] more tweaks

---
 packages/style-engine/class-wp-style-engine.php | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 750a8849d0ea62..c4bafc3b5319c0 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -421,14 +421,15 @@ public function generate( $block_styles, $options ) {
 		$style_rules->add_declarations( $css_declarations );
 
 		// The return object.
-		$styles_output        = array();
-		$styles_output['css'] = $style_rules->get_styles_string();
+		$styles_output = array();
+		$css           = $style_rules->get_styles_string();
 
 		// Return css, if any.
-		if ( ! empty( $styles_output['css'] ) ) {
+		if ( ! empty( $css ) ) {
+			$styles_output['css'] = $css;
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
-				$styles_output['css'] = $css_selector . '{' . $styles_output['css'] . '}';
+				$styles_output['css'] = $css_selector . '{ ' . $css . ' }';
 			}
 		}
 

From 3cdf5b13423426e1e56702278e7253065429345e Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 09:23:21 +0300
Subject: [PATCH 13/26] remove unused methods

---
 .../class-wp-style-engine-css-rules.php       | 34 -------------------
 1 file changed, 34 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules.php b/packages/style-engine/class-wp-style-engine-css-rules.php
index 3f266b5d5138e1..7acb84b2f9f5f3 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules.php
@@ -109,38 +109,4 @@ public function get_styles_string() {
 	protected function sanitize_property( $property ) {
 		return sanitize_key( $property );
 	}
-
-	/**
-	 * Add declarations from a CSS string.
-	 *
-	 * @param string $css A string of declarations.
-	 * @return void
-	 */
-	public function add_declarations_from_string( $css ) {
-		$this->add_declarations( $this->parse_declarations_string( $css ) );
-	}
-
-	/**
-	 * Parse CSS string declarations to an array.
-	 *
-	 * @param string $css The CSS string.
-	 *
-	 * @return array An array of declarations.
-	 */
-	protected function parse_declarations_string( $css ) {
-		$declarations = array();
-		$parts        = explode( ';', $css );
-		foreach ( $parts as $part ) {
-			if ( empty( $part ) ) {
-				continue;
-			}
-			$part        = trim( $part );
-			$declaration = explode( ':', $part );
-			if ( count( $declaration ) === 2 ) {
-				$declarations[ $declaration[0] ] = $declaration[1];
-			}
-		}
-
-		return $declarations;
-	}
 }

From 2cd623ae103dc4d999a2761700ee4ee7bc2d072b Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 09:51:16 +0300
Subject: [PATCH 14/26] Rename class to WP_Style_Engine_CSS_Declarations

---
 packages/style-engine/class-wp-style-engine-css-rules.php | 6 +++---
 packages/style-engine/class-wp-style-engine.php           | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-css-rules.php b/packages/style-engine/class-wp-style-engine-css-rules.php
index 7acb84b2f9f5f3..4f418634f6a549 100644
--- a/packages/style-engine/class-wp-style-engine-css-rules.php
+++ b/packages/style-engine/class-wp-style-engine-css-rules.php
@@ -1,13 +1,13 @@
 <?php
 /**
- * WP_Style_Engine_CSS_Rules
+ * WP_Style_Engine_CSS_Declarations
  *
  * Holds, sanitizes and prints CSS rules.
  *
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_CSS_Rules' ) ) {
+if ( class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
 	return;
 }
 
@@ -16,7 +16,7 @@
  *
  * @access private
  */
-class WP_Style_Engine_CSS_Rules {
+class WP_Style_Engine_CSS_Declarations {
 
 	/**
 	 * An array of styles (property => value pairs).
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index c4bafc3b5319c0..9b07da2af1234a 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -231,21 +231,21 @@ public static function get_instance() {
 	}
 
 	/**
-	 * Get an instance of the WP_Style_Engine_CSS_Rules object.
+	 * Get an instance of the WP_Style_Engine_CSS_Declarations object.
 	 *
 	 * If a $selector is provided, then the same instance will be used each time the same $selector is used,
 	 * otherwise, a new instance will be created each time.
 	 *
 	 * @param string $selector The selector to use for the CSS rules.
-	 * @return WP_Style_Engine_CSS_Rules The CSS rules object.
+	 * @return WP_Style_Engine_CSS_Declarations The CSS rules object.
 	 */
 	public function get_css_rules_object( $selector = null ) {
 		if ( null === $selector ) {
-			return new WP_Style_Engine_CSS_Rules();
+			return new WP_Style_Engine_CSS_Declarations();
 		}
 		static $instances = array();
 		if ( ! isset( $instances[ $selector ] ) ) {
-			$instances[ $selector ] = new WP_Style_Engine_CSS_Rules();
+			$instances[ $selector ] = new WP_Style_Engine_CSS_Declarations();
 		}
 		return $instances[ $selector ];
 	}

From 723a218490a850173ff2739f300343a0c6081487 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 09:59:24 +0300
Subject: [PATCH 15/26] rename file

---
 lib/load.php                                                  | 4 ++--
 ...s-rules.php => class-wp-style-engine-css-declarations.php} | 0
 packages/style-engine/phpunit/class-wp-style-engine-test.php  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/style-engine/{class-wp-style-engine-css-rules.php => class-wp-style-engine-css-declarations.php} (100%)

diff --git a/lib/load.php b/lib/load.php
index 367fa6bc9cea9d..c6777d3a86186f 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -156,8 +156,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php' ) ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-gutenberg.php';
 }
-if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-gutenberg.php' ) ) {
-	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-gutenberg.php';
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php';
 }
 
 // Block supports overrides.
diff --git a/packages/style-engine/class-wp-style-engine-css-rules.php b/packages/style-engine/class-wp-style-engine-css-declarations.php
similarity index 100%
rename from packages/style-engine/class-wp-style-engine-css-rules.php
rename to packages/style-engine/class-wp-style-engine-css-declarations.php
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 4b643ab215d0ee..30557f50e15cd9 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php
@@ -6,7 +6,7 @@
  * @subpackage style-engine
  */
 
-require __DIR__ . '/../class-wp-style-engine-css-rules.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
 require __DIR__ . '/../class-wp-style-engine.php';
 
 /**

From fe9f6bf468434b2496d78e8e28c4b07783bfcae5 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:00:09 +0300
Subject: [PATCH 16/26] fix class description

---
 .../style-engine/class-wp-style-engine-css-declarations.php   | 4 ++--
 1 file changed, 2 insertions(+), 2 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 4f418634f6a549..271e04972dfc2f 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -2,7 +2,7 @@
 /**
  * WP_Style_Engine_CSS_Declarations
  *
- * Holds, sanitizes and prints CSS rules.
+ * Holds, sanitizes and prints CSS rules declarations
  *
  * @package Gutenberg
  */
@@ -12,7 +12,7 @@
 }
 
 /**
- * Holds, sanitizes, processes and prints CSS styles rules for the style engine.
+ * Holds, sanitizes, processes and prints CSS styles rules declarations for the style engine.
  *
  * @access private
  */

From 9e1c2ccaeb32a327dff9afd91370339439489e3b Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:06:07 +0300
Subject: [PATCH 17/26] Explain that the implementation is temporary pending a
 store

---
 packages/style-engine/class-wp-style-engine.php | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 9b07da2af1234a..c518763e9dbd0f 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -240,6 +240,11 @@ public static function get_instance() {
 	 * @return WP_Style_Engine_CSS_Declarations The CSS rules object.
 	 */
 	public function get_css_rules_object( $selector = null ) {
+		/**
+		 * The implementation below will in the future be replaced with a "Store" object.
+		 * The store will be responsible for caching the CSS rules objects and selectors,
+		 * as well as allow for further CSS optimizations.
+		 */
 		if ( null === $selector ) {
 			return new WP_Style_Engine_CSS_Declarations();
 		}

From a11409ff98a8c1c47495ec950ba4f3f011029724 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:12:44 +0300
Subject: [PATCH 18/26] rename method for consistency

---
 packages/style-engine/class-wp-style-engine.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index c518763e9dbd0f..d0218786bc6297 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -239,7 +239,7 @@ public static function get_instance() {
 	 * @param string $selector The selector to use for the CSS rules.
 	 * @return WP_Style_Engine_CSS_Declarations The CSS rules object.
 	 */
-	public function get_css_rules_object( $selector = null ) {
+	public function get_css_declarations_object( $selector = null ) {
 		/**
 		 * The implementation below will in the future be replaced with a "Store" object.
 		 * The store will be responsible for caching the CSS rules objects and selectors,
@@ -422,7 +422,7 @@ public function generate( $block_styles, $options ) {
 
 		// Build CSS rules output.
 		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
-		$style_rules  = $this->get_css_rules_object( $options['selector'] );
+		$style_rules  = $this->get_css_declarations_object( $options['selector'] );
 		$style_rules->add_declarations( $css_declarations );
 
 		// The return object.

From 00d872c51bb83dce7408aa956f21fb402d595a68 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:21:22 +0300
Subject: [PATCH 19/26] add missing space

---
 packages/style-engine/class-wp-style-engine.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index d0218786bc6297..5d0cb6a13bc443 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -434,7 +434,7 @@ public function generate( $block_styles, $options ) {
 			$styles_output['css'] = $css;
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
-				$styles_output['css'] = $css_selector . '{ ' . $css . ' }';
+				$styles_output['css'] = $css_selector . ' { ' . $css . ' }';
 			}
 		}
 

From 852154b5270b13868cf486ef4cb302353fd85b75 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:27:18 +0300
Subject: [PATCH 20/26] account for zero value

---
 .../style-engine/class-wp-style-engine-css-declarations.php | 6 +++---
 1 file changed, 3 insertions(+), 3 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 271e04972dfc2f..1231c12868d793 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -35,7 +35,7 @@ class WP_Style_Engine_CSS_Declarations {
 	 */
 	public function add_declaration( $property, $value ) {
 		// Sanity check.
-		if ( empty( $property ) || ! is_string( $property ) || empty( $value ) ) {
+		if ( empty( $property ) || ! is_string( $property ) || ( empty( $value ) && 0 !== $value && '0' !== $value ) ) {
 			return;
 		}
 
@@ -48,12 +48,12 @@ public function add_declaration( $property, $value ) {
 
 		// Trim the value. If empty, bail early.
 		$value = trim( $value );
-		if ( empty( $value ) ) {
+		if ( empty( $value ) && 0 !== $value && '0' !== $value ) {
 			return;
 		}
 
 		// Add the style.
-		$this->styles[ $property ] = $value;
+		$this->styles[ $property ] = (string) $value;
 	}
 
 	/**

From d9af53333f7ebc83836caee77f6506d8c1df1974 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:40:00 +0300
Subject: [PATCH 21/26] remove unnecessary check

---
 .../style-engine/class-wp-style-engine-css-declarations.php    | 3 ---
 1 file changed, 3 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 1231c12868d793..13b421ba468a18 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -69,9 +69,6 @@ public function add_declarations( $declarations ) {
 
 		// Loop declarations and add them.
 		foreach ( $declarations as $property => $value ) {
-			if ( empty( $property ) || empty( $value ) ) {
-				continue;
-			}
 			$this->add_declaration( $property, $value );
 		}
 	}

From 2dc98e1dc68472ace19ead394a258467e239ec05 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:43:09 +0300
Subject: [PATCH 22/26] Only add style if it passes safecss checks

---
 .../style-engine/class-wp-style-engine-css-declarations.php  | 5 ++++-
 1 file changed, 4 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 13b421ba468a18..d14663a26a4c34 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -91,7 +91,10 @@ public function get_styles_string() {
 		$styles_array = $this->get_styles();
 		$styles       = '';
 		foreach ( $styles_array as $property => $value ) {
-			$styles .= esc_html( safecss_filter_attr( "{$property}: {$value}" ) ) . '; ';
+			$css = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
+			if ( $css ) {
+				$styles .= $css . '; ';
+			}
 		}
 		return rtrim( $styles );
 	}

From 8a2914f6ac11026f2519e4350f5d16aa08ba6ede Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 30 Jun 2022 10:54:51 +0300
Subject: [PATCH 23/26] simplify

---
 .../class-wp-style-engine-css-declarations.php       | 12 ++----------
 1 file changed, 2 insertions(+), 10 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 d14663a26a4c34..1279c238a9dbe3 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -34,10 +34,6 @@ class WP_Style_Engine_CSS_Declarations {
 	 * @return void
 	 */
 	public function add_declaration( $property, $value ) {
-		// Sanity check.
-		if ( empty( $property ) || ! is_string( $property ) || ( empty( $value ) && 0 !== $value && '0' !== $value ) ) {
-			return;
-		}
 
 		// Sanitize the property.
 		$property = $this->sanitize_property( $property );
@@ -48,12 +44,12 @@ public function add_declaration( $property, $value ) {
 
 		// Trim the value. If empty, bail early.
 		$value = trim( $value );
-		if ( empty( $value ) && 0 !== $value && '0' !== $value ) {
+		if ( '' === $value ) {
 			return;
 		}
 
 		// Add the style.
-		$this->styles[ $property ] = (string) $value;
+		$this->styles[ $property ] = $value;
 	}
 
 	/**
@@ -64,10 +60,6 @@ public function add_declaration( $property, $value ) {
 	 * @return void
 	 */
 	public function add_declarations( $declarations ) {
-		// Remove empty declarations.
-		$declarations = array_filter( $declarations );
-
-		// Loop declarations and add them.
 		foreach ( $declarations as $property => $value ) {
 			$this->add_declaration( $property, $value );
 		}

From db0dfe0daa7708a64ea891a4c1d135e9eee1c897 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 1 Jul 2022 09:55:50 +0300
Subject: [PATCH 24/26] remove primitive store

---
 .../style-engine/class-wp-style-engine.php    | 27 +------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 5d0cb6a13bc443..d05b81c927be60 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -230,31 +230,6 @@ public static function get_instance() {
 		return self::$instance;
 	}
 
-	/**
-	 * Get an instance of the WP_Style_Engine_CSS_Declarations object.
-	 *
-	 * If a $selector is provided, then the same instance will be used each time the same $selector is used,
-	 * otherwise, a new instance will be created each time.
-	 *
-	 * @param string $selector The selector to use for the CSS rules.
-	 * @return WP_Style_Engine_CSS_Declarations The CSS rules object.
-	 */
-	public function get_css_declarations_object( $selector = null ) {
-		/**
-		 * The implementation below will in the future be replaced with a "Store" object.
-		 * The store will be responsible for caching the CSS rules objects and selectors,
-		 * as well as allow for further CSS optimizations.
-		 */
-		if ( null === $selector ) {
-			return new WP_Style_Engine_CSS_Declarations();
-		}
-		static $instances = array();
-		if ( ! isset( $instances[ $selector ] ) ) {
-			$instances[ $selector ] = new WP_Style_Engine_CSS_Declarations();
-		}
-		return $instances[ $selector ];
-	}
-
 	/**
 	 * Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
 	 *
@@ -422,7 +397,7 @@ public function generate( $block_styles, $options ) {
 
 		// Build CSS rules output.
 		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
-		$style_rules  = $this->get_css_declarations_object( $options['selector'] );
+		$style_rules  = new WP_Style_Engine_CSS_Declarations();
 		$style_rules->add_declarations( $css_declarations );
 
 		// The return object.

From 03ca712836dd2e8e89d3701f5c9026cbdf549f6a Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 1 Jul 2022 12:33:07 +0300
Subject: [PATCH 25/26] Add object constructor

---
 .../class-wp-style-engine-css-declarations.php    | 15 +++++++++++++++
 packages/style-engine/class-wp-style-engine.php   |  3 +--
 2 files changed, 16 insertions(+), 2 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 1279c238a9dbe3..cde6b51355195e 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -25,6 +25,21 @@ class WP_Style_Engine_CSS_Declarations {
 	 */
 	protected $styles = array();
 
+	/**
+	 * Contructor for this object.
+	 *
+	 * If a `$styles` array is passed, it will be used to populate
+	 * the initial $styles prop of the object by calling add_declarations().
+	 *
+	 * @param array $styles An array of styles (property => value pairs).
+	 */
+	public function __construct( $styles = array() ) {
+		if ( empty( $styles ) ) {
+			return;
+		}
+		$this->add_declarations( $styles );
+	}
+
 	/**
 	 * Add a single declaration.
 	 *
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index d05b81c927be60..160abd65e484be 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -397,8 +397,7 @@ public function generate( $block_styles, $options ) {
 
 		// Build CSS rules output.
 		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
-		$style_rules  = new WP_Style_Engine_CSS_Declarations();
-		$style_rules->add_declarations( $css_declarations );
+		$style_rules  = new WP_Style_Engine_CSS_Declarations( $css_declarations );
 
 		// The return object.
 		$styles_output = array();

From 26d71a576d1d41b736b7bfed23ecc38a564e4599 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 4 Jul 2022 12:30:18 +0300
Subject: [PATCH 26/26] replace/rename the WP_Style_Engine_CSS_Declarations
 class on build

---
 tools/webpack/packages.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index dc161ab4dd75fd..c13ceea5de9ecc 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -35,7 +35,10 @@ const bundledPackagesPhpConfig = [
 	{
 		from: './packages/style-engine/',
 		to: 'build/style-engine/',
-		replaceClasses: [ 'WP_Style_Engine' ],
+		replaceClasses: [
+			'WP_Style_Engine_CSS_Declarations',
+			'WP_Style_Engine',
+		],
 	},
 ].map( ( { from, to, replaceClasses } ) => ( {
 	from: `${ from }/*.php`,