@wordpress/style-engine 0.8.0 → 0.11.0

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

@@ -17,8 +17,8 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 	 *
 	 * @dataProvider data_generate_styles_fixtures
 	 */
-	function test_generate_styles( $block_styles, $expected_output ) {
-		$generated_styles = wp_style_engine_generate( $block_styles );
+	function test_generate_styles( $block_styles, $options, $expected_output ) {
+		$generated_styles = wp_style_engine_generate( $block_styles, $options );
 		$this->assertSame( $expected_output, $generated_styles );
 	}
 
@@ -31,11 +31,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 		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 +45,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'block_styles'    => array(
 					'pageBreakAfter' => 'verso',
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -50,6 +53,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				'block_styles'    => array(
 					'pageBreakAfter' => 'verso',
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -59,6 +63,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'gap' => '1000vw',
 					),
 				),
+				'options'         => null,
 				'expected_output' => array(),
 			),
 
@@ -68,12 +73,19 @@ 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(),
 				'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;',
+					'classnames' => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color',
 				),
 			),
 
@@ -93,9 +105,18 @@ 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;',
 				),
 			),
 
@@ -112,10 +133,57 @@ 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;',
 				),
 			),
+
+			'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; }',
+				),
+			),
+
+			'elements_with_css_var_value'                  => array(
+				'block_styles'    => array(
+					'color' => array(
+						'text' => 'var:preset|color|my-little-pony',
+					),
+				),
+				'options'         => array(
+					'selector' => '.wp-selector',
+					'css_vars' => true,
+				),
+				'expected_output' => array(
+					'css'        => '.wp-selector { 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(
+					'classnames' => 'has-text-color',
+				),
+			),
+
 			'valid_classnames_deduped'                     => array(
 				'block_styles'    => array(
 					'color'      => array(
@@ -128,10 +196,25 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'fontFamily' => 'var:preset|font-family|totally-awesome',
 					),
 				),
+				'options'         => array(),
 				'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( 'css_vars' => true ),
+				'expected_output' => array(
+					'css'        => '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 +222,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'background' => null,
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
 					'css'        => 'color: #fff;',
 					'classnames' => 'has-text-color',
 				),
 			),
+
 			'invalid_classnames_preset_value'              => array(
 				'block_styles'    => array(
 					'color'   => array(
@@ -155,10 +240,12 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'padding' => 'var:preset|spacing|padding',
 					),
 				),
+				'options'         => array(),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-background',
 				),
 			),
+
 			'invalid_classnames_options'                   => array(
 				'block_styles'    => array(
 					'typography' => array(
@@ -170,8 +257,69 @@ 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;',
+				),
+			),
+
+			'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);',
+				),
+			),
 		);
 	}
 }

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,
+];

package/src/styles/spacing/margin.ts

@@ -7,12 +7,10 @@ import { generateBoxRules } from '../utils';
 const margin = {
 	name: 'margin',
 	generate: ( style: Style, options: StyleOptions ) => {
-		return generateBoxRules(
-			style,
-			options,
-			[ 'spacing', 'margin' ],
-			'margin'
-		);
+		return generateBoxRules( style, options, [ 'spacing', 'margin' ], {
+			default: 'margin',
+			individual: 'margin%s',
+		} );
 	},
 };
 

package/src/styles/spacing/padding.ts

@@ -7,12 +7,10 @@ import { generateBoxRules } from '../utils';
 const padding = {
 	name: 'padding',
 	generate: ( style: Style, options: StyleOptions ) => {
-		return generateBoxRules(
-			style,
-			options,
-			[ 'spacing', 'padding' ],
-			'padding'
-		);
+		return generateBoxRules( style, options, [ 'spacing', 'padding' ], {
+			default: 'padding',
+			individual: 'padding%s',
+		} );
 	},
 };
 

package/src/styles/utils.ts

@@ -1,12 +1,18 @@
 /**
  * External dependencies
  */
-import { get, upperFirst } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
  */
