@wordpress/style-engine 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 0.13.0 (2022-07-27)
+
 ## 0.12.0 (2022-07-13)
 
 ## 0.11.0 (2022-06-29)

package/class-wp-style-engine-css-declarations.php

@@ -67,6 +67,17 @@ class WP_Style_Engine_CSS_Declarations {
 		$this->declarations[ $property ] = $value;
 	}
 
+	/**
+	 * Remove a single declaration.
+	 *
+	 * @param string $property The CSS property.
+	 *
+	 * @return void
+	 */
+	public function remove_declaration( $property ) {
+		unset( $this->declarations[ $property ] );
+	}
+
 	/**
 	 * Add multiple declarations.
 	 *
@@ -80,6 +91,19 @@ class WP_Style_Engine_CSS_Declarations {
 		}
 	}
 
+	/**
+	 * Remove multiple declarations.
+	 *
+	 * @param array $declarations An array of properties.
+	 *
+	 * @return void
+	 */
+	public function remove_declarations( $declarations = array() ) {
+		foreach ( $declarations as $property ) {
+			$this->remove_declaration( $property );
+		}
+	}
+
 	/**
 	 * Get the declarations array.
 	 *

package/class-wp-style-engine-css-rule.php

@@ -0,0 +1,115 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rule
+ *
+ * An object for CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rule {
+
+	/**
+	 * The selector.
+	 *
+	 * @var string
+	 */
+	protected $selector;
+
+	/**
+	 * The selector declarations.
+	 *
+	 * Contains a WP_Style_Engine_CSS_Declarations object.
+	 *
+	 * @var WP_Style_Engine_CSS_Declarations
+	 */
+	protected $declarations;
+
+	/**
+	 * Constructor
+	 *
+	 * @param string                                 $selector     The CSS selector.
+	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+	 */
+	public function __construct( $selector = '', $declarations = array() ) {
+		$this->set_selector( $selector );
+		$this->add_declarations( $declarations );
+	}
+
+	/**
+	 * Set the selector.
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+	 */
+	public function set_selector( $selector ) {
+		if ( empty( $selector ) ) {
+			return;
+		}
+		$this->selector = $selector;
+
+		return $this;
+	}
+
+	/**
+	 * Set the declarations.
+	 *
+	 * @param array|WP_Style_Engine_CSS_Declarations $declarations An array of declarations (property => value pairs),
+	 *                                                             or a WP_Style_Engine_CSS_Declarations object.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
+	 */
+	public function add_declarations( $declarations ) {
+		$is_declarations_object = ! is_array( $declarations );
+		$declarations_array     = $is_declarations_object ? $declarations->get_declarations() : $declarations;
+
+		if ( null === $this->declarations && $is_declarations_object ) {
+			$this->declarations = $declarations;
+			return $this;
+		}
+		if ( null === $this->declarations ) {
+			$this->declarations = new WP_Style_Engine_CSS_Declarations( $declarations_array );
+		}
+		$this->declarations->add_declarations( $declarations_array );
+
+		return $this;
+	}
+
+	/**
+	 * Get the declarations object.
+	 *
+	 * @return WP_Style_Engine_CSS_Declarations
+	 */
+	public function get_declarations() {
+		return $this->declarations;
+	}
+
+	/**
+	 * Get the full selector.
+	 *
+	 * @return string
+	 */
+	public function get_selector() {
+		return $this->selector;
+	}
+
+	/**
+	 * Get the CSS.
+	 *
+	 * @return string
+	 */
+	public function get_css() {
+		return $this->get_selector() . ' {' . $this->declarations->get_declarations_string() . '}';
+	}
+}

package/class-wp-style-engine-css-rules-store.php

