@wordpress/style-engine 0.13.0 → 0.15.0

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

@@ -84,24 +84,104 @@ class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: red; border-top-left-radius: 99px; text-decoration: underline;',
+			'color:red;border-top-left-radius:99px;text-decoration:underline;',
 			$css_declarations->get_declarations_string()
 		);
 	}
 
+	/**
+	 * Should compile css declarations into a prettified css declarations block string.
+	 */
+	public function test_generate_prettified_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: red; border-top-left-radius: 99px; text-decoration: underline;',
+			$css_declarations->get_declarations_string( true )
+		);
+	}
+
+	/**
+	 * Should compile css declarations into a prettified and indented css declarations block string.
+	 */
+	public function test_generate_prettified_with_indent_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'	color: red;
+	border-top-left-radius: 99px;
+	text-decoration: underline;',
+			$css_declarations->get_declarations_string( true, 1 )
+		);
+	}
+
+	/**
+	 * Should compile css declarations into a css declarations block string.
+	 */
+	public function test_generate_prettified_with_more_indents_css_declarations_string() {
+		$input_declarations = array(
+			'color'                  => 'red',
+			'border-top-left-radius' => '99px',
+			'text-decoration'        => 'underline',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'		color: red;
+		border-top-left-radius: 99px;
+		text-decoration: underline;',
+			$css_declarations->get_declarations_string( true, 2 )
+		);
+	}
+
 	/**
 	 * Should escape values and run the CSS through safecss_filter_attr.
 	 */
 	public function test_remove_unsafe_properties_and_values() {
 		$input_declarations = array(
-			'color'        => '<red/>',
+			'color'        => 'url("https://wordpress.org")',
+			'font-size'    => '<red/>',
 			'margin-right' => '10em',
+			'padding'      => '</style>',
 			'potato'       => 'uppercase',
 		);
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: &lt;red/&gt;; margin-right: 10em;',
+			'margin-right:10em;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+
+	/**
+	 * Should allow calc, clamp, min, max, and minmax CSS functions.
+	 */
+	public function test_allow_particular_css_functions() {
+		$input_declarations = array(
+			'background'       => 'var(--wp--preset--color--primary, 10px)', // Simple var().
+			'font-size'        => 'clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)', // Nested clamp().
+			'width'            => 'min(150vw, 100px)',
+			'min-width'        => 'max(150vw, 100px)',
+			'max-width'        => 'minmax(400px, 50%)',
+			'padding'          => 'calc(80px * -1)',
+			'background-image' => 'url("https://wordpress.org")',
+			'line-height'      => 'url("https://wordpress.org")',
+			'margin'           => 'illegalfunction(30px)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'background:var(--wp--preset--color--primary, 10px);font-size:clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem);width:min(150vw, 100px);min-width:max(150vw, 100px);max-width:minmax(400px, 50%);padding:calc(80px * -1);background-image:url("https://wordpress.org");',
 			$css_declarations->get_declarations_string()
 		);
 	}
@@ -118,13 +198,13 @@ class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: tomato; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			'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;',
+			'margin:10em 10em 20em 1px;font-family:Happy Font serif;',
 			$css_declarations->get_declarations_string()
 		);
 	}
@@ -141,13 +221,13 @@ class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
 		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
 
 		$this->assertSame(
-			'color: cucumber; margin: 10em 10em 20em 1px; font-family: Happy Font serif;',
+			'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;',
+			'font-family:Happy Font serif;',
 			$css_declarations->get_declarations_string()
 		);
 	}

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

@@ -27,7 +27,7 @@ class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
 
 		$this->assertSame( $selector, $css_rule->get_selector() );
 
-		$expected = "$selector {{$css_declarations->get_declarations_string()}}";
+		$expected = "$selector{{$css_declarations->get_declarations_string()}}";
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
@@ -45,12 +45,12 @@ class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
 		$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;}';
+		$expected = '.taggart{font-size:4px;}';
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
 	/**
-	 * Should set selector and rules on instantiation.
+	 * Should add declarations.
 	 */
 	public function test_add_declarations() {
 		// Declarations using a WP_Style_Engine_CSS_Declarations object.
@@ -60,12 +60,12 @@ class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
 		$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;}';
+		$expected = '.hill-street-blues{margin-top:10px;font-size:1rem;}';
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
 
 	/**
-	 * Should set selector and rules on instantiation.
+	 * Should set selector.
 	 */
 	public function test_set_selector() {
 		$selector = '.taggart';
@@ -79,7 +79,7 @@ class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
 	}
 
 	/**
-	 * Should set selector and rules on instantiation.
+	 * Should generate CSS rules.
 	 */
 	public function test_get_css() {
 		$selector           = '.chips';
@@ -89,8 +89,39 @@ class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
 		);
 		$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()}}";
+		$expected           = "$selector{{$css_declarations->get_declarations_string()}}";
 
 		$this->assertSame( $expected, $css_rule->get_css() );
 	}
