@wordpress/style-engine 0.9.0 → 0.12.0

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

@@ -0,0 +1,108 @@
+<?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 escape values and run the CSS through safecss_filter_attr.
+	 */
+	public function test_remove_unsafe_properties_and_values() {
+		$input_declarations = array(
+			'color'        => '<red/>',
+			'margin-right' => '10em',
+			'potato'       => 'uppercase',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $input_declarations );
+
+		$this->assertSame(
+			'color: &lt;red/&gt;; margin-right: 10em;',
+			$css_declarations->get_declarations_string()
+		);
+	}
+}

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

@@ -6,6 +6,7 @@
  * @subpackage style-engine
  */
 
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
 require __DIR__ . '/../class-wp-style-engine.php';
 
 /**
@@ -13,12 +14,16 @@ require __DIR__ . '/../class-wp-style-engine.php';
  */
 class WP_Style_Engine_Test extends WP_UnitTestCase {
 	/**
-	 * Tests generating styles and classnames based on various manifestations of the $block_styles argument.
+	 * Tests generating block styles and classnames based on various manifestations of the $block_styles argument.
 	 *
-	 * @dataProvider data_generate_styles_fixtures
+	 * @dataProvider data_generate_block_supports_styles_fixtures
+	 *
+	 * @param array  $block_styles    The incoming block styles object.
+	 * @param array  $options         Style engine options.
+	 * @param string $expected_output The expected output.
 	 */
-	function test_generate_styles( $block_styles, $expected_output ) {
-		$generated_styles = wp_style_engine_generate( $block_styles );
+	public function test_generate_block_supports_styles( $block_styles, $options, $expected_output ) {
+		$generated_styles = wp_style_engine_get_block_supports_styles( $block_styles, $options );
 		$this->assertSame( $expected_output, $generated_styles );
 	}
 
@@ -27,15 +32,17 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 	 *
 	 * @return array
 	 */
-	public function data_generate_styles_fixtures() {
+	public function data_generate_block_supports_styles_fixtures() {
 		return array(
 			'default_return_value'                         => array(
 				'block_styles'    => array(),
+				'options'         => null,
 				'expected_output' => null,
 			),
 
 			'inline_invalid_block_styles_empty'            => array(
 				'block_styles'    => 'hello world!',
+				'options'         => null,
 				'expected_output' => null,
 			),
 
@@ -43,6 +50,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'block_styles'    => array(
 					'pageBreakAfter' => 'verso',
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -50,6 +58,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'block_styles'    => array(
 					'pageBreakAfter' => 'verso',
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -59,6 +68,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'gap' => '1000vw',
 					),
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -68,12 +78,25 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'text' => 'var:preset|color|texas-flood',
 					),
 					'spacing' => array(
-						'margin' => '111px',
+						'margin'  => '111px',
+						'padding' => '0',
+					),
+					'border'  => array(
+						'color' => 'var:preset|color|cool-caramel',
+						'width' => '2rem',
+						'style' => 'dotted',
 					),
 				),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
-					'css'        => 'margin: 111px;',
-					'classnames' => 'has-text-color has-texas-flood-color',
+					'css'          => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
+					'declarations' => array(
+						'border-style' => 'dotted',
+						'border-width' => '2rem',
+						'padding'      => '0',
+						'margin'       => '111px',
+					),
+					'classnames'   => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color',
 				),
 			),
 
@@ -93,9 +116,32 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 							'right'  => '10em',
 						),
 					),
+					'border'  => array(
+						'radius' => array(
+							'topLeft'     => '99px',
+							'topRight'    => '98px',
+							'bottomLeft'  => '97px',
+							'bottomRight' => '96px',
+						),
+					),
 				),
+				'options'         => null,
 				'expected_output' => array(
-					'css' => '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',
+						'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',
+					),
 				),
 			),
 
@@ -112,10 +158,75 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'letterSpacing'  => '2',
 					),
 				),
+				'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;',
+					'declarations' => array(
+						'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',
+					),
+				),
+			),
+
+			'style_block_with_selector'                    => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'padding' => array(
+							'top'    => '42px',
+							'left'   => '2%',
+							'bottom' => '44px',
+							'right'  => '5rem',
+						),
+					),
+				),
+				'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; }',
+					'declarations' => array(
+						'padding-top'    => '42px',
+						'padding-left'   => '2%',
+						'padding-bottom' => '44px',
+						'padding-right'  => '5rem',
+					),
+				),
+			),
+
+			'elements_with_css_var_value'                  => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|color|my-little-pony',
+					),
+				),
+				'options'         => array(
+					'selector' => '.wp-selector',
+				),
+				'expected_output' => array(
+					'css'          => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
+					'declarations' => array(
+						'color' => 'var(--wp--preset--color--my-little-pony)',
+					),
+					'classnames'   => 'has-text-color has-my-little-pony-color',
+				),
+			),
+
+			'elements_with_invalid_preset_style_property'  => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|invalid_property|my-little-pony',
+					),
+				),
+				'options'         => array( 'selector' => '.wp-selector' ),
 				'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;',