@@ -0,0 +1,94 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rules_Store
+ *
+ * A store for WP_Style_Engine_CSS_Rule objects.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
+	return;
+}
+
+/**
+ * Holds, sanitizes, processes and prints CSS declarations for the style engine.
+ *
+ * @access private
+ */
+class WP_Style_Engine_CSS_Rules_Store {
+
+	/**
+	 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
+	 *
+	 * @static
+	 *
+	 * @var WP_Style_Engine_CSS_Rules_Store[]
+	 */
+	protected static $stores = array();
+
+	/**
+	 * An array of CSS Rules objects assigned to the store.
+	 *
+	 * @var WP_Style_Engine_CSS_Rule[]
+	 */
+	protected $rules = array();
+
+	/**
+	 * Get an instance of the store.
+	 *
+	 * @param string $store_name The name of the store.
+	 *
+	 * @return WP_Style_Engine_CSS_Rules_Store
+	 */
+	public static function get_store( $store_name = 'default' ) {
+		if ( ! isset( static::$stores[ $store_name ] ) ) {
+			static::$stores[ $store_name ] = new static();
+		}
+		return static::$stores[ $store_name ];
+	}
+	/**
+	 * Get an array of all rules.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule[]
+	 */
+	public function get_all_rules() {
+		return $this->rules;
+	}
+
+	/**
+	 * Get a WP_Style_Engine_CSS_Rule object by its selector.
+	 * If the rule does not exist, it will be created.
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return WP_Style_Engine_CSS_Rule|null Returns a WP_Style_Engine_CSS_Rule object, or null if the selector is empty.
+	 */
+	public function add_rule( $selector ) {
+
+		$selector = trim( $selector );
+
+		// Bail early if there is no selector.
+		if ( empty( $selector ) ) {
+			return;
+		}
+
+		// Create the rule if it doesn't exist.
+		if ( empty( $this->rules[ $selector ] ) ) {
+			$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+		}
+
+		return $this->rules[ $selector ];
+	}
+
+	/**
+	 * Remove a selector from the store.
+	 *
+	 * @param string $selector The CSS selector.
+	 *
+	 * @return void
+	 */
+	public function remove_rule( $selector ) {
+		unset( $this->rules[ $selector ] );
+	}
+}

