@wordpress/style-engine 0.13.0 → 0.14.0

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.
 	 */
@@ -36,6 +43,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 +85,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 +97,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()
+		);
 	}
 }