From 725b2fb3638ed290c1648d5e3aa1ba923a3ea39b Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 15 Jul 2022 13:18:33 +0300
Subject: [PATCH 01/11] Add a WP_Style_Engine_Renderer object

---
 lib/load.php                                  |  3 +
 ...class-wp-style-engine-css-declarations.php | 11 +++
 .../class-wp-style-engine-renderer.php        | 83 +++++++++++++++++++
 tools/webpack/packages.js                     |  1 +
 4 files changed, 98 insertions(+)
 create mode 100644 packages/style-engine/class-wp-style-engine-renderer.php

diff --git a/lib/load.php b/lib/load.php
index 57f7993440f57a..186e51beb2bc77 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -122,6 +122,9 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php' ) ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php';
 }
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-renderer-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-renderer-gutenberg.php';
+}
 
 // Block supports overrides.
 require __DIR__ . '/block-supports/utils.php';
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 fe686edddaac06..c21dccb7617e61 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -140,4 +140,15 @@ public function get_declarations_string() {
 	protected function sanitize_property( $property ) {
 		return sanitize_key( $property );
 	}
+
+	/**
+	 * Get a hash for the defined declarations.
+	 *
+	 * @return string The hash.
+	 */
+	public function get_hash() {
+		$declarations = $this->get_declarations();
+		ksort( $declarations );
+		return md5( json_encode( $declarations ) );
+	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
new file mode 100644
index 00000000000000..1a0ba2bfcb1b48
--- /dev/null
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -0,0 +1,83 @@
+<?php
+/**
+ * WP_Style_Engine_Renderer
+ *
+ * Compiles and renders styles from a store of CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_Renderer' ) ) {
+	return;
+}
+
+/**
+ * Compiles and renders styles from a store of CSS rules.
+ *
+ * @access private
+ */
+class WP_Style_Engine_Renderer {
+
+	/**
+	 * The store of CSS rules.
+	 *
+	 * @var WP_Style_Engine_CSS_Rules_Store
+	 */
+	protected $store;
+	/**
+	 * Constructor.
+	 *
+	 * @param WP_Style_Engine_CSS_Rules_Store $store The store to render.
+	 */
+	public function __construct( WP_Style_Engine_CSS_Rules_Store $store ) {
+		$this->store = $store;
+	}
+
+	/**
+	 * Get the CSS rules as a string.
+	 *
+	 * @return string The rendered CSS.
+	 */
+	public function get_css() {
+		$css   = '';
+		$rules = $this->combine_rules_selectors();
+		foreach ( $rules as $selector => $rule ) {
+			if ( empty( $selector ) || ! $rule instanceof WP_Style_Engine_CSS_Rule ) {
+				continue;
+			}
+			$css .= $selector . ' {' . $rule->get_declarations()->get_declarations_string() . '}';
+		}
+		return $css;
+	}
+
+	/**
+	 * Combines selectors from the $styles_array
+	 * when they have the same styles.
+	 *
+	 * @return array
+	 */
+	private function combine_rules_selectors() {
+		$rules           = $this->store->get_all_rules();
+		$selector_hashes = array();
+		foreach ( $rules as $selector => $rule ) {
+			$selector_hashes[ $selector ] = $rule->get_declarations()->get_hash();
+		}
+
+		// Combine selectors that have the same styles.
+		$selector_rules = array();
+		foreach ( $selector_hashes as $selector => $hash ) {
+			// Get selectors that use the same styles.
+			$duplicates = array_keys( $selector_hashes, $hash, true );
+			// Add item directly if there are no duplicates.
+			if ( 1 === count( $duplicates ) ) {
+				$selector_rules[ $selector ] = $rules[ $selector ];
+				continue;
+			}
+			foreach ( $duplicates as $key ) {
+				unset( $selector_hashes[ $key ] );
+			}
+			$selector_rules[ implode( ',', $duplicates ) ] = $rules[ $selector ];
+		}
+		return $selector_rules;
+	}
+}
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 2f6720d579452f..85a83fe1a847e3 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -39,6 +39,7 @@ const bundledPackagesPhpConfig = [
 			'WP_Style_Engine_CSS_Declarations',
 			'WP_Style_Engine_CSS_Rules_Store',
 			'WP_Style_Engine_CSS_Rule',
+			'WP_Style_Engine_Renderer',
 			'WP_Style_Engine',
 		],
 	},

From 64ed04167bcb786207f0badd25b285bb432a4e72 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 15 Jul 2022 14:13:56 +0300
Subject: [PATCH 02/11] Better use of the engine objects

---
 .../class-wp-style-engine-renderer.php        | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
index 1a0ba2bfcb1b48..73d9d139f2f5b9 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -19,11 +19,12 @@
 class WP_Style_Engine_Renderer {
 
 	/**
-	 * The store of CSS rules.
+	 * The Style-Engine Store object.
 	 *
 	 * @var WP_Style_Engine_CSS_Rules_Store
 	 */
 	protected $store;
+
 	/**
 	 * Constructor.
 	 *
@@ -39,13 +40,14 @@ public function __construct( WP_Style_Engine_CSS_Rules_Store $store ) {
 	 * @return string The rendered CSS.
 	 */
 	public function get_css() {
+		// Combine CSS selectors that have identical declarations.
+		$this->combine_rules_selectors();
+
+		// Build the CSS.
 		$css   = '';
-		$rules = $this->combine_rules_selectors();
-		foreach ( $rules as $selector => $rule ) {
-			if ( empty( $selector ) || ! $rule instanceof WP_Style_Engine_CSS_Rule ) {
-				continue;
-			}
-			$css .= $selector . ' {' . $rule->get_declarations()->get_declarations_string() . '}';
+		$rules = $this->store->get_all_rules();
+		foreach ( $rules as $rule ) {
+			$css .= $rule->get_css();
 		}
 		return $css;
 	}
@@ -54,7 +56,7 @@ public function get_css() {
 	 * Combines selectors from the $styles_array
 	 * when they have the same styles.
 	 *
-	 * @return array
+	 * @return void
 	 */
 	private function combine_rules_selectors() {
 		$rules           = $this->store->get_all_rules();
@@ -64,20 +66,27 @@ private function combine_rules_selectors() {
 		}
 
 		// Combine selectors that have the same styles.
-		$selector_rules = array();
 		foreach ( $selector_hashes as $selector => $hash ) {
 			// Get selectors that use the same styles.
 			$duplicates = array_keys( $selector_hashes, $hash, true );
-			// Add item directly if there are no duplicates.
-			if ( 1 === count( $duplicates ) ) {
-				$selector_rules[ $selector ] = $rules[ $selector ];
+			// Skip if there are no duplicates.
+			if ( 1 >= count( $duplicates ) ) {
 				continue;
 			}
+			// Get the declarations.
+			$declarations = $rules[ $selector ]->get_declarations();
 			foreach ( $duplicates as $key ) {
+				// Unset the duplicates from the hashes array to avoid looping through them as well.
 				unset( $selector_hashes[ $key ] );
+				// Remove the rules from the store.
+				$this->store->remove_rule( $key );
+			}
+			// Create a new rule with the combined selectors.
+			$new_rule = $this->store->add_rule( implode( ',', $duplicates ) );
+			// Set the declarations. The extra check is in place because `add_rule` in the store can return `null`.
+			if ( $new_rule ) {
+				$new_rule->set_declarations( $declarations );
 			}
-			$selector_rules[ implode( ',', $duplicates ) ] = $rules[ $selector ];
 		}
-		return $selector_rules;
 	}
 }

From 317457e67690cffa109098782fbd0a7f46311dc3 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 18 Jul 2022 12:59:12 +1000
Subject: [PATCH 03/11] Added tests

---
 .../class-wp-style-engine-renderer-test.php   | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php

diff --git a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php b/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
new file mode 100644
index 00000000000000..fc8ffe533660ce
--- /dev/null
+++ b/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
@@ -0,0 +1,127 @@
+<?php
+/**
+ * Tests the Style Engine Renderer class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+require __DIR__ . '/../class-wp-style-engine-renderer.php';
+
+/**
+ * Tests for compiling and rendering styles from a store of CSS rules.
+ */
+class WP_Style_Engine_Renderer_Test extends WP_UnitTestCase {
+	/**
+	 * Should compile CSS rules from the store.
+	 */
+	public function test_return_store_rules_as_css() {
+		$a_nice_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'nice' );
+		$a_nice_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_nice_store );
+		$a_nice_store->add_rule( '.a-nice-rule' )->set_declarations(
+			array(
+				'color'            => 'var(--nice-color)',
+				'background-color' => 'purple',
+			)
+		);
+		$a_nice_store->add_rule( '.a-nicer-rule' )->set_declarations(
+			array(
+				'font-family'      => 'Nice sans',
+				'font-size'        => '1em',
+				'background-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-nice-rule {color: var(--nice-color); background-color: purple;}.a-nicer-rule {font-family: Nice sans; font-size: 1em; background-color: purple;}', $a_nice_renderer->get_css() );
+	}
+
+	/**
+	 * Should merge CSS declarations.
+	 */
+	public function test_dedupe_and_merge_css_declarations() {
+		$an_excellent_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'excellent' );
+		$an_excellent_renderer = new WP_Style_Engine_Renderer_Gutenberg( $an_excellent_store );
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->set_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dotted',
+			)
+		);
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->set_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dotted',
+				'border-color' => 'brown',
+			)
+		);
+
+		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dotted; border-color: brown;}', $an_excellent_renderer->get_css() );
+
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->set_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dashed',
+				'border-width' => '2px',
+			)
+		);
+
+		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dashed; border-color: brown; border-width: 2px;}', $an_excellent_renderer->get_css() );
+	}
+
+	/**
+	 * Should combine duplicate CSS rules.
+	 */
+	public function test_combine_css_rules() {
+		$a_sweet_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'sweet' );
+		$a_sweet_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_sweet_store );
+		$a_sweet_store->add_rule( '.a-sweet-rule' )->set_declarations(
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+		$a_sweet_store->add_rule( '#an-even-sweeter-rule > marquee' )->set_declarations(
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-sweet-rule,#an-even-sweeter-rule > marquee {color: var(--sweet-color); background-color: purple;}', $a_sweet_renderer->get_css() );
+	}
+
+	/**
+	 * Should combine and store CSS rules.
+	 */
+	public function test_store_combined_css_rules() {
+		$a_lovely_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'lovely' );
+		$a_lovely_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_lovely_store );
+		$a_lovely_store->add_rule( '.a-lovely-rule' )->set_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_store->add_rule( '.a-lovelier-rule' )->set_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule {border-color: purple;}', $a_lovely_renderer->get_css() );
+
+		$a_lovely_store->add_rule( '.a-most-lovely-rule' )->set_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_store->add_rule( '.a-perfectly-lovely-rule' )->set_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule {border-color: purple;}', $a_lovely_renderer->get_css() );
+	}
+}

