@wordpress/style-engine 0.10.0 → 0.11.0

package/build-types/styles/border/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import type { GeneratedCSSRule, Style, StyleDefinition, StyleOptions } from '../../types';
+declare const _default: (StyleDefinition | {
+    name: string;
+    generate: (style: Style, options: StyleOptions) => GeneratedCSSRule[];
+})[];
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build-types/styles/border/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/border/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAGX,gBAAgB,EAChB,KAAK,EACL,eAAe,EACf,YAAY,EACZ,MAAM,aAAa,CAAC;;;;;AA+HrB,wBAOE"}

package/build-types/styles/index.d.ts

@@ -1,9 +1,5 @@
-export declare const styleDefinitions: {
+export declare const styleDefinitions: (import("../types").StyleDefinition | {
     name: string;
-    generate: (style: import("../types").Style, options: import("../types").StyleOptions) => {
-        selector: string;
-        key: string;
-        value: string;
-    }[];
-}[];
+    generate: (style: import("../types").Style, options: import("../types").StyleOptions) => import("../types").GeneratedCSSRule[];
+})[];
 //# sourceMappingURL=index.d.ts.map

package/build-types/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB;;;;;;;GAA0C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,gBAAgB;;;IAK5B,CAAC"}

package/build-types/styles/spacing/margin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"margin.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/margin.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,MAAM;;sBAEQ,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"margin.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/margin.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,MAAM;;sBAEQ,KAAK,WAAW,YAAY;CAM/C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build-types/styles/spacing/padding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/padding.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,OAAO;;sBAEO,KAAK,WAAW,YAAY;CAQ/C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../../src/styles/spacing/padding.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGvD,QAAA,MAAM,OAAO;;sBAEO,KAAK,WAAW,YAAY;CAM/C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build-types/styles/utils.d.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { GeneratedCSSRule, Style, StyleOptions } from '../types';
+import type { CssRulesKeys, GeneratedCSSRule, Style, StyleOptions } from '../types';
 /**
  * Returns a JSON representation of the generated CSS rules.
  *
@@ -20,14 +20,15 @@ export declare function generateRule(style: Style, options: StyleOptions, path:
 /**
  * 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 declare function generateBoxRules(style: Style, options: StyleOptions, path: string[], ruleKey: string): GeneratedCSSRule[];
+export declare function generateBoxRules(style: Style, options: StyleOptions, path: string[], ruleKeys: CssRulesKeys, individualProperties?: string[]): GeneratedCSSRule[];
 /**
  * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
  *
@@ -36,4 +37,12 @@ export declare function generateBoxRules(style: Style, options: StyleOptions, pa
  * @return string A CSS var value.
  */
 export declare function getCSSVarFromStyleValue(styleValue: string): string;