package/class-wp-style-engine-processor.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * WP_Style_Engine_Processor
+ *
+ * Compiles styles from a store of CSS rules.
+ *
+ * @package Gutenberg
+ */
+
+if ( class_exists( 'WP_Style_Engine_Processor' ) ) {
+	return;
+}
+
+/**
+ * Compiles styles from a store of CSS rules.
+ *
+ * @access private
+ */
+class WP_Style_Engine_Processor {
+
+	/**
+	 * The Style-Engine Store object.
+	 *
+	 * @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 computed CSS.
+	 */
+	public function get_css() {
+		// Combine CSS selectors that have identical declarations.
+		$this->combine_rules_selectors();
+
+		// Build the CSS.
+		$css   = '';
+		$rules = $this->store->get_all_rules();
+		foreach ( $rules as $rule ) {
+			$css .= $rule->get_css();
+		}
+		return $css;
+	}
+
+	/**
+	 * 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();
+
+		// 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();
+			ksort( $declarations );
+			$selectors_json[ $selector ] = json_encode( $declarations );
+		}
+
+		// Combine selectors that have the same styles.
+		foreach ( $selectors_json as $selector => $json ) {
+			// Get selectors that use the same styles.
+			$duplicates = array_keys( $selectors_json, $json, true );
+			// Skip if there are no duplicates.
+			if ( 1 >= count( $duplicates ) ) {
+				continue;
+			}
+			foreach ( $duplicates as $key ) {
+				// 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 );
+			}
+			// 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->add_declarations( $rules[ $selector ]->get_declarations() );
+			}
+		}
+	}
+}

package/class-wp-style-engine.php

@@ -229,11 +229,11 @@ class WP_Style_Engine {
 	 * @return WP_Style_Engine The main instance.
 	 */
 	public static function get_instance() {
-		if ( null === self::$instance ) {
-			self::$instance = new self();
+		if ( null === static::$instance ) {
+			static::$instance = new static();
 		}
 
-		return self::$instance;
+		return static::$instance;
 	}
 
 	/**
@@ -370,7 +370,7 @@ class WP_Style_Engine {
 					$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
 				}
 				$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
-				if ( static::is_valid_style_value( $style_value ) ) {
+				if ( $individual_property && static::is_valid_style_value( $value ) ) {
 					$css_declarations[ $individual_property ] = $value;
 				}
 			}
@@ -423,17 +423,17 @@ class WP_Style_Engine {
 		}
 
 		// Build CSS rules output.
-		$css_selector = isset( $options['selector'] ) ? $options['selector'] : null;
-		$style_rules  = new WP_Style_Engine_CSS_Declarations( $css_declarations );
+		$css_selector     = isset( $options['selector'] ) ? $options['selector'] : null;
+		$css_declarations = new WP_Style_Engine_CSS_Declarations( $css_declarations );
 
 		// The return object.
 		$styles_output = array();
-		$css           = $style_rules->get_declarations_string();
+		$css           = $css_declarations->get_declarations_string();
 
 		// Return css, if any.
 		if ( ! empty( $css ) ) {
 			$styles_output['css']          = $css;
-			$styles_output['declarations'] = $style_rules->get_declarations();
+			$styles_output['declarations'] = $css_declarations->get_declarations();
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
 				$styles_output['css'] = $css_selector . ' { ' . $css . ' }';
@@ -503,7 +503,7 @@ class WP_Style_Engine {
  * Example usage:
  *
  * $styles = wp_style_engine_get_block_supports_styles( array( 'color' => array( 'text' => '#cccccc' ) ) );
- * // Returns `array( 'css' => 'color: #cccccc', 'classnames' => 'has-color' )`.
+ * // Returns `array( 'css' => 'color: #cccccc', 'declarations' => array( 'color' => '#cccccc' ), 'classnames' => 'has-color' )`.
  *
  * @access public
  *
@@ -511,8 +511,9 @@ class WP_Style_Engine {
  * @param array<string> $options      An array of options to determine the output.
  *
  * @return array<string>|null array(
- *     'styles'     => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag.
- *     'classnames' => (string) Classnames separated by a space.
+ *     'css'          => (string) A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
+ *     'declarations' => (array) An array of property/value pairs representing parsed CSS declarations.
+ *     'classnames'   => (string) Classnames separated by a space.
  * );
  */
 function wp_style_engine_get_block_supports_styles( $block_styles, $options = array() ) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"description": "WordPress Style engine.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,5 +34,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
 }

package/phpunit/class-wp-style-engine-css-declarations-test.php

@@ -105,4 +105,50 @@ class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
 			$css_declarations->get_declarations_string()
 		);
 	}