From 5baaf51caf8bcb8124ef71b4ce65a48f109c2f81 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Mon, 18 Jul 2022 13:37:12 +1000
Subject: [PATCH 04/11] Updating method name to add_declarations after rebase

---
 .../class-wp-style-engine-renderer.php        |  2 +-
 .../class-wp-style-engine-renderer-test.php   | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
index 73d9d139f2f5b9..20f86c297dbf28 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -85,7 +85,7 @@ private function combine_rules_selectors() {
 			$new_rule = $this->store->add_rule( implode( ',', $duplicates ) );
 			// Set the declarations. The extra check is in place because `add_rule` in the store can return `null`.
 			if ( $new_rule ) {
-				$new_rule->set_declarations( $declarations );
+				$new_rule->add_declarations( $declarations );
 			}
 		}
 	}
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php b/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
index fc8ffe533660ce..063a7bc2c35378 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
@@ -20,13 +20,13 @@ class WP_Style_Engine_Renderer_Test extends WP_UnitTestCase {
 	public function test_return_store_rules_as_css() {
 		$a_nice_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'nice' );
 		$a_nice_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_nice_store );
-		$a_nice_store->add_rule( '.a-nice-rule' )->set_declarations(
+		$a_nice_store->add_rule( '.a-nice-rule' )->add_declarations(
 			array(
 				'color'            => 'var(--nice-color)',
 				'background-color' => 'purple',
 			)
 		);
-		$a_nice_store->add_rule( '.a-nicer-rule' )->set_declarations(
+		$a_nice_store->add_rule( '.a-nicer-rule' )->add_declarations(
 			array(
 				'font-family'      => 'Nice sans',
 				'font-size'        => '1em',
@@ -43,13 +43,13 @@ public function test_return_store_rules_as_css() {
 	public function test_dedupe_and_merge_css_declarations() {
 		$an_excellent_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'excellent' );
 		$an_excellent_renderer = new WP_Style_Engine_Renderer_Gutenberg( $an_excellent_store );
-		$an_excellent_store->add_rule( '.an-excellent-rule' )->set_declarations(
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
 			array(
 				'color'        => 'var(--excellent-color)',
 				'border-style' => 'dotted',
 			)
 		);
-		$an_excellent_store->add_rule( '.an-excellent-rule' )->set_declarations(
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
 			array(
 				'color'        => 'var(--excellent-color)',
 				'border-style' => 'dotted',
@@ -59,7 +59,7 @@ public function test_dedupe_and_merge_css_declarations() {
 
 		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dotted; border-color: brown;}', $an_excellent_renderer->get_css() );
 
-		$an_excellent_store->add_rule( '.an-excellent-rule' )->set_declarations(
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
 			array(
 				'color'        => 'var(--excellent-color)',
 				'border-style' => 'dashed',
@@ -76,13 +76,13 @@ public function test_dedupe_and_merge_css_declarations() {
 	public function test_combine_css_rules() {
 		$a_sweet_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'sweet' );
 		$a_sweet_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_sweet_store );
-		$a_sweet_store->add_rule( '.a-sweet-rule' )->set_declarations(
+		$a_sweet_store->add_rule( '.a-sweet-rule' )->add_declarations(
 			array(
 				'color'            => 'var(--sweet-color)',
 				'background-color' => 'purple',
 			)
 		);
-		$a_sweet_store->add_rule( '#an-even-sweeter-rule > marquee' )->set_declarations(
+		$a_sweet_store->add_rule( '#an-even-sweeter-rule > marquee' )->add_declarations(
 			array(
 				'color'            => 'var(--sweet-color)',
 				'background-color' => 'purple',
@@ -98,12 +98,12 @@ public function test_combine_css_rules() {
 	public function test_store_combined_css_rules() {
 		$a_lovely_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'lovely' );
 		$a_lovely_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_lovely_store );
-		$a_lovely_store->add_rule( '.a-lovely-rule' )->set_declarations(
+		$a_lovely_store->add_rule( '.a-lovely-rule' )->add_declarations(
 			array(
 				'border-color' => 'purple',
 			)
 		);
-		$a_lovely_store->add_rule( '.a-lovelier-rule' )->set_declarations(
+		$a_lovely_store->add_rule( '.a-lovelier-rule' )->add_declarations(
 			array(
 				'border-color' => 'purple',
 			)
@@ -111,12 +111,12 @@ public function test_store_combined_css_rules() {
 
 		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule {border-color: purple;}', $a_lovely_renderer->get_css() );
 
-		$a_lovely_store->add_rule( '.a-most-lovely-rule' )->set_declarations(
+		$a_lovely_store->add_rule( '.a-most-lovely-rule' )->add_declarations(
 			array(
 				'border-color' => 'purple',
 			)
 		);
-		$a_lovely_store->add_rule( '.a-perfectly-lovely-rule' )->set_declarations(
+		$a_lovely_store->add_rule( '.a-perfectly-lovely-rule' )->add_declarations(
 			array(
 				'border-color' => 'purple',
 			)

From 73c3036a69fbf6cace565404b453be0734744b2b Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 09:02:17 +0300
Subject: [PATCH 05/11] no need to use md5

---
 .../class-wp-style-engine-css-declarations.php       |  4 ++--
 .../style-engine/class-wp-style-engine-renderer.php  | 12 ++++++------
 2 files changed, 8 insertions(+), 8 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 c21dccb7617e61..8206311f13826b 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -146,9 +146,9 @@ protected function sanitize_property( $property ) {
 	 *
 	 * @return string The hash.
 	 */
-	public function get_hash() {
+	public function get_json() {
 		$declarations = $this->get_declarations();
 		ksort( $declarations );
-		return md5( json_encode( $declarations ) );
+		return json_encode( $declarations );
 	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
index 20f86c297dbf28..594c51c2928ae9 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -59,16 +59,16 @@ public function get_css() {
 	 * @return void
 	 */
 	private function combine_rules_selectors() {
-		$rules           = $this->store->get_all_rules();
-		$selector_hashes = array();
+		$rules          = $this->store->get_all_rules();
+		$selectors_json = array();
 		foreach ( $rules as $selector => $rule ) {
-			$selector_hashes[ $selector ] = $rule->get_declarations()->get_hash();
+			$selectors_json[ $selector ] = $rule->get_declarations()->get_json();
 		}
 
 		// Combine selectors that have the same styles.
-		foreach ( $selector_hashes as $selector => $hash ) {
+		foreach ( $selectors_json as $selector => $hash ) {
 			// Get selectors that use the same styles.
-			$duplicates = array_keys( $selector_hashes, $hash, true );
+			$duplicates = array_keys( $selectors_json, $hash, true );
 			// Skip if there are no duplicates.
 			if ( 1 >= count( $duplicates ) ) {
 				continue;
@@ -77,7 +77,7 @@ private function combine_rules_selectors() {
 			$declarations = $rules[ $selector ]->get_declarations();
 			foreach ( $duplicates as $key ) {
 				// Unset the duplicates from the hashes array to avoid looping through them as well.
-				unset( $selector_hashes[ $key ] );
+				unset( $selectors_json[ $key ] );
 				// Remove the rules from the store.
 				$this->store->remove_rule( $key );
 			}

From ff058f7764e82586e3af91c04ebffec91871532a Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 09:16:48 +0300
Subject: [PATCH 06/11] No need for an extra method

---
 .../class-wp-style-engine-css-declarations.php        | 11 -----------
 .../style-engine/class-wp-style-engine-renderer.php   |  4 +++-
 2 files changed, 3 insertions(+), 12 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 8206311f13826b..fe686edddaac06 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -140,15 +140,4 @@ public function get_declarations_string() {
 	protected function sanitize_property( $property ) {
 		return sanitize_key( $property );
 	}
-
-	/**
-	 * Get a hash for the defined declarations.
-	 *
-	 * @return string The hash.
-	 */
-	public function get_json() {
-		$declarations = $this->get_declarations();
-		ksort( $declarations );
-		return json_encode( $declarations );
-	}
 }
diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
index 594c51c2928ae9..e2caff2d3bdebe 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -62,7 +62,9 @@ private function combine_rules_selectors() {
 		$rules          = $this->store->get_all_rules();
 		$selectors_json = array();
 		foreach ( $rules as $selector => $rule ) {
-			$selectors_json[ $selector ] = $rule->get_declarations()->get_json();
+			$declarations = $rule->get_declarations()->get_declarations();
+			ksort( $declarations );
+			$selectors_json[ $selector ] = json_encode( $declarations );
 		}
 
 		// Combine selectors that have the same styles.

From f89d1ba0c26ce9445abd478d6a0b7007fa166d61 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 09:20:18 +0300
Subject: [PATCH 07/11] renaming stuff

---
 packages/style-engine/class-wp-style-engine-renderer.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
index e2caff2d3bdebe..e2fe5698a63a7a 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -68,9 +68,9 @@ private function combine_rules_selectors() {
 		}
 
 		// Combine selectors that have the same styles.
-		foreach ( $selectors_json as $selector => $hash ) {
+		foreach ( $selectors_json as $selector => $json ) {
 			// Get selectors that use the same styles.
-			$duplicates = array_keys( $selectors_json, $hash, true );
+			$duplicates = array_keys( $selectors_json, $json, true );
 			// Skip if there are no duplicates.
 			if ( 1 >= count( $duplicates ) ) {
 				continue;
@@ -78,7 +78,7 @@ private function combine_rules_selectors() {
 			// Get the declarations.
 			$declarations = $rules[ $selector ]->get_declarations();
 			foreach ( $duplicates as $key ) {
-				// Unset the duplicates from the hashes array to avoid looping through them as well.
+				// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
 				unset( $selectors_json[ $key ] );
 				// Remove the rules from the store.
 				$this->store->remove_rule( $key );

From ab0e6e557f0795347b73752e0be8728ac37a998c Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 09:42:46 +0300
Subject: [PATCH 08/11] micro-optimization

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

diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-renderer.php
index e2fe5698a63a7a..b25e882bb09c23 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-renderer.php
@@ -75,8 +75,6 @@ private function combine_rules_selectors() {
 			if ( 1 >= count( $duplicates ) ) {
 				continue;
 			}
-			// Get the declarations.
-			$declarations = $rules[ $selector ]->get_declarations();
 			foreach ( $duplicates as $key ) {
 				// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
 				unset( $selectors_json[ $key ] );
@@ -87,7 +85,7 @@ private function combine_rules_selectors() {
 			$new_rule = $this->store->add_rule( implode( ',', $duplicates ) );
 			// Set the declarations. The extra check is in place because `add_rule` in the store can return `null`.
 			if ( $new_rule ) {
-				$new_rule->add_declarations( $declarations );
+				$new_rule->add_declarations( $rules[ $selector ]->get_declarations() );
 			}
 		}
 	}

From 19a0d4db9a5cb2dad3236c08497faa2bc15e44d7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 09:54:39 +0300
Subject: [PATCH 09/11] rename Renderer to Processor

---
 ...enderer.php => class-wp-style-engine-processor.php} | 10 +++++-----
 .../phpunit/class-wp-style-engine-renderer-test.php    | 10 +++++-----
 tools/webpack/packages.js                              |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)
 rename packages/style-engine/{class-wp-style-engine-renderer.php => class-wp-style-engine-processor.php} (90%)

diff --git a/packages/style-engine/class-wp-style-engine-renderer.php b/packages/style-engine/class-wp-style-engine-processor.php
similarity index 90%
rename from packages/style-engine/class-wp-style-engine-renderer.php
rename to packages/style-engine/class-wp-style-engine-processor.php
index b25e882bb09c23..d2f5c672f86529 100644
--- a/packages/style-engine/class-wp-style-engine-renderer.php
+++ b/packages/style-engine/class-wp-style-engine-processor.php
@@ -1,22 +1,22 @@
 <?php
 /**
- * WP_Style_Engine_Renderer
+ * WP_Style_Engine_Processor
  *
- * Compiles and renders styles from a store of CSS rules.
+ * Compiles styles from a store of CSS rules.
  *
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_Renderer' ) ) {
+if ( class_exists( 'WP_Style_Engine_Processor' ) ) {
 	return;
 }
 
 /**
- * Compiles and renders styles from a store of CSS rules.
+ * Compiles styles from a store of CSS rules.
  *
  * @access private
  */
-class WP_Style_Engine_Renderer {
+class WP_Style_Engine_Processor {
 
 	/**
 	 * The Style-Engine Store object.
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php b/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
index 063a7bc2c35378..77f3f0892525c1 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
@@ -13,13 +13,13 @@
 /**
  * Tests for compiling and rendering styles from a store of CSS rules.
  */
-class WP_Style_Engine_Renderer_Test extends WP_UnitTestCase {
+class WP_Style_Engine_Processor_Test extends WP_UnitTestCase {
 	/**
 	 * Should compile CSS rules from the store.
 	 */
 	public function test_return_store_rules_as_css() {
 		$a_nice_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'nice' );
-		$a_nice_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_nice_store );
+		$a_nice_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_nice_store );
 		$a_nice_store->add_rule( '.a-nice-rule' )->add_declarations(
 			array(
 				'color'            => 'var(--nice-color)',
@@ -42,7 +42,7 @@ public function test_return_store_rules_as_css() {
 	 */
 	public function test_dedupe_and_merge_css_declarations() {
 		$an_excellent_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'excellent' );
-		$an_excellent_renderer = new WP_Style_Engine_Renderer_Gutenberg( $an_excellent_store );
+		$an_excellent_renderer = new WP_Style_Engine_Processor_Gutenberg( $an_excellent_store );
 		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
 			array(
 				'color'        => 'var(--excellent-color)',
@@ -75,7 +75,7 @@ public function test_dedupe_and_merge_css_declarations() {
 	 */
 	public function test_combine_css_rules() {
 		$a_sweet_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'sweet' );
-		$a_sweet_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_sweet_store );
+		$a_sweet_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_sweet_store );
 		$a_sweet_store->add_rule( '.a-sweet-rule' )->add_declarations(
 			array(
 				'color'            => 'var(--sweet-color)',
@@ -97,7 +97,7 @@ public function test_combine_css_rules() {
 	 */
 	public function test_store_combined_css_rules() {
 		$a_lovely_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'lovely' );
-		$a_lovely_renderer = new WP_Style_Engine_Renderer_Gutenberg( $a_lovely_store );
+		$a_lovely_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_lovely_store );
 		$a_lovely_store->add_rule( '.a-lovely-rule' )->add_declarations(
 			array(
 				'border-color' => 'purple',
diff --git a/tools/webpack/packages.js b/tools/webpack/packages.js
index 85a83fe1a847e3..0b145fef2ebfd7 100644
--- a/tools/webpack/packages.js
+++ b/tools/webpack/packages.js
@@ -39,7 +39,7 @@ const bundledPackagesPhpConfig = [
 			'WP_Style_Engine_CSS_Declarations',
 			'WP_Style_Engine_CSS_Rules_Store',
 			'WP_Style_Engine_CSS_Rule',
-			'WP_Style_Engine_Renderer',
+			'WP_Style_Engine_Processor',
 			'WP_Style_Engine',
 		],
 	},

From a4c3cbc400c54c25d4f01362058233289d4dc3d7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 10:18:32 +0300
Subject: [PATCH 10/11] :facepalm: forgot to rename files on inclusion

---
 lib/load.php                                                  | 4 ++--
 ...erer-test.php => class-wp-style-engine-processor-test.php} | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/style-engine/phpunit/{class-wp-style-engine-renderer-test.php => class-wp-style-engine-processor-test.php} (98%)

diff --git a/lib/load.php b/lib/load.php
index 186e51beb2bc77..cb87af52afe010 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -122,8 +122,8 @@ function gutenberg_is_experiment_enabled( $name ) {
 if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php' ) ) {
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php';
 }
-if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-renderer-gutenberg.php' ) ) {
-	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-renderer-gutenberg.php';
+if ( file_exists( __DIR__ . '/../build/style-engine/class-wp-style-engine-processor-gutenberg.php' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-processor-gutenberg.php';
 }
 
 // Block supports overrides.
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php b/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
similarity index 98%
rename from packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
rename to packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
index 77f3f0892525c1..8070024adf3133 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-renderer-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-processor-test.php
@@ -8,7 +8,7 @@
 require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
 require __DIR__ . '/../class-wp-style-engine-css-rule.php';
 require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
-require __DIR__ . '/../class-wp-style-engine-renderer.php';
+require __DIR__ . '/../class-wp-style-engine-processor.php';
 
 /**
  * Tests for compiling and rendering styles from a store of CSS rules.

From f8fa57d249ed3c0fe34752fa7875e86b46495fd3 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 18 Jul 2022 10:38:16 +0300
Subject: [PATCH 11/11] some inline comments

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

diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php
index d2f5c672f86529..646ea43e7261a8 100644
--- a/packages/style-engine/class-wp-style-engine-processor.php
+++ b/packages/style-engine/class-wp-style-engine-processor.php
@@ -37,7 +37,7 @@ public function __construct( WP_Style_Engine_CSS_Rules_Store $store ) {
 	/**
 	 * Get the CSS rules as a string.
 	 *
-	 * @return string The rendered CSS.
+	 * @return string The computed CSS.
 	 */
 	public function get_css() {
 		// Combine CSS selectors that have identical declarations.
@@ -53,13 +53,14 @@ public function get_css() {
 	}
 
 	/**
-	 * Combines selectors from the $styles_array
-	 * when they have the same styles.
+	 * Combines selectors from the rules store when they have the same styles.
 	 *
 	 * @return void
 	 */
 	private function combine_rules_selectors() {
-		$rules          = $this->store->get_all_rules();
+		$rules = $this->store->get_all_rules();
+
+		// Build an array of selectors along with the JSON-ified styles to make comparisons easier.
 		$selectors_json = array();
 		foreach ( $rules as $selector => $rule ) {
 			$declarations = $rule->get_declarations()->get_declarations();