@wordpress/style-engine 1.2.0 → 1.3.0

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

@@ -1,281 +0,0 @@
-<?php
-/**
- * Tests the Style Engine CSS declarations class.
- *
- * @package    Gutenberg
- * @subpackage style-engine
- */
-
-// Check for the existence of Style Engine classes and methods.
-// Once the Style Engine has been migrated to Core we can remove the if statements and require imports.
-// Testing new features from the Gutenberg package may require
-// testing against `gutenberg_` and `_Gutenberg` functions and methods in the future.
-if ( ! class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
-	require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
-}
-
-/**
- * Tests registering, storing and generating CSS declarations.
- *
- * @coversDefaultClass WP_Style_Engine_CSS_Declarations
- */
-class WP_Style_Engine_CSS_Declarations_Test extends WP_UnitTestCase {
-	/**
-	 * Tests setting declarations on instantiation.
-	 *
-	 * @covers ::__construct
-	 */
-	public function test_should_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() );
-	}
-
-	/**
-	 * Tests that declarations are added.
-	 *
-	 * @covers ::add_declarations
-	 * @covers ::add_declaration
-	 */
-	public function test_should_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() );
-	}
-
-	/**
-	 * Tests that new declarations are added to existing declarations.
-	 *
-	 * @covers ::add_declarations
-	 * @covers ::add_declaration
-	 */
-	public function test_should_add_new_declarations_to_existing() {
-		$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() );
-	}
-
-	/**
-	 * Tests that properties are sanitized before storing.
-	 *
-	 * @covers ::filter_declaration
-	 * @covers ::sanitize_property
-	 */
-	public function test_should_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()
-		);
-	}
-
-	/**
-	 * Tests that values with HTML tags are escaped, and CSS properties are run through safecss_filter_attr().
-	 *
-	 * @covers ::get_declarations_string
-	 * @covers ::filter_declaration
-	 */
-	public function test_should_strip_html_tags_and_remove_unsafe_css_properties() {
-		$input_declarations         = array(
-			'font-size'    => '<red/>',
-			'padding'      => '</style>',
-			'potato'       => 'uppercase',
-			'cheese'       => '10px',
-			'margin-right' => '10em',
-		);
-		$css_declarations           = new WP_Style_Engine_CSS_Declarations( $input_declarations );
-		$safe_style_css_mock_action = new MockAction();
-
-		// filter_declaration() is called in get_declarations_string().
-		add_filter( 'safe_style_css', array( $safe_style_css_mock_action, 'filter' ) );
-		$css_declarations_string = $css_declarations->get_declarations_string();
-
-		$this->assertSame(
-			3, // Values with HTML tags are removed first by wp_strip_all_tags().
-			$safe_style_css_mock_action->get_call_count(),
-			'"safe_style_css" filters were not applied to CSS declaration properties.'
-		);
-
-		$this->assertSame(
-			'margin-right:10em;',
-			$css_declarations_string,
-			'Unallowed CSS properties or values with HTML tags were not removed.'
-		);
-	}
-
-
-	/**
-	 * Tests that calc, clamp, min, max, and minmax CSS functions are allowed.
-	 *
-	 * @covers ::get_declarations_string
-	 * @covers ::filter_declaration
-	 */
-	public function test_should_allow_css_functions_and_strip_unsafe_css_values() {
-		$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 );
-		$safecss_filter_attr_allow_css_mock_action = new MockAction();
-
-		// filter_declaration() is called in get_declarations_string().
-		add_filter( 'safecss_filter_attr_allow_css', array( $safecss_filter_attr_allow_css_mock_action, 'filter' ) );
-		$css_declarations_string = $css_declarations->get_declarations_string();
-
-		$this->assertSame(
-			9,
-			$safecss_filter_attr_allow_css_mock_action->get_call_count(),
-			'"safecss_filter_attr_allow_css" filters were not applied to CSS declaration values.'
-		);
-
-		$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_string,
-			'Unsafe values were not removed'
-		);
-	}
-
-	/**
-	 * Tests that CSS declarations are compiled into a CSS declarations block string.
-	 *
-	 * @covers ::get_declarations_string
-	 *
-	 * @dataProvider data_should_compile_css_declarations_to_css_declarations_string
-	 *
-	 * @param string $expected        The expected declarations block string.
-	 * @param bool   $should_prettify Optional. Whether to pretty the string. Default false.
-	 * @param int    $indent_count    Optional. The number of tab indents. Default false.
-	 */
-	public function test_should_compile_css_declarations_to_css_declarations_string( $expected, $should_prettify = false, $indent_count = 0 ) {
-		$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(
-			$expected,
-			$css_declarations->get_declarations_string( $should_prettify, $indent_count )
-		);
-	}
-
-	/**
-	 * Data provider for test_should_compile_css_declarations_to_css_declarations_string().
-	 *
-	 * @return array
-	 */
-	public function data_should_compile_css_declarations_to_css_declarations_string() {
-		return array(
-			'unprettified, no indent'  => array(
-				'expected' => 'color:red;border-top-left-radius:99px;text-decoration:underline;',
-			),
-			'unprettified, one indent' => array(
-				'expected'        => 'color:red;border-top-left-radius:99px;text-decoration:underline;',
-				'should_prettify' => false,
-				'indent_count'    => 1,
-			),
-			'prettified, no indent'    => array(
-				'expected'        => 'color: red; border-top-left-radius: 99px; text-decoration: underline;',
-				'should_prettify' => true,
-			),
-			'prettified, one indent'   => array(
-				'expected'        => "\tcolor: red;\n\tborder-top-left-radius: 99px;\n\ttext-decoration: underline;",
-				'should_prettify' => true,
-				'indent_count'    => 1,
-			),
-			'prettified, two indents'  => array(
-				'expected'        => "\t\tcolor: red;\n\t\tborder-top-left-radius: 99px;\n\t\ttext-decoration: underline;",
-				'should_prettify' => true,
-				'indent_count'    => 2,
-			),
-		);
-	}
-
-	/**
-	 * Tests removing a single declaration.
-	 *
-	 * @covers ::remove_declaration
-	 */
-	public function test_should_remove_single_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 string does not match the values of `$declarations` passed to the constructor.'
-		);
-
-		$css_declarations->remove_declaration( 'color' );
-
-		$this->assertSame(
-			'margin:10em 10em 20em 1px;font-family:Happy Font serif;',
-			$css_declarations->get_declarations_string(),
-			'Output after removing "color" declaration via `remove_declaration()` does not match expectations'
-		);
-	}
-
-	/**
-	 * Tests that multiple declarations are removed.
-	 *
-	 * @covers ::remove_declarations
-	 */
-	public function test_should_remove_multiple_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 string does not match the values of `$declarations` passed to the constructor.'
-		);
-
-		$css_declarations->remove_declarations( array( 'color', 'margin' ) );
-
-		$this->assertSame(
-			'font-family:Happy Font serif;',
-			$css_declarations->get_declarations_string(),
-			'Output after removing "color" and "margin" declarations via `remove_declarations()` does not match expectations'
-		);
-	}
-}

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