+
+	/**
+	 * Should remove a declaration
+	 */
+	public function test_remove_declaration() {
+		$input_declarations = array(
+			'color'       => 'tomato',
+			'margin'      => '10em 10em 20em 1px',
+			'font-family' => 'Happy Font serif',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: tomato; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			$css_declarations->get_declarations_string()
+		);
+
+		$css_declarations->remove_declaration( 'color' );
+		$this->assertSame(
+			'margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+
+	/**
+	 * Should remove declarations
+	 */
+	public function test_remove_declarations() {
+		$input_declarations = array(
+			'color'       => 'cucumber',
+			'margin'      => '10em 10em 20em 1px',
+			'font-family' => 'Happy Font serif',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: cucumber; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			$css_declarations->get_declarations_string()
+		);
+
+		$css_declarations->remove_declarations( array( 'color', 'margin' ) );
+		$this->assertSame(
+			'font-family: Happy Font serif;',
+			$css_declarations->get_declarations_string()
+		);
+	}
 }

package/phpunit/class-wp-style-engine-css-rule-test.php

@@ -0,0 +1,96 @@
+<?php
+/**
+ * Tests the Style Engine CSS Rule class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+
+/**
+ * Tests for registering, storing and generating CSS declarations.
+ */
+class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
+	/**
+	 * Should set declarations on instantiation.
+	 */
+	public function test_instantiate_with_selector_and_rules() {
+		$selector           = '.law-and-order';
+		$input_declarations = array(
+			'margin-top' => '10px',
+			'font-size'  => '2rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+
+		$this->assertSame( $selector, $css_rule->get_selector() );
+
+		$expected = "$selector {{$css_declarations->get_declarations_string()}}";
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Test dedupe declaration properties.
+	 */
+	public function test_dedupe_properties_in_rules() {
+		$selector                    = '.taggart';
+		$first_declaration           = array(
+			'font-size' => '2rem',
+		);
+		$overwrite_first_declaration = array(
+			'font-size' => '4px',
+		);
+		$css_rule                    = new WP_Style_Engine_CSS_Rule( $selector, $first_declaration );
+		$css_rule->add_declarations( new WP_Style_Engine_CSS_Declarations( $overwrite_first_declaration ) );
+
+		$expected = '.taggart {font-size: 4px;}';
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Should set selector and rules on instantiation.
+	 */
+	public function test_add_declarations() {
+		// Declarations using a WP_Style_Engine_CSS_Declarations object.
+		$some_css_declarations = new WP_Style_Engine_CSS_Declarations( array( 'margin-top' => '10px' ) );
+		// Declarations using a property => value array.
+		$some_more_css_declarations = array( 'font-size' => '1rem' );
+		$css_rule                   = new WP_Style_Engine_CSS_Rule( '.hill-street-blues', $some_css_declarations );
+		$css_rule->add_declarations( $some_more_css_declarations );
+
+		$expected = '.hill-street-blues {margin-top: 10px; font-size: 1rem;}';
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+
+	/**
+	 * Should set selector and rules on instantiation.
+	 */
+	public function test_set_selector() {
+		$selector = '.taggart';
+		$css_rule = new WP_Style_Engine_CSS_Rule( $selector );
+
+		$this->assertSame( $selector, $css_rule->get_selector() );
+
+		$css_rule->set_selector( '.law-and-order' );
+
+		$this->assertSame( '.law-and-order', $css_rule->get_selector() );
+	}
+
+	/**
+	 * Should set selector and rules on instantiation.
+	 */
+	public function test_get_css() {
+		$selector           = '.chips';
+		$input_declarations = array(
+			'margin-top' => '10px',
+			'font-size'  => '2rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+		$expected           = "$selector {{$css_declarations->get_declarations_string()}}";
+
+		$this->assertSame( $expected, $css_rule->get_css() );
+	}
+}

package/phpunit/class-wp-style-engine-css-rules-store-test.php

@@ -0,0 +1,115 @@
+<?php
+/**
+ * Tests the Style Engine CSS Rules Store 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';
+
+/**
+ * Tests for registering, storing and retrieving CSS Rules.
+ */
+class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
+	/**
+	 * Should create a new store.
+	 */
+	public function test_create_new_store() {
+		$new_pancakes_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pancakes-with-strawberries' );
+		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $new_pancakes_store );
+	}
+
+	/**
+	 * Should return previously created store when the same selector key is passed.
+	 */
+	public function test_get_store() {
+		$new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
+		$selector       = '.haddock';
+
+		$new_fish_store->add_rule( $selector )->get_selector();
+		$this->assertEquals( $selector, $new_fish_store->add_rule( $selector )->get_selector() );
+
+		$the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
+		$this->assertEquals( $selector, $the_same_fish_store->add_rule( $selector )->get_selector() );
+	}
+
+	/**
+	 * Should return a stored rule.
+	 */
+	public function test_add_rule() {
+		$new_pie_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'meat-pie' );
+		$selector      = '.wp-block-sauce a:hover';
+		$store_rule    = $new_pie_store->add_rule( $selector );
+		$expected      = "$selector {}";
+		$this->assertEquals( $expected, $store_rule->get_css() );
+
+		$pie_declarations = array(
+			'color'         => 'brown',
+			'border-color'  => 'yellow',
+			'border-radius' => '10rem',
+		);
+		$css_declarations = new WP_Style_Engine_CSS_Declarations( $pie_declarations );
+		$store_rule->add_declarations( $css_declarations );
+
+		$store_rule = $new_pie_store->add_rule( $selector );
+		$expected   = "$selector {{$css_declarations->get_declarations_string()}}";
+		$this->assertEquals( $expected, $store_rule->get_css() );
+	}
+
+	/**
+	 * Should return all stored rules.
+	 */
+	public function test_get_all_rules() {
+		$new_pizza_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'pizza-with-mozzarella' );
+		$selector        = '.wp-block-anchovies a:hover';
+		$store_rule      = $new_pizza_store->add_rule( $selector );
+		$expected        = array(
+			$selector => $store_rule,
+		);
+
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$pizza_declarations = array(
+			'color'         => 'red',
+			'border-color'  => 'yellow',
+			'border-radius' => '10rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $pizza_declarations );
+		$store_rule->add_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector => $store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$new_pizza_declarations = array(
+			'color'        => 'red',
+			'border-color' => 'red',
+			'font-size'    => '10rem',
+		);
+		$css_declarations       = new WP_Style_Engine_CSS_Declarations( $new_pizza_declarations );
+		$store_rule->add_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector => $store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$new_selector             = '.wp-block-mushroom a:hover';
+		$newer_pizza_declarations = array(
+			'padding' => '100px',
+		);
+		$new_store_rule           = $new_pizza_store->add_rule( $new_selector );
+		$css_declarations         = new WP_Style_Engine_CSS_Declarations( $newer_pizza_declarations );
+		$new_store_rule->add_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector     => $store_rule,
+			$new_selector => $new_store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+	}
+}

package/phpunit/class-wp-style-engine-processor-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-processor.php';
+
+/**
+ * Tests for compiling and rendering styles from a store of CSS rules.
+ */
+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_Processor_Gutenberg( $a_nice_store );
+		$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' )->add_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_Processor_Gutenberg( $an_excellent_store );
+		$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' )->add_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' )->add_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_Processor_Gutenberg( $a_sweet_store );
+		$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' )->add_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_Processor_Gutenberg( $a_lovely_store );
+		$a_lovely_store->add_rule( '.a-lovely-rule' )->add_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_store->add_rule( '.a-lovelier-rule' )->add_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' )->add_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_store->add_rule( '.a-perfectly-lovely-rule' )->add_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() );
+	}
+}

