@wordpress/style-engine 0.12.0 → 0.14.1-next.d6164808d3.0

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

@@ -0,0 +1,266 @@
+<?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.
+	 */
+	public function test_return_rules_as_css() {
+		$a_nice_css_rule = new WP_Style_Engine_CSS_Rule( '.a-nice-rule' );
+		$a_nice_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--nice-color)',
+				'background-color' => 'purple',
+			)
+		);
+		$a_nicer_css_rule = new WP_Style_Engine_CSS_Rule( '.a-nicer-rule' );
+		$a_nicer_css_rule->add_declarations(
+			array(
+				'font-family'      => 'Nice sans',
+				'font-size'        => '1em',
+				'background-color' => 'purple',
+			)
+		);
+		$a_nice_processor = new WP_Style_Engine_Processor();
+		$a_nice_processor->add_rules( array( $a_nice_css_rule, $a_nicer_css_rule ) );
+		$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_processor->get_css()
+		);
+	}
+
+	/**
+	 * Should compile CSS rules.
+	 */
+	public function test_return_prettified_rules_as_css() {
+		$a_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-wonderful-rule' );
+		$a_wonderful_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--wonderful-color)',
+				'background-color' => 'orange',
+			)
+		);
+		$a_very_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-very_wonderful-rule' );
+		$a_very_wonderful_css_rule->add_declarations(
+			array(
+				'color'            => 'var(--wonderful-color)',
+				'background-color' => 'orange',
+			)
+		);
+		$a_more_wonderful_css_rule = new WP_Style_Engine_CSS_Rule( '.a-more-wonderful-rule' );
+		$a_more_wonderful_css_rule->add_declarations(
+			array(
+				'font-family'      => 'Wonderful sans',
+				'font-size'        => '1em',
+				'background-color' => 'orange',
+			)
+		);
+		$a_wonderful_processor = new WP_Style_Engine_Processor();
+		$a_wonderful_processor->add_rules( array( $a_wonderful_css_rule, $a_very_wonderful_css_rule, $a_more_wonderful_css_rule ) );
+
+		$expected = '.a-more-wonderful-rule {
+	font-family: Wonderful sans;
+	font-size: 1em;
+	background-color: orange;
+}
+.a-wonderful-rule,
+.a-very_wonderful-rule {
+	color: var(--wonderful-color);
+	background-color: orange;
+}
+';
+		$this->assertEquals(
+			$expected,
+			$a_wonderful_processor->get_css( array( 'prettify' => true ) )
+		);
+	}
+
+	/**
+	 * Should compile CSS rules from the store.
+	 */
+	public function test_return_store_rules_as_css() {
+		$a_nice_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'nice' );
+		$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',
+			)
+		);
+		$a_nice_renderer = new WP_Style_Engine_Processor();
+		$a_nice_renderer->add_store( $a_nice_store );
+		$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_rule      = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
+		$an_excellent_processor = new WP_Style_Engine_Processor();
+		$an_excellent_rule->add_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dotted',
+			)
+		);
+		$an_excellent_processor->add_rules( $an_excellent_rule );
+
+		$another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
+		$another_excellent_rule->add_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dotted',
+				'border-color' => 'brown',
+			)
+		);
+		$an_excellent_processor->add_rules( $another_excellent_rule );
+		$this->assertEquals(
+			'.an-excellent-rule{color:var(--excellent-color);border-style:dotted;border-color:brown;}',
+			$an_excellent_processor->get_css()
+		);
+
+		$yet_another_excellent_rule = new WP_Style_Engine_CSS_Rule( '.an-excellent-rule' );
+		$yet_another_excellent_rule->add_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dashed',
+				'border-width' => '2px',
+			)
+		);
+		$an_excellent_processor->add_rules( $yet_another_excellent_rule );
+		$this->assertEquals(
+			'.an-excellent-rule{color:var(--excellent-color);border-style:dashed;border-color:brown;border-width:2px;}',
+			$an_excellent_processor->get_css()
+		);
+	}
+
+	/**
+	 * Should print out uncombined selectors duplicate CSS rules.
+	 */
+	public function test_output_verbose_css_rules() {
+		$a_sweet_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-sweet-rule',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$a_sweeter_rule = new WP_Style_Engine_CSS_Rule(
+			'#an-even-sweeter-rule > marquee',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$the_sweetest_rule = new WP_Style_Engine_CSS_Rule(
+			'.the-sweetest-rule-of-all a',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$a_sweet_processor = new WP_Style_Engine_Processor();
+		$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule, $the_sweetest_rule ) );
+
+		$this->assertEquals(
+			'.a-sweet-rule{color:var(--sweet-color);background-color:purple;}#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}.the-sweetest-rule-of-all a{color:var(--sweet-color);background-color:purple;}',
+			$a_sweet_processor->get_css( array( 'optimize' => false ) )
+		);
+	}
+
+	/**
+	 * Should combine duplicate CSS rules.
+	 */
+	public function test_combine_css_rules() {
+		$a_sweet_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-sweet-rule',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$a_sweeter_rule = new WP_Style_Engine_CSS_Rule(
+			'#an-even-sweeter-rule > marquee',
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$a_sweet_processor = new WP_Style_Engine_Processor();
+		$a_sweet_processor->add_rules( array( $a_sweet_rule, $a_sweeter_rule ) );
+
+		$this->assertEquals(
+			'.a-sweet-rule,#an-even-sweeter-rule > marquee{color:var(--sweet-color);background-color:purple;}',
+			$a_sweet_processor->get_css()
+		);
+	}
+		/**
+		 * Should combine and store CSS rules.
+		 */
+	public function test_combine_previously_added_css_rules() {
+		$a_lovely_processor = new WP_Style_Engine_Processor();
+		$a_lovely_rule      = new WP_Style_Engine_CSS_Rule(
+			'.a-lovely-rule',
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_processor->add_rules( $a_lovely_rule );
+		$a_lovelier_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-lovelier-rule',
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_processor->add_rules( $a_lovelier_rule );
+		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule{border-color:purple;}', $a_lovely_processor->get_css() );
+
+		$a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-most-lovely-rule',
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_processor->add_rules( $a_most_lovely_rule );
+
+		$a_perfectly_lovely_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-perfectly-lovely-rule',
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_processor->add_rules( $a_perfectly_lovely_rule );
+
+		$this->assertEquals(
+			'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
+			$a_lovely_processor->get_css()
+		);
+	}
+}

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