@@ -1,156 +0,0 @@
-<?php
-/**
- * Tests the Style Engine CSS Rule class.
- *
- * @package    Gutenberg
- * @subpackage style-engine
- */
-
-// Check for the existence of Style Engine classes and methods.
-// Once the Style Engine has been migrated to Core we can remove the if statements and require imports.
-// Testing new features from the Gutenberg package may require
-// testing against `gutenberg_` and `_Gutenberg` functions and methods in the future.
-if ( ! class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
-	require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
-}
-
-if ( ! class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
-	require __DIR__ . '/../class-wp-style-engine-css-rule.php';
-}
-
-/**
- * Tests for registering, storing and generating CSS rules.
- *
- * @coversDefaultClass WP_Style_Engine_CSS_Rule
- */
-class WP_Style_Engine_CSS_Rule_Test extends WP_UnitTestCase {
-	/**
-	 * Tests that declarations are set on instantiation.
-	 *
-	 * @covers ::__construct
-	 */
-	public function test_should_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(), 'Return value of get_selector() does not match value passed to constructor.' );
-
-		$expected = "$selector{{$css_declarations->get_declarations_string()}}";
-
-		$this->assertSame( $expected, $css_rule->get_css(), 'Value returned by get_css() does not match expected declarations string.' );
-	}
-
-	/**
-	 * Tests that declaration properties are deduplicated.
-	 *
-	 * @covers ::add_declarations
-	 * @covers ::get_css
-	 */
-	public function test_should_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() );
-	}
-
-	/**
-	 * Tests that declarations can be added to existing rules.
-	 *
-	 * @covers ::add_declarations
-	 * @covers ::get_css
-	 */
-	public function test_should_add_declarations_to_existing_rules() {
-		// 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() );
-	}
-
-	/**
-	 * Tests setting a selector to a rule.
-	 *
-	 * @covers ::set_selector
-	 */
-	public function test_should_set_selector() {
-		$selector = '.taggart';
-		$css_rule = new WP_Style_Engine_CSS_Rule( $selector );
-
-		$this->assertSame( $selector, $css_rule->get_selector(), 'Return value of get_selector() does not match value passed to constructor.' );
-
-		$css_rule->set_selector( '.law-and-order' );
-
-		$this->assertSame( '.law-and-order', $css_rule->get_selector(), 'Return value of get_selector() does not match value passed to set_selector().' );
-	}
-
-	/**
-	 * Tests generating a CSS rule string.
-	 *
-	 * @covers ::get_css
-	 */
-	public function test_should_generate_css_rule_string() {
-		$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() );
-	}
-
-	/**
-	 * Tests that an empty string will be returned where there are no declarations in a CSS rule.
-	 *
-	 * @covers ::get_css
-	 */
-	public function test_should_return_empty_string_with_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() );
-	}
-
-	/**
-	 * Tests that CSS rules are prettified.
-	 *
-	 * @covers ::get_css
-	 */
-	public function test_should_prettify_css_rule_output() {
-		$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

@@ -1,188 +0,0 @@
-<?php
-/**
- * Tests the Style Engine CSS Rules Store class.
- *
- * @package    Gutenberg
- * @subpackage style-engine
- */
-
-// Check for the existence of Style Engine classes and methods.
-// Once the Style Engine has been migrated to Core we can remove the if statements and require imports.
-// Testing new features from the Gutenberg package may require
-// testing against `gutenberg_` and `_Gutenberg` functions and methods in the future.
-if ( ! class_exists( 'WP_Style_Engine_CSS_Declarations' ) ) {
-	require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
-}
-
-if ( ! class_exists( 'WP_Style_Engine_CSS_Rule' ) ) {
-	require __DIR__ . '/../class-wp-style-engine-css-rule.php';
-}
-
-if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
-	require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
-}
-
-/**
- * Tests for registering, storing and retrieving a collection of CSS Rules (a store).
- *
- * @coversDefaultClass WP_Style_Engine_CSS_Rules_Store
- */
-class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
-	/**
-	 * Cleans up stores after each test.
-	 */
-	public function tear_down() {
-		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
-		parent::tear_down();
-	}
-
-	/**
-	 * Tests creating a new store on instantiation.
-	 *
-	 * @covers ::__construct
-	 */
-	public function test_should_create_new_store_on_instantiation() {
-		$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 );
-	}
-
-	/**
-	 * Tests that a `$store_name` argument is required and no store will be created without one.
-	 *
-	 * @covers ::get_store
-	 */
-	public function test_should_not_create_store_without_a_store_name() {
-		$not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( '' );
-
-		$this->assertEmpty( $not_a_store, 'get_store() did not return an empty value with empty string as argument.' );
-
-		$also_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( 123 );
-
-		$this->assertEmpty( $also_not_a_store, 'get_store() did not return an empty value with number as argument.' );
-
-		$definitely_not_a_store = WP_Style_Engine_CSS_Rules_Store::get_store( null );
-
-		$this->assertEmpty( $definitely_not_a_store, 'get_store() did not return an empty value with `null` as argument.' );
-	}
-
-	/**
-	 * Tests returning a previously created store when the same selector key is passed.
-	 *
-	 * @covers ::get_store
-	 */
-	public function test_should_return_existing_store() {
-		$new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
-		$selector       = '.haddock';
-
-		$new_fish_store->add_rule( $selector );
-
-		$this->assertSame( $selector, $new_fish_store->add_rule( $selector )->get_selector(), 'Selector string of store rule does not match expected value' );
-
-		$the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
-
-		$this->assertSame( $selector, $the_same_fish_store->add_rule( $selector )->get_selector(), 'Selector string of existing store rule does not match expected value' );
-	}
-
-	/**
-	 * Tests returning all previously created stores.
-	 *
-	 * @covers ::get_stores
-	 */
-	public function test_should_get_all_existing_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()
-		);
-	}
-
-	/**
-	 * Tests that all previously created stores are deleted.
-	 *
-	 * @covers ::remove_all_stores
-	 */
-	public function test_should_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(),
-			'Return value of get_stores() does not match expectation'
-		);
-		WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
-
-		$this->assertEquals(
-			array(),
-			WP_Style_Engine_CSS_Rules_Store::get_stores(),
-			'Return value of get_stores() is not an empty array after remove_all_stores() called.'
-		);
-	}
-
-	/**
-	 * Tests adding rules to an existing store.
-	 *
-	 * @covers ::add_rule
-	 */
-	public function test_should_add_rule_to_existing_store() {
-		$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->assertSame( $expected, $store_rule->get_css(), 'Return value of get_css() is not a empty string where a rule has no CSS declarations.' );
-
-		$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->assertSame( $expected, $store_rule->get_css(), 'Return value of get_css() does not match expected CSS from existing store rules.' );
-	}
-
-	/**
-	 * Tests that all stored rule objects are returned.
-	 *
-	 * @covers ::get_all_rules
-	 */
-	public function test_should_get_all_rule_objects_for_a_store() {
-		$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->assertSame( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations.' );
-
-		$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->assertSame( $expected, $new_pizza_store->get_all_rules(), 'Return value for get_all_rules() does not match expectations after adding new rules to store.' );
-	}
-}