-import type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';
+import type {
+	CssRulesKeys,
+	GeneratedCSSRule,
+	Style,
+	Box,
+	StyleOptions,
+} from '../types';
 import {
 	VARIABLE_REFERENCE_PREFIX,
 	VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
@@ -45,18 +51,20 @@ export function generateRule(
 /**
  * Returns a JSON representation of the generated CSS rules taking into account box model properties, top, right, bottom, left.
  *
- * @param  style   Style object.
- * @param  options Options object with settings to adjust how the styles are generated.
- * @param  path    An array of strings representing the path to the style value in the style object.
- * @param  ruleKey A CSS property key.
+ * @param style                Style object.
+ * @param options              Options object with settings to adjust how the styles are generated.
+ * @param path                 An array of strings representing the path to the style value in the style object.
+ * @param ruleKeys             An array of CSS property keys and patterns.
+ * @param individualProperties The "sides" or individual properties for which to generate rules.
  *
- * @return GeneratedCSSRule[] CSS rules.
+ * @return GeneratedCSSRule[]  CSS rules.
  */
 export function generateBoxRules(
 	style: Style,
 	options: StyleOptions,
 	path: string[],
-	ruleKey: string
+	ruleKeys: CssRulesKeys,
+	individualProperties: string[] = [ 'top', 'right', 'bottom', 'left' ]
 ): GeneratedCSSRule[] {
 	const boxStyle: Box | string | undefined = get( style, path );
 	if ( ! boxStyle ) {
@@ -67,17 +75,20 @@ export function generateBoxRules(
 	if ( typeof boxStyle === 'string' ) {
 		rules.push( {
 			selector: options?.selector,
-			key: ruleKey,
+			key: ruleKeys.default,
 			value: boxStyle,
 		} );
 	} else {
-		const sideRules = [ 'top', 'right', 'bottom', 'left' ].reduce(
+		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
 				const value: string | undefined = get( boxStyle, [ side ] );
 				if ( value ) {
 					acc.push( {
 						selector: options?.selector,
-						key: `${ ruleKey }${ upperFirst( side ) }`,
+						key: ruleKeys?.individual.replace(
+							'%s',
+							upperFirst( side )
+						),
 						value,
 					} );
 				}
@@ -111,3 +122,14 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 	}
 	return styleValue;
 }
+
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return string A CSS var value.
+ */
+export function upperFirst( [ firstLetter, ...rest ]: string ) {
+	return firstLetter.toUpperCase() + rest.join( '' );
+}

package/src/test/index.js

@@ -81,6 +81,57 @@ describe( 'generate', () => {
 			} )
 		).toEqual( 'color: var(--wp--preset--color--ham-sandwich);' );
 	} );
+
+	it( 'should parse border rules', () => {
+		expect(
+			generate( {
+				border: {
+					color: 'var:preset|color|perky-peppermint',
+					width: '0.5em',
+					style: 'dotted',
+					radius: '11px',
+				},
+			} )
+		).toEqual(
+			'border-color: var(--wp--preset--color--perky-peppermint); border-style: dotted; border-width: 0.5em; border-radius: 11px;'
+		);
+	} );
+
+	it( 'should parse individual border rules', () => {
+		expect(
+			generate( {
+				border: {
+					top: {
+						color: 'var:preset|color|sandy-beach',
+						width: '9px',
+						style: 'dashed',
+					},
+					right: {
+						color: 'var:preset|color|leafy-avenue',
+						width: '5rem',
+					},
+					bottom: {
+						color: '#eee',
+						width: '2%',
+						style: 'solid',
+					},
+					left: {
+						color: 'var:preset|color|avocado-blues',
+						width: '100px',
+						style: 'dotted',
+					},
+					radius: {
+						topLeft: '1px',
+						topRight: '2px',
+						bottomLeft: '3px',
+						bottomRight: '4px',
+					},
+				},
+			} )
+		).toEqual(
+			'border-top-left-radius: 1px; border-top-right-radius: 2px; border-bottom-left-radius: 3px; border-bottom-right-radius: 4px; border-top-color: var(--wp--preset--color--sandy-beach); border-top-style: dashed; border-top-width: 9px; border-right-color: var(--wp--preset--color--leafy-avenue); border-right-width: 5rem; border-bottom-color: #eee; border-bottom-style: solid; border-bottom-width: 2%; border-left-color: var(--wp--preset--color--avocado-blues); border-left-style: dotted; border-left-width: 100px;'
+		);
+	} );
 } );
 
 describe( 'getCSSRules', () => {

package/src/test/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { upperFirst } from '../styles/utils';
+
+describe( 'utils', () => {
+	describe( 'upperFirst()', () => {
+		it( 'should return an string with a capitalized first letter', () => {
+			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
+		} );
+	} );
+} );

package/src/types.ts

@@ -11,7 +11,32 @@ export type Box< T extends BoxVariants = undefined > = {
 	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
 };
 
+export type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
+// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.
+export type BorderIndividualStyles< T extends BorderIndividualProperty > = {
+	color?: CSSProperties[ `border${ Capitalize< string & T > }Color` ];
+	style?: CSSProperties[ `border${ Capitalize< string & T > }Style` ];
+	width?: CSSProperties[ `border${ Capitalize< string & T > }Width` ];
+};
+
 export interface Style {
+	border?: {
+		color?: CSSProperties[ 'borderColor' ];
+		radius?:
+			| CSSProperties[ 'borderRadius' ]
+			| {
+					topLeft?: CSSProperties[ 'borderTopLeftRadius' ];
+					topRight?: CSSProperties[ 'borderTopRightRadius' ];
+					bottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];
+					bottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];
+			  };
+		style?: CSSProperties[ 'borderStyle' ];
+		width?: CSSProperties[ 'borderWidth' ];
+		top?: BorderIndividualStyles< 'top' >;
+		right?: BorderIndividualStyles< 'right' >;
+		bottom?: BorderIndividualStyles< 'bottom' >;
+		left?: BorderIndividualStyles< 'left' >;
+	};
 	spacing?: {
 		margin?: CSSProperties[ 'margin' ] | Box< 'margin' >;
 		padding?: CSSProperties[ 'padding' ] | Box< 'padding' >;
@@ -40,6 +65,8 @@ export interface Style {
 	};
 }
 
+export type CssRulesKeys = { default: string; individual: string };
+
 export type StyleOptions = {
 	/**
 	 * CSS selector for the generated style.
@@ -59,6 +86,11 @@ export type GeneratedCSSRule = {
 
 export interface StyleDefinition {
 	name: string;
-	generate?: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
+	generate?: (
+		style: Style,
+		options: StyleOptions,
+		path?: string[],
+		ruleKey?: string
+	) => GeneratedCSSRule[];
 	getClassNames?: ( style: Style ) => string[];
 }