Add a WP_Style_Engine_Renderer object

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';

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 ) );
+	}
 }

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;
+	}
+}

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',
 		],
 	},