+
+	/**
+	 * Should return empty string with no declarations.
+	 */
+	public function test_get_css_no_declarations() {
+		$selector           = '.holmes';
+		$input_declarations = array();
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+
+		$this->assertSame( '', $css_rule->get_css() );
+	}
+
+	/**
+	 * Should generate prettified CSS rules.
+	 */
+	public function test_get_prettified_css() {
+		$selector           = '.baptiste';
+		$input_declarations = array(
+			'margin-left' => '0',
+			'font-family' => 'Detective Sans',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$css_rule           = new WP_Style_Engine_CSS_Rule( $selector, $css_declarations );
+		$expected           = '.baptiste {
+	margin-left: 0;
+	font-family: Detective Sans;
+}';
+
+		$this->assertSame( $expected, $css_rule->get_css( true ) );
+	}
 }

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

@@ -14,6 +14,13 @@ 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 {
+	/**
+	 * Tear down after each test.
+	 */
+	public function tear_down() {
+		parent::tear_down();
+		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+	}
 	/**
 	 * Should create a new store.
 	 */
@@ -22,6 +29,20 @@ class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
 		$this->assertInstanceOf( 'WP_Style_Engine_CSS_Rules_Store', $new_pancakes_store );
 	}
 
+	/**
+	 * Should not create a new store with invalid $store_name.
+	 */
+	public function test_store_name_required() {
+		$not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( '' );
+		$this->assertEmpty( $not_a_store );
+
+		$also_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( 123 );
+		$this->assertEmpty( $also_not_a_store );
+
+		$definitely_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( null );
+		$this->assertEmpty( $definitely_not_a_store );
+	}
+
 	/**
 	 * Should return previously created store when the same selector key is passed.
 	 */
@@ -36,6 +57,41 @@ class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
 		$this->assertEquals( $selector, $the_same_fish_store->add_rule( $selector )->get_selector() );
 	}
 
+	/**
+	 * Should return all previously created stores.
+	 */
+	public function test_get_stores() {
+		$burrito_store    = WP_Style_Engine_CSS_Rules_Store::get_store( 'burrito' );
+		$quesadilla_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'quesadilla' );
+		$this->assertEquals(
+			array(
+				'burrito'    => $burrito_store,
+				'quesadilla' => $quesadilla_store,
+			),
+			WP_Style_Engine_CSS_Rules_Store::get_stores()
+		);
+	}
+
+	/**
+	 * Should delete all previously created stores.
+	 */
+	public function test_remove_all_stores() {
+		$dolmades_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'dolmades' );
+		$tzatziki_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'tzatziki' );
+		$this->assertEquals(
+			array(
+				'dolmades' => $dolmades_store,
+				'tzatziki' => $tzatziki_store,
+			),
+			WP_Style_Engine_CSS_Rules_Store::get_stores()
+		);
+		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
+		$this->assertEquals(
+			array(),
+			WP_Style_Engine_CSS_Rules_Store::get_stores()
+		);
+	}
+
 	/**
 	 * Should return a stored rule.
 	 */
@@ -43,7 +99,7 @@ class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
 		$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 {}";
+		$expected      = '';
 		$this->assertEquals( $expected, $store_rule->get_css() );
 
 		$pie_declarations = array(
@@ -55,7 +111,7 @@ class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
 		$store_rule->add_declarations( $css_declarations );
 
 		$store_rule = $new_pie_store->add_rule( $selector );
-		$expected   = "$selector {{$css_declarations->get_declarations_string()}}";
+		$expected   = "$selector{{$css_declarations->get_declarations_string()}}";
 		$this->assertEquals( $expected, $store_rule->get_css() );
 	}
 

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

@@ -14,12 +14,84 @@ 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_Gutenberg::get_store( 'nice' );
-		$a_nice_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_nice_store );
+		$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)',
@@ -33,95 +105,162 @@ class WP_Style_Engine_Processor_Test extends WP_UnitTestCase {
 				'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() );
+		$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_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(
+		$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_store->add_rule( '.an-excellent-rule' )->add_declarations(
+		$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()
+		);
 
-		$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(
+		$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',
 			)
 		);
-
-		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dashed; border-color: brown; border-width: 2px;}', $an_excellent_renderer->get_css() );
+		$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 combine duplicate CSS rules.
+	 * Should print out uncombined selectors 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(
+	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',
 			)
 		);
-		$a_sweet_store->add_rule( '#an-even-sweeter-rule > marquee' )->add_declarations(
+
+		$the_sweetest_rule = new WP_Style_Engine_CSS_Rule(
+			'.the-sweetest-rule-of-all a',
 			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() );
+		$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 and store CSS rules.
+	 * Should combine duplicate 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(
+	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_store->add_rule( '.a-lovelier-rule' )->add_declarations(
+		$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() );
 
-		$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(
+		$a_most_lovely_rule = new WP_Style_Engine_CSS_Rule(
+			'.a-most-lovely-rule',
 			array(
 				'border-color' => 'purple',
 			)
 		);
-		$a_lovely_store->add_rule( '.a-perfectly-lovely-rule' )->add_declarations(
+		$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_renderer->get_css() );
+		$this->assertEquals(
+			'.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule{border-color:purple;}',
+			$a_lovely_processor->get_css()
+		);
 	}
 }