package/src/test/index.js

@@ -8,6 +8,15 @@ describe( 'generate', () => {
 		expect( generate( {}, '.some-selector' ) ).toEqual( '' );
 	} );
 
+	it( 'should generate empty style with empty keys', () => {
+		expect(
+			generate( {
+				spacing: undefined,
+				color: undefined,
+			} )
+		).toEqual( '' );
+	} );
+
 	it( 'should generate inline styles where there is no selector', () => {
 		expect(
 			generate( {
@@ -72,14 +81,17 @@ describe( 'generate', () => {
 		);
 	} );
 
-	it( 'should parse preset values (use for elements.link.color.text)', () => {
+	it( 'should parse preset values', () => {
 		expect(
 			generate( {
 				color: {
 					text: 'var:preset|color|ham-sandwich',
 				},
+				spacing: { margin: '3px' },
 			} )
-		).toEqual( 'color: var(--wp--preset--color--ham-sandwich);' );
+		).toEqual(
+			'color: var(--wp--preset--color--ham-sandwich); margin: 3px;'
+		);
 	} );
 
 	it( 'should parse border rules', () => {
@@ -278,4 +290,31 @@ describe( 'getCSSRules', () => {
 			},
 		] );
 	} );
+
+	it( 'should handle styles with CSS vars', () => {
+		expect(
+			getCSSRules(
+				{
+					color: {
+						text: 'var:preset|color|bomba-picante',
+					},
+					spacing: { padding: '11px' },
+				},
+				{
+					selector: '.some-selector a',
+				}
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector a',
+				key: 'color',
+				value: 'var(--wp--preset--color--bomba-picante)',
+			},
+			{
+				selector: '.some-selector a',
+				key: 'padding',
+				value: '11px',
+			},
+		] );
+	} );
 } );