+					'classnames' => 'has-text-color',
 				),
 			),
+
 			'valid_classnames_deduped'                     => array(
 				'block_styles'    => array(
 					'color'      => array(
@@ -128,10 +239,28 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'fontFamily' => 'var:preset|font-family|totally-awesome',
 					),
 				),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-copper-socks-color has-background has-splendid-carrot-background-color has-like-wow-dude-gradient-background has-fantastic-font-size has-totally-awesome-font-family',
 				),
 			),
+
+			'valid_classnames_and_css_vars'                => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|color|teal-independents',
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => 'color: var(--wp--preset--color--teal-independents);',
+					'declarations' => array(
+						'color' => 'var(--wp--preset--color--teal-independents)',
+					),
+					'classnames'   => 'has-text-color has-teal-independents-color',
+				),
+			),
+
 			'valid_classnames_with_null_style_values'      => array(
 				'block_styles'    => array(
 					'color' => array(
@@ -139,11 +268,16 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'background' => null,
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
-					'css'        => 'color: #fff;',
-					'classnames' => 'has-text-color',
+					'css'          => 'color: #fff;',
+					'declarations' => array(
+						'color' => '#fff',
+					),
+					'classnames'   => 'has-text-color',
 				),
 			),
+
 			'invalid_classnames_preset_value'              => array(
 				'block_styles'    => array(
 					'color'   => array(
@@ -155,10 +289,83 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'padding' => 'var:preset|spacing|padding',
 					),
 				),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-background',
 				),
 			),
+
+			'valid_spacing_single_preset_values'           => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin'  => 'var:preset|spacing|10',
+						'padding' => 'var:preset|spacing|20',
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'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)',
+					),
+				),
+			),
+
+			'valid_spacing_multi_preset_values'            => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin'  => array(
+							'left'   => 'var:preset|spacing|10',
+							'right'  => 'var:preset|spacing|20',
+							'top'    => '1rem',
+							'bottom' => '1rem',
+						),
+						'padding' => array(
+							'left'   => 'var:preset|spacing|30',
+							'right'  => 'var:preset|spacing|40',
+							'top'    => '14px',
+							'bottom' => '14px',
+						),
+					),
+				),
+				'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;',
+					'declarations' => array(
+						'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',
+					),
+				),
+			),
+
+			'invalid_spacing_multi_preset_values'          => array(
+				'block_styles'    => array(
+					'spacing' => array(
+						'margin' => array(
+							'left'   => 'var:preset|spaceman|10',
+							'right'  => 'var:preset|spaceman|20',
+							'top'    => '1rem',
+							'bottom' => '0',
+						),
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => 'margin-top: 1rem; margin-bottom: 0;',
+					'declarations' => array(
+						'margin-top'    => '1rem',
+						'margin-bottom' => '0',
+					),
+				),
+			),
+
 			'invalid_classnames_options'                   => array(
 				'block_styles'    => array(
 					'typography' => array(
@@ -170,8 +377,85 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						),
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(),
 			),
+
+			'inline_valid_box_model_style_with_sides'      => array(
+				'block_styles'    => array(
+					'border' => array(
+						'top'    => array(
+							'color' => '#fe1',
+							'width' => '1.5rem',
+							'style' => 'dashed',
+						),
+						'right'  => array(
+							'color' => '#fe2',
+							'width' => '1.4rem',
+							'style' => 'solid',
+						),
+						'bottom' => array(
+							'color' => '#fe3',
+							'width' => '1.3rem',
+						),
+						'left'   => array(
+							'color' => 'var:preset|color|swampy-yellow',
+							'width' => '0.5rem',
+							'style' => 'dotted',
+						),
+					),
+				),
+				'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;',
+					'declarations' => array(
+						'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',
+					),
+				),
+			),
+
+			'inline_invalid_box_model_style_with_sides'    => array(
+				'block_styles'    => array(
+					'border' => array(
+						'top'    => array(
+							'top'    => '#fe1',
+							'right'  => '1.5rem',
+							'cheese' => 'dashed',
+						),
+						'right'  => array(
+							'right' => '#fe2',
+							'top'   => '1.4rem',
+							'bacon' => 'solid',
+						),
+						'bottom' => array(
+							'color'  => 'var:preset|color|terrible-lizard',
+							'bottom' => '1.3rem',
+						),
+						'left'   => array(
+							'left'  => null,
+							'width' => null,
+							'top'   => 'dotted',
+						),
+					),
+				),
+				'options'         => array(),
+				'expected_output' => array(
+					'css'          => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'declarations' => array(
+						'border-bottom-color' => 'var(--wp--preset--color--terrible-lizard)',
+					),
+				),
+			),
 		);
 	}
 }

