@wordpress/style-engine 0.11.0 → 0.14.0

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

@@ -0,0 +1,232 @@
+<?php
+/**
+ * Tests the Style Engine CSS declarations class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+
+/**
+ * Tests for registering, storing and generating CSS declarations.
+ */
+class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
+	/**
+	 * Should set declarations on instantiation.
+	 */
+	public function test_instantiate_with_declarations() {
+		$input_declarations = array(
+			'margin-top' => '10px',
+			'font-size'  => '2rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$this->assertSame( $input_declarations, $css_declarations->get_declarations() );
+	}
+
+	/**
+	 * Should add declarations.
+	 */
+	public function test_add_declarations() {
+		$input_declarations = array(
+			'padding' => '20px',
+			'color'   => 'var(--wp--preset--elbow-patches)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations();
+		$css_declarations->add_declarations( $input_declarations );
+		$this->assertSame( $input_declarations, $css_declarations->get_declarations() );
+	}
+
+	/**
+	 * Should add declarations.
+	 */
+	public function test_add_a_single_declaration() {
+		$input_declarations = array(
+			'border-width'     => '1%',
+			'background-color' => 'var(--wp--preset--english-mustard)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+		$extra_declaration  = array(
+			'letter-spacing' => '1.5px',
+		);
+		$css_declarations->add_declarations( $extra_declaration );
+		$this->assertSame( array_merge( $input_declarations, $extra_declaration ), $css_declarations->get_declarations() );
+	}
+
+	/**
+	 * Should sanitize properties before storing.
+	 */
+	public function test_sanitize_properties() {
+		$input_declarations = array(
+			'^--wp--style--sleepy-potato$' => '40px',
+			'<background-//color>'         => 'var(--wp--preset--english-mustard)',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			array(
+				'--wp--style--sleepy-potato' => '40px',
+				'background-color'           => 'var(--wp--preset--english-mustard)',
+			),
+			$css_declarations->get_declarations()
+		);
+	}
+
+	/**
+	 * Should compile css declarations into a css declarations block string.
+	 */
+	public function test_generate_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()
+		);
+	}
+
+	/**
+	 * 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'        => 'url("https://wordpress.org")',
+			'margin-right' => '10em',
+			'potato'       => 'uppercase',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'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()
+		);
+	}
+
+	/**
+	 * 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,127 @@
+<?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 add declarations.
+	 */
+	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.
+	 */
+	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 generate CSS rules.
+	 */
+	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() );
+	}
+
+	/**
+	 * 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

@@ -0,0 +1,157 @@
+<?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 {
+	/**
+	 * 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.
+	 */
+	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 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.
+	 */
+	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      = '';
+		$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() );
+	}
+}