+/**
+ * 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 declare function upperFirst([firstLetter, ...rest]: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/styles/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAO,YAAY,EAAE,MAAM,UAAU,CAAC;AAO3E;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM,GACb,gBAAgB,EAAE,CAgCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/styles/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EACZ,gBAAgB,EAChB,KAAK,EAEL,YAAY,EACZ,MAAM,UAAU,CAAC;AAOlB;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE,MAAM;;;;IAaf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,YAAY,EACrB,IAAI,EAAE,MAAM,EAAE,EACd,QAAQ,EAAE,YAAY,EACtB,oBAAoB,GAAE,MAAM,EAAyC,GACnE,gBAAgB,EAAE,CAmCpB;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,UAAU,EAAE,MAAM,GAAI,MAAM,CAYpE;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,CAAE,WAAW,EAAE,GAAG,IAAI,CAAE,EAAE,MAAM,UAE3D"}

package/build-types/types.d.ts

@@ -9,7 +9,28 @@ export declare type Box<T extends BoxVariants = undefined> = {
     bottom?: CSSProperties[T extends undefined ? 'bottom' : `${T}Bottom`];
     left?: CSSProperties[T extends undefined ? 'left' : `${T}Left`];
 };
+export declare type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
+export declare 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'>;
@@ -37,6 +58,10 @@ export interface Style {
         };
     };
 }
+export declare type CssRulesKeys = {
+    default: string;
+    individual: string;
+};
 export declare type StyleOptions = {
     /**
      * CSS selector for the generated style.
@@ -54,7 +79,7 @@ export declare 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[];
 }
 export {};

package/build-types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,aAAK,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;AACpD,oBAAY,GAAG,CAAE,CAAC,SAAS,WAAW,GAAG,SAAS,IAAK;IACtD,GAAG,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,GAAI,CAAE,KAAK,CAAE,CAAC;IACjE,KAAK,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,OAAO,GAAG,GAAI,CAAE,OAAO,CAAE,CAAC;IACvE,MAAM,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,QAAQ,GAAG,GAAI,CAAE,QAAQ,CAAE,CAAC;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,MAAM,GAAG,GAAI,CAAE,MAAM,CAAE,CAAC;CACpE,CAAC;AAEF,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE;QACT,MAAM,CAAC,EAAE,aAAa,CAAE,QAAQ,CAAE,GAAG,GAAG,CAAE,QAAQ,CAAE,CAAC;QACrD,OAAO,CAAC,EAAE,aAAa,CAAE,SAAS,CAAE,GAAG,GAAG,CAAE,SAAS,CAAE,CAAC;KACxD,CAAC;IACF,UAAU,CAAC,EAAE;QACZ,QAAQ,CAAC,EAAE,aAAa,CAAE,UAAU,CAAE,CAAC;QACvC,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,SAAS,CAAC,EAAE,aAAa,CAAE,WAAW,CAAE,CAAC;QACzC,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;QACjD,UAAU,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;QAC3C,cAAc,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;QACnD,aAAa,CAAC,EAAE,aAAa,CAAE,eAAe,CAAE,CAAC;KACjD,CAAC;IACF,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;QAChC,UAAU,CAAC,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;QAChD,QAAQ,CAAC,EAAE,aAAa,CAAE,YAAY,CAAE,CAAC;KACzC,CAAC;IACF,QAAQ,CAAC,EAAE;QACV,IAAI,CAAC,EAAE;YACN,KAAK,CAAC,EAAE;gBACP,IAAI,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;aAChC,CAAC;SACF,CAAC;KACF,CAAC;CACF;AAED,oBAAY,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,WAAW,eAAe;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,KAAM,gBAAgB,EAAE,CAAC;IACzE,aAAa,CAAC,EAAE,CAAE,KAAK,EAAE,KAAK,KAAM,MAAM,EAAE,CAAC;CAC7C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/class-wp-style-engine.php

@@ -41,7 +41,7 @@ class WP_Style_Engine {
 	 *                    The value should be a valid CSS property (string) to match the incoming value, e.g., "color" to match var:preset|color|somePresetSlug.
 	 *  - property_keys => (array) array of keys whose values represent a valid CSS property, e.g., "margin" or "border".
 	 *  - path          => (array) a path that accesses the corresponding style value in the block style object.
-	 *  - value_func    => (string) the name of a function to generate an array of valid CSS rules for a particular style object.
+	 *  - value_func    => (string) the name of a function to generate a CSS definition array for a particular style object. The output of this function should be `array( "$property" => "$value", ... )`.
 	 */
 	const BLOCK_STYLE_DEFINITIONS_METADATA = array(
 		'color'      => array(
@@ -113,28 +113,28 @@ class WP_Style_Engine {
 				'path'          => array( 'border', 'width' ),
 			),
 			'top'    => array(
-				'value_func' => 'static::get_css_individual_property_rules',
+				'value_func' => 'static::get_individual_property_css_declarations',
 				'path'       => array( 'border', 'top' ),
 				'css_vars'   => array(
 					'color' => '--wp--preset--color--$slug',
 				),
 			),
 			'right'  => array(
-				'value_func' => 'static::get_css_individual_property_rules',
+				'value_func' => 'static::get_individual_property_css_declarations',
 				'path'       => array( 'border', 'right' ),
 				'css_vars'   => array(
 					'color' => '--wp--preset--color--$slug',
 				),
 			),
 			'bottom' => array(
-				'value_func' => 'static::get_css_individual_property_rules',
+				'value_func' => 'static::get_individual_property_css_declarations',
 				'path'       => array( 'border', 'bottom' ),
 				'css_vars'   => array(
 					'color' => '--wp--preset--color--$slug',
 				),
 			),
 			'left'   => array(
-				'value_func' => 'static::get_css_individual_property_rules',
+				'value_func' => 'static::get_individual_property_css_declarations',
 				'path'       => array( 'border', 'left' ),
 				'css_vars'   => array(
 					'color' => '--wp--preset--color--$slug',
@@ -247,7 +247,7 @@ class WP_Style_Engine {
 	}
 
 	/**
-	 * Checks whether an incoming style value is valid.
+	 * Checks whether an incoming block style value is valid.
 	 *
 	 * @param string? $style_value  A single css preset value.
 	 *
@@ -302,17 +302,15 @@ class WP_Style_Engine {
 	}
 
 	/**
-	 * Returns CSS rules based on valid block style values.
+	 * Returns an array of CSS declarations based on valid block style values.
 	 *
 	 * @param array         $style_value      A single raw style value from the generate() $block_styles array.
 	 * @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
 	 * @param boolean       $should_return_css_vars Whether to try to build and return CSS var values.
 	 *
-	 * @return array        An array of CSS rules.
+	 * @return array        An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_css( $style_value, $style_definition, $should_return_css_vars ) {
-		$rules = array();
-
+	protected static function get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) {
 		if (
 			isset( $style_definition['value_func'] ) &&
 			is_callable( $style_definition['value_func'] )
@@ -320,7 +318,8 @@ class WP_Style_Engine {
 			return call_user_func( $style_definition['value_func'], $style_value, $style_definition );
 		}
 
-		$style_properties = $style_definition['property_keys'];
+		$css_declarations    = array();
+		$style_property_keys = $style_definition['property_keys'];
 
 		// Build CSS var values from var:? values, e.g, `var(--wp--css--rule-slug )`
 		// Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
@@ -329,15 +328,15 @@ class WP_Style_Engine {
 				foreach ( $style_definition['css_vars'] as $css_var_pattern => $property_key ) {
 					$slug = static::get_slug_from_preset_value( $style_value, $property_key );
 					if ( $slug ) {
-						$css_var                               = strtr(
+						$css_var = strtr(
 							$css_var_pattern,
 							array( '$slug' => $slug )
 						);
-						$rules[ $style_properties['default'] ] = "var($css_var)";
+						$css_declarations[ $style_property_keys['default'] ] = "var($css_var)";
 					}
 				}
 			}
-			return $rules;
+			return $css_declarations;
 		}
 
 		// Default rule builder.
@@ -345,19 +344,19 @@ class WP_Style_Engine {
 		// for styles such as margins and padding.
 		if ( is_array( $style_value ) ) {
 			foreach ( $style_value as $key => $value ) {
-				$individual_property           = sprintf( $style_properties['individual'], _wp_to_kebab_case( $key ) );
-				$rules[ $individual_property ] = $value;
+				$individual_property                      = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
+				$css_declarations[ $individual_property ] = $value;
 			}
 		} else {
-			$rules[ $style_properties['default'] ] = $style_value;
+			$css_declarations[ $style_property_keys['default'] ] = $style_value;
 		}
 
-		return $rules;
+		return $css_declarations;
 	}
 
 	/**
-	 * Returns an CSS ruleset.
-	 * Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * Returns classname and CSS from a block styles object.
+	 * Return values are parsed based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
 	 *
 	 * @param array $block_styles An array of styles from a block's attributes.
 	 * @param array $options array(
@@ -375,7 +374,7 @@ class WP_Style_Engine {
 			return null;
 		}
 
-		$css_rules              = array();
+		$css_declarations       = array();
 		$classnames             = array();
 		$should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars'];
 
@@ -391,36 +390,38 @@ class WP_Style_Engine {
 					continue;
 				}
 
-				$classnames = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
-				$css_rules  = array_merge( $css_rules, static::get_css( $style_value, $style_definition, $should_return_css_vars ) );
+				$classnames       = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
+				$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) );
 			}
 		}
 
 		// Build CSS rules output.
-		$selector      = isset( $options['selector'] ) ? $options['selector'] : null;
-		$css           = array();
-		$styles_output = array();
-
-		if ( ! empty( $css_rules ) ) {
-			// Generate inline style rules.
-			foreach ( $css_rules as $rule => $value ) {
-				$filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) );
-				if ( ! empty( $filtered_css ) ) {
-					$css[] = $filtered_css . ';';
+		$css_selector              = isset( $options['selector'] ) ? $options['selector'] : null;
+		$filtered_css_declarations = array();
+
+		if ( ! empty( $css_declarations ) ) {
+			// Generate inline style declarations.
+			foreach ( $css_declarations as $css_property => $css_value ) {
+				$filtered_css_declaration = esc_html( safecss_filter_attr( "{$css_property}: {$css_value}" ) );
+				if ( ! empty( $filtered_css_declaration ) ) {
+					$filtered_css_declarations[] = $filtered_css_declaration . ';';
 				}
 			}
 		}
 
+		// The return object.
+		$styles_output = array();
+
 		// Return css, if any.
-		if ( ! empty( $css ) ) {
+		if ( ! empty( $filtered_css_declarations ) ) {
 			// Return an entire rule if there is a selector.
-			if ( $selector ) {
-				$style_block          = "$selector { ";
-				$style_block         .= implode( ' ', $css );
-				$style_block         .= ' }';
-				$styles_output['css'] = $style_block;
+			if ( $css_selector ) {
+				$css_rule             = "$css_selector { ";
+				$css_rule            .= implode( ' ', $filtered_css_declarations );
+				$css_rule            .= ' }';
+				$styles_output['css'] = $css_rule;
 			} else {
-				$styles_output['css'] = implode( ' ', $css );
+				$styles_output['css'] = implode( ' ', $filtered_css_declarations );
 			}
 		}
 
@@ -434,7 +435,7 @@ class WP_Style_Engine {
 
 
 	/**
-	 * Style value parser that returns a CSS ruleset of style properties for style definition groups
+	 * Style value parser that returns a CSS definition array comprising style properties
 	 * that have keys representing individual style properties, otherwise known as longhand CSS properties.
 	 * e.g., "$style_property-$individual_feature: $value;", which could represent the following:
 	 * "border-{top|right|bottom|left}-{color|width|style}: {value};" or,
@@ -443,13 +444,13 @@ class WP_Style_Engine {
 	 * @param array $style_value                    A single raw Gutenberg style attributes value for a CSS property.
 	 * @param array $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
 	 *
-	 * @return array The class name for the added style.
+	 * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_css_individual_property_rules( $style_value, $individual_property_definition ) {
-		$rules = array();
+	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition ) {
+		$css_declarations = array();
 
 		if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
-			return $rules;
+			return $css_declarations;
 		}
 
 		// The first item in $individual_property_definition['path'] array tells us the style property, e.g., "border".
@@ -477,11 +478,11 @@ class WP_Style_Engine {
 					);
 					$value   = "var($css_var)";
 				}
-				$individual_css_property           = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
-				$rules[ $individual_css_property ] = $value;
+				$individual_css_property                      = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
+				$css_declarations[ $individual_css_property ] = $value;
 			}
 		}
-		return $rules;
+		return $css_declarations;
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/style-engine",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"description": "WordPress Style engine.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,5 +34,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

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',
+		} );
 	},
 };