@wordpress/style-engine 0.7.0 → 0.10.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/index.ts

@@ -24,6 +24,16 @@ import { styleDefinitions } from './styles';
  */
 export function generate( style: Style, options: StyleOptions ): string {
 	const rules = getCSSRules( style, options );
+
+	// If no selector is provided, treat generated rules as inline styles to be returned as a single string.
+	if ( ! options?.selector ) {
+		const inlineRules: string[] = [];
+		rules.forEach( ( rule ) => {
+			inlineRules.push( `${ kebabCase( rule.key ) }: ${ rule.value };` );
+		} );
+		return inlineRules.join( ' ' );
+	}
+
 	const groupedRules = groupBy( rules, 'selector' );
 	const selectorRules = Object.keys( groupedRules ).reduce(
 		( acc: string[], subSelector: string ) => {
@@ -57,7 +67,9 @@ export function getCSSRules(
 ): GeneratedCSSRule[] {
 	const rules: GeneratedCSSRule[] = [];
 	styleDefinitions.forEach( ( definition: StyleDefinition ) => {
-		rules.push( ...definition.generate( style, options ) );
+		if ( typeof definition.generate === 'function' ) {
+			rules.push( ...definition.generate( style, options ) );
+		}
 	} );
 
 	return rules;

package/src/styles/color/background.ts

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const background = {
+	name: 'background',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'color', 'background' ],
+			'backgroundColor'
+		);
+	},
+};
+
+export default background;

package/src/styles/color/gradient.ts

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const gradient = {
+	name: 'gradient',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'color', 'gradient' ],
+			'background'
+		);
+	},
+};
+
+export default gradient;

package/src/styles/color/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import background from './background';
+import gradient from './gradient';
+import text from './text';
+
+export default [ text, gradient, background ];

package/src/styles/color/text.ts

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const text = {
+	name: 'text',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule( style, options, [ 'color', 'text' ], 'color' );
+	},
+};
+
+export default text;

package/src/styles/constants.ts

@@ -0,0 +1,3 @@
+export const VARIABLE_REFERENCE_PREFIX = 'var:';
+export const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+export const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';

package/src/styles/index.ts

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

package/src/styles/spacing/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Internal dependencies
+ */
+import padding from './padding';
+import margin from './margin';
+
+export default [ margin, padding ];

package/src/styles/{margin.ts → spacing/margin.ts}

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { Style, StyleOptions } from '../types';
-import { generateBoxRules } from './utils';
+import type { Style, StyleOptions } from '../../types';
+import { generateBoxRules } from '../utils';
 
 const margin = {
 	name: 'margin',

package/src/styles/{padding.ts → spacing/padding.ts}

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import type { Style, StyleOptions } from '../types';
-import { generateBoxRules } from './utils';
+import type { Style, StyleOptions } from '../../types';
+import { generateBoxRules } from '../utils';
 
 const padding = {
 	name: 'padding',

package/src/styles/typography/index.ts

@@ -0,0 +1,99 @@
+/**
+ * Internal dependencies
+ */
+import type { Style, StyleOptions } from '../../types';
+import { generateRule } from '../utils';
+
+const fontSize = {
+	name: 'fontSize',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontSize' ],
+			'fontSize'
+		);
+	},
+};
+
+const fontStyle = {
+	name: 'fontStyle',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontStyle' ],
+			'fontStyle'
+		);
+	},
+};
+
+const fontWeight = {
+	name: 'fontWeight',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'fontWeight' ],
+			'fontWeight'
+		);
+	},
+};
+
+const letterSpacing = {
+	name: 'letterSpacing',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'letterSpacing' ],
+			'letterSpacing'
+		);
+	},
+};
+
+const lineHeight = {
+	name: 'letterSpacing',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'lineHeight' ],
+			'lineHeight'
+		);
+	},
+};
+
+const textDecoration = {
+	name: 'textDecoration',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'textDecoration' ],
+			'textDecoration'
+		);
+	},
+};
+
+const textTransform = {
+	name: 'textTransform',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'typography', 'textTransform' ],
+			'textTransform'
+		);
+	},
+};
+
+export default [
+	fontSize,
+	fontStyle,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+	textDecoration,
+	textTransform,
+];

package/src/styles/utils.ts

@@ -7,7 +7,51 @@ import { get, upperFirst } from 'lodash';
  * Internal dependencies
  */
 import type { GeneratedCSSRule, Style, Box, StyleOptions } from '../types';
+import {
+	VARIABLE_REFERENCE_PREFIX,
+	VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
+	VARIABLE_PATH_SEPARATOR_TOKEN_STYLE,
+} from './constants';
 
+/**
+ * Returns a JSON representation of the generated CSS rules.
+ *
+ * @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.
+ *
+ * @return GeneratedCSSRule[] CSS rules.
+ */
+export function generateRule(
+	style: Style,
+	options: StyleOptions,
+	path: string[],
+	ruleKey: string
+) {
+	const styleValue: string | undefined = get( style, path );
+
+	return styleValue
+		? [
+				{
+					selector: options?.selector,
+					key: ruleKey,
+					value: getCSSVarFromStyleValue( styleValue ),
+				},
+		  ]
+		: [];
+}
+
+/**
+ * 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.
+ *
+ * @return GeneratedCSSRule[] CSS rules.
+ */
 export function generateBoxRules(
 	style: Style,
 	options: StyleOptions,
@@ -22,7 +66,7 @@ export function generateBoxRules(
 	const rules: GeneratedCSSRule[] = [];
 	if ( typeof boxStyle === 'string' ) {
 		rules.push( {
-			selector: options.selector,
+			selector: options?.selector,
 			key: ruleKey,
 			value: boxStyle,
 		} );
@@ -32,7 +76,7 @@ export function generateBoxRules(
 				const value: string | undefined = get( boxStyle, [ side ] );
 				if ( value ) {
 					acc.push( {
-						selector: options.selector,
+						selector: options?.selector,
 						key: `${ ruleKey }${ upperFirst( side ) }`,
 						value,
 					} );
@@ -46,3 +90,24 @@ export function generateBoxRules(
 
 	return rules;
 }
+
+/**
+ * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+ *
+ * @param  styleValue A raw style value.
+ *
+ * @return string A CSS var value.
+ */
+export function getCSSVarFromStyleValue( styleValue: string ): string {
+	if (
+		typeof styleValue === 'string' &&
+		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
+	) {
+		const variable = styleValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
+			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
+		return `var(--wp--${ variable })`;
+	}
+	return styleValue;
+}