@@ -6,44 +6,55 @@
  * @subpackage style-engine
  */
 
+require __DIR__ . '/../class-wp-style-engine-processor.php';
 require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
 require __DIR__ . '/../class-wp-style-engine.php';
 
 /**
  * Tests for registering, storing and generating styles.
  */
 class WP_Style_Engine_Test extends WP_UnitTestCase {
+	/**
+	 * Tear down after each test.
+	 */
+	public function tear_down() {
+		parent::tear_down();
+		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+	}
+
 	/**
 	 * Tests generating block styles and classnames based on various manifestations of the $block_styles argument.
 	 *
-	 * @dataProvider data_generate_block_supports_styles_fixtures
+	 * @dataProvider data_get_styles_fixtures
 	 *
-	 * @param array  $block_styles    The incoming block styles object.
-	 * @param array  $options         Style engine options.
+	 * @param array  $block_styles The incoming block styles object.
+	 * @param array  $options Style engine options.
 	 * @param string $expected_output The expected output.
 	 */
-	public function test_generate_block_supports_styles( $block_styles, $options, $expected_output ) {
-		$generated_styles = wp_style_engine_get_block_supports_styles( $block_styles, $options );
+	public function test_generate_get_styles( $block_styles, $options, $expected_output ) {
+		$generated_styles = wp_style_engine_get_styles( $block_styles, $options );
 		$this->assertSame( $expected_output, $generated_styles );
 	}
 
 	/**
-	 * Data provider.
+	 * Data provider for test_generate_get_styles().
 	 *
 	 * @return array
 	 */
-	public function data_generate_block_supports_styles_fixtures() {
+	public function data_get_styles_fixtures() {
 		return array(
 			'default_return_value'                         => array(
 				'block_styles'    => array(),
 				'options'         => null,
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 
 			'inline_invalid_block_styles_empty'            => array(
 				'block_styles'    => 'hello world!',
 				'options'         => null,
-				'expected_output' => null,
+				'expected_output' => array(),
 			),
 
 			'inline_invalid_block_styles_unknown_style'    => array(
@@ -72,7 +83,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'expected_output' => array(),
 			),
 
-			'valid_inline_css_and_classnames'              => array(
+			'valid_inline_css_and_classnames_as_default_context' => array(
 				'block_styles'    => array(
 					'color'   => array(
 						'text' => 'var:preset|color|texas-flood',
@@ -89,7 +100,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
-					'css'          => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
+					'css'          => 'border-style:dotted;border-width:2rem;padding:0;margin:111px;',
 					'declarations' => array(
 						'border-style' => 'dotted',
 						'border-width' => '2rem',
@@ -100,6 +111,28 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 			),
 
+			'valid_inline_css_and_classnames_with_context' => array(
+				'block_styles'    => array(
+					'color'   => array(
+						'text' => 'var:preset|color|little-lamb',
+					),
+					'spacing' => array(
+						'margin' => '20px',
+					),
+				),
+				'options'         => array(
+					'convert_vars_to_classnames' => true,
+					'context'                    => 'block-supports',
+				),
+				'expected_output' => array(
+					'css'          => 'margin:20px;',
+					'declarations' => array(
+						'margin' => '20px',
+					),
+					'classnames'   => 'has-text-color has-little-lamb-color',
+				),
+			),
+
 			'inline_valid_box_model_style'                 => array(
 				'block_styles'    => array(
 					'spacing' => array(
@@ -127,7 +160,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'border-top-left-radius: 99px; border-top-right-radius: 98px; border-bottom-left-radius: 97px; border-bottom-right-radius: 96px; padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; margin-top: 12rem; margin-left: 2vh; margin-bottom: 2px; margin-right: 10em;',
+					'css'          => 'border-top-left-radius:99px;border-top-right-radius:98px;border-bottom-left-radius:97px;border-bottom-right-radius:96px;padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;margin-top:12rem;margin-left:2vh;margin-bottom:2px;margin-right:10em;',
 					'declarations' => array(
 						'border-top-left-radius'     => '99px',
 						'border-top-right-radius'    => '98px',
@@ -160,7 +193,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-family: Roboto,Oxygen-Sans,Ubuntu,sans-serif; font-style: italic; font-weight: 800; line-height: 1.3; text-decoration: underline; text-transform: uppercase; letter-spacing: 2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
@@ -187,7 +220,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array( 'selector' => '.wp-selector > p' ),
 				'expected_output' => array(
-					'css'          => '.wp-selector > p { padding-top: 42px; padding-left: 2%; padding-bottom: 44px; padding-right: 5rem; }',
+					'css'          => '.wp-selector > p{padding-top:42px;padding-left:2%;padding-bottom:44px;padding-right:5rem;}',
 					'declarations' => array(
 						'padding-top'    => '42px',
 						'padding-left'   => '2%',
@@ -207,7 +240,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 					'selector' => '.wp-selector',
 				),
 				'expected_output' => array(
-					'css'          => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
+					'css'          => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}',
 					'declarations' => array(
 						'color' => 'var(--wp--preset--color--my-little-pony)',
 					),
@@ -253,7 +286,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'color: var(--wp--preset--color--teal-independents);',
+					'css'          => 'color:var(--wp--preset--color--teal-independents);',
 					'declarations' => array(
 						'color' => 'var(--wp--preset--color--teal-independents)',
 					),
@@ -270,7 +303,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'color: #fff;',
+					'css'          => 'color:#fff;',
 					'declarations' => array(
 						'color' => '#fff',
 					),
@@ -304,7 +337,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
+					'css'          => 'padding:var(--wp--preset--spacing--20);margin:var(--wp--preset--spacing--10);',
 					'declarations' => array(
 						'padding' => 'var(--wp--preset--spacing--20)',
 						'margin'  => 'var(--wp--preset--spacing--10)',
@@ -331,7 +364,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
+					'css'          => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--20);margin-top:1rem;margin-bottom:1rem;',
 					'declarations' => array(
 						'padding-left'   => 'var(--wp--preset--spacing--30)',
 						'padding-right'  => 'var(--wp--preset--spacing--40)',
@@ -358,7 +391,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'margin-top: 1rem; margin-bottom: 0;',
+					'css'          => 'margin-top:1rem;margin-bottom:0;',
 					'declarations' => array(
 						'margin-top'    => '1rem',
 						'margin-bottom' => '0',
@@ -407,7 +440,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
+					'css'          => 'border-top-color:#fe1;border-top-width:1.5rem;border-top-style:dashed;border-right-color:#fe2;border-right-width:1.4rem;border-right-style:solid;border-bottom-color:#fe3;border-bottom-width:1.3rem;border-left-color:var(--wp--preset--color--swampy-yellow);border-left-width:0.5rem;border-left-style:dotted;',
 					'declarations' => array(
 						'border-top-color'    => '#fe1',
 						'border-top-width'    => '1.5rem',
@@ -450,7 +483,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'          => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'css'          => 'border-bottom-color:var(--wp--preset--color--terrible-lizard);',
 					'declarations' => array(
 						'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)',
 					),
@@ -458,4 +491,172 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 			),
 		);
 	}
+
+	/**
+	 * Tests adding rules to a store and retrieving a generated stylesheet.
+	 */
+	public function test_store_block_styles_using_context() {
+		$block_styles = array(
+			'spacing' => array(
+				'padding' => array(
+					'top'    => '42px',
+					'left'   => '2%',
+					'bottom' => '44px',
+					'right'  => '5rem',
+				),
+			),
+		);
+
+		$generated_styles = wp_style_engine_get_styles(
+			$block_styles,
+			array(
+				'context'  => 'block-supports',
+				'selector' => 'article',
+			)
+		);
+		$store            = WP_Style_Engine::get_store( 'block-supports' );
+		$rule             = $store->get_all_rules()['article'];
+		$this->assertSame( $generated_styles['css'], $rule->get_css() );
+	}
+
+	/**
+	 * Tests adding rules to a store and retrieving a generated stylesheet.
+	 */
+	public function test_does_not_store_block_styles_without_context() {
+		$block_styles = array(
+			'typography' => array(
+				'fontSize' => '999px',
+			),
+		);
+
+		wp_style_engine_get_styles(
+			$block_styles,
+			array(
+				'selector' => '#font-size-rulez',
+			)
+		);
+
+		$all_stores = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_stores();
+
+		$this->assertEmpty( $all_stores );
+	}
+
+	/**
+	 * Tests adding rules to a store and retrieving a generated stylesheet.
+	 */
+	public function test_add_to_store() {
+		$css_rules           = array(
+			array(
+				'selector'     => '.frodo',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '10px',
+					'width'        => '30px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.samwise',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '20px',
+					'width'        => '50px',
+					'border-style' => 'solid',
+				),
+			),
+		);
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules(
+			$css_rules,
+			array(
+				'context' => 'test-store',
+			)
+		);
+
+		// Check that the style engine knows about the store.
+		$stored_store = WP_Style_Engine::get_store( 'test-store' );
+		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $stored_store );
+		$this->assertSame( $compiled_stylesheet, WP_Style_Engine::compile_stylesheet_from_css_rules( $stored_store->get_all_rules() ) );
+	}
+
+	/**
+	 * Tests retrieving a generated stylesheet from any rules.
+	 */
+	public function test_get_stylesheet_from_css_rules() {
+		$css_rules = array(
+			array(
+				'selector'     => '.saruman',
+				'declarations' => array(
+					'color'        => 'white',
+					'height'       => '100px',
+					'border-style' => 'solid',
+					'align-self'   => 'unset',
+				),
+			),
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+					'align-self'   => 'safe center',
+				),
+			),
+			array(
+				'selector'     => '.radagast',
+				'declarations' => array(
+					'color'        => 'brown',
+					'height'       => '60px',
+					'border-style' => 'dashed',
+					'align-self'   => 'stretch',
+				),
+			),
+		);
+
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
+		$this->assertSame( '.saruman{color:white;height:100px;border-style:solid;align-self:unset;}.gandalf{color:grey;height:90px;border-style:dotted;align-self:safe center;}.radagast{color:brown;height:60px;border-style:dashed;align-self:stretch;}', $compiled_stylesheet );
+	}
+
+	/**
+	 * Tests that incoming styles are deduped and merged.
+	 */
+	public function test_get_deduped_and_merged_stylesheet() {
+		$css_rules = array(
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.gandalf',
+				'declarations' => array(
+					'color'         => 'white',
+					'height'        => '190px',
+					'padding'       => '10px',
+					'margin-bottom' => '100px',
+				),
+			),
+			array(
+				'selector'     => '.dumbledore',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+			array(
+				'selector'     => '.rincewind',
+				'declarations' => array(
+					'color'        => 'grey',
+					'height'       => '90px',
+					'border-style' => 'dotted',
+				),
+			),
+		);
+
+		$compiled_stylesheet = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
+		$this->assertSame( '.gandalf{color:white;height:190px;border-style:dotted;padding:10px;margin-bottom:100px;}.dumbledore,.rincewind{color:grey;height:90px;border-style:dotted;}', $compiled_stylesheet );
+	}
 }

package/src/index.ts

@@ -17,12 +17,12 @@ import { styleDefinitions } from './styles';
 /**
  * Generates a stylesheet for a given style object and selector.
  *
- * @param  style   Style object.
+ * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
  * @return generated stylesheet.
  */
-export function generate( style: Style, options: StyleOptions ): string {
+export function compileCSS( style: Style, options: StyleOptions = {} ): string {
 	const rules = getCSSRules( style, options );
 
 	// If no selector is provided, treat generated rules as inline styles to be returned as a single string.
@@ -56,14 +56,14 @@ export function generate( style: Style, options: StyleOptions ): string {
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
- * @param  style   Style object.
+ * @param  style   Style object, for example, the value of a block's attributes.style object or the top level styles in theme.json
  * @param  options Options object with settings to adjust how the styles are generated.
  *
  * @return generated styles.
  */
 export function getCSSRules(
 	style: Style,
-	options: StyleOptions
+	options: StyleOptions = {}
 ): GeneratedCSSRule[] {
 	const rules: GeneratedCSSRule[] = [];
 	styleDefinitions.forEach( ( definition: StyleDefinition ) => {