package/src/styles/border/index.ts

@@ -0,0 +1,145 @@
+/**
+ * Internal dependencies
+ */
+import type {
+	BorderIndividualStyles,
+	BorderIndividualProperty,
+	GeneratedCSSRule,
+	Style,
+	StyleDefinition,
+	StyleOptions,
+} from '../../types';
+import { generateRule, generateBoxRules, upperFirst } from '../utils';
+
+const color = {
+	name: 'color',
+	generate: (
+		style: Style,
+		options: StyleOptions,
+		path: string[] = [ 'border', 'color' ],
+		ruleKey: string = 'borderColor'
+	): GeneratedCSSRule[] => {
+		return generateRule( style, options, path, ruleKey );
+	},
+};
+
+const radius = {
+	name: 'radius',
+	generate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {
+		return generateBoxRules(
+			style,
+			options,
+			[ 'border', 'radius' ],
+			{
+				default: 'borderRadius',
+				individual: 'border%sRadius',
+			},
+			[ 'topLeft', 'topRight', 'bottomLeft', 'bottomRight' ]
+		);
+	},
+};
+
+const borderStyle = {
+	name: 'style',
+	generate: (
+		style: Style,
+		options: StyleOptions,
+		path: string[] = [ 'border', 'style' ],
+		ruleKey: string = 'borderStyle'
+	): GeneratedCSSRule[] => {
+		return generateRule( style, options, path, ruleKey );
+	},
+};
+
+const width = {
+	name: 'width',
+	generate: (
+		style: Style,
+		options: StyleOptions,
+		path: string[] = [ 'border', 'width' ],
+		ruleKey: string = 'borderWidth'
+	): GeneratedCSSRule[] => {
+		return generateRule( style, options, path, ruleKey );
+	},
+};
+
+const borderDefinitionsWithIndividualStyles: StyleDefinition[] = [
+	color,
+	borderStyle,
+	width,
+];
+
+/**
+ * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
+ *
+ * @param  individualProperty Individual border property ('top' | 'right' | 'bottom' | 'left').
+ *
+ * @return StyleDefinition[ 'generate' ]
+ */
+const createBorderGenerateFunction =
+	( individualProperty: BorderIndividualProperty ) =>
+	( style: Style, options: StyleOptions ) => {
+		const styleValue:
+			| BorderIndividualStyles< typeof individualProperty >
+			| undefined = style?.border?.[ individualProperty ];
+
+		if ( ! styleValue ) {
+			return [];
+		}
+
+		return borderDefinitionsWithIndividualStyles.reduce(
+			(
+				acc: GeneratedCSSRule[],
+				borderDefinition: StyleDefinition
+			): GeneratedCSSRule[] => {
+				const key = borderDefinition.name;
+				if (
+					styleValue.hasOwnProperty( key ) &&
+					typeof borderDefinition.generate === 'function'
+				) {
+					const ruleKey = `border${ upperFirst(
+						individualProperty
+					) }${ upperFirst( key ) }`;
+					acc.push(
+						...borderDefinition.generate(
+							style,
+							options,
+							[ 'border', individualProperty, key ],
+							ruleKey
+						)
+					);
+				}
+				return acc;
+			},
+			[]
+		);
+	};
+
+const borderTop = {
+	name: 'borderTop',
+	generate: createBorderGenerateFunction( 'top' ),
+};
+
+const borderRight = {
+	name: 'borderRight',
+	generate: createBorderGenerateFunction( 'right' ),
+};
+
+const borderBottom = {
+	name: 'borderBottom',
+	generate: createBorderGenerateFunction( 'bottom' ),
+};
+
+const borderLeft = {
+	name: 'borderLeft',
+	generate: createBorderGenerateFunction( 'left' ),
+};
+
+export default [
+	...borderDefinitionsWithIndividualStyles,
+	radius,
+	borderTop,
+	borderRight,
+	borderBottom,
+	borderLeft,
+];

package/src/styles/index.ts

@@ -1,8 +1,14 @@
 /**
  * Internal dependencies
  */
+import border from './border';
 import color from './color';
 import spacing from './spacing';
 import typography from './typography';
 
-export const styleDefinitions = [ ...color, ...spacing, ...typography ];
+export const styleDefinitions = [
+	...border,
+	...color,
+	...spacing,
+	...typography,
+];