@wordpress/style-engine 0.10.0 → 0.13.0

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

@@ -0,0 +1,115 @@
+<?php
+/**
+ * Tests the Style Engine CSS Rules Store class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+
+require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+
+/**
+ * Tests for registering, storing and retrieving CSS Rules.
+ */
+class WP_Style_Engine_CSS_Rules_Store_Test extends WP_UnitTestCase {
+	/**
+	 * Should create a new store.
+	 */
+	public function test_create_new_store() {
+		$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 );
+	}
+
+	/**
+	 * Should return previously created store when the same selector key is passed.
+	 */
+	public function test_get_store() {
+		$new_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
+		$selector       = '.haddock';
+
+		$new_fish_store->add_rule( $selector )->get_selector();
+		$this->assertEquals( $selector, $new_fish_store->add_rule( $selector )->get_selector() );
+
+		$the_same_fish_store = WP_Style_Engine_CSS_Rules_Store::get_store( 'fish-n-chips' );
+		$this->assertEquals( $selector, $the_same_fish_store->add_rule( $selector )->get_selector() );
+	}
+
+	/**
+	 * Should return a stored rule.
+	 */
+	public function test_add_rule() {
+		$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      = "$selector {}";
+		$this->assertEquals( $expected, $store_rule->get_css() );
+
+		$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->assertEquals( $expected, $store_rule->get_css() );
+	}
+
+	/**
+	 * Should return all stored rules.
+	 */
+	public function test_get_all_rules() {
+		$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->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$pizza_declarations = array(
+			'color'         => 'red',
+			'border-color'  => 'yellow',
+			'border-radius' => '10rem',
+		);
+		$css_declarations   = new WP_Style_Engine_CSS_Declarations( $pizza_declarations );
+		$store_rule->add_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector => $store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$new_pizza_declarations = array(
+			'color'        => 'red',
+			'border-color' => 'red',
+			'font-size'    => '10rem',
+		);
+		$css_declarations       = new WP_Style_Engine_CSS_Declarations( $new_pizza_declarations );
+		$store_rule->add_declarations( array( $css_declarations ) );
+
+		$expected = array(
+			$selector => $store_rule,
+		);
+		$this->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+
+		$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->assertEquals( $expected, $new_pizza_store->get_all_rules() );
+	}
+}

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

@@ -0,0 +1,127 @@
+<?php
+/**
+ * Tests the Style Engine Renderer class.
+ *
+ * @package    Gutenberg
+ * @subpackage style-engine
+ */
+require __DIR__ . '/../class-wp-style-engine-css-rules-store.php';
+require __DIR__ . '/../class-wp-style-engine-css-rule.php';
+require __DIR__ . '/../class-wp-style-engine-css-declarations.php';
+require __DIR__ . '/../class-wp-style-engine-processor.php';
+
+/**
+ * Tests for compiling and rendering styles from a store of CSS rules.
+ */
+class WP_Style_Engine_Processor_Test extends WP_UnitTestCase {
+	/**
+	 * Should compile CSS rules from the store.
+	 */
+	public function test_return_store_rules_as_css() {
+		$a_nice_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'nice' );
+		$a_nice_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_nice_store );
+		$a_nice_store->add_rule( '.a-nice-rule' )->add_declarations(
+			array(
+				'color'            => 'var(--nice-color)',
+				'background-color' => 'purple',
+			)
+		);
+		$a_nice_store->add_rule( '.a-nicer-rule' )->add_declarations(
+			array(
+				'font-family'      => 'Nice sans',
+				'font-size'        => '1em',
+				'background-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-nice-rule {color: var(--nice-color); background-color: purple;}.a-nicer-rule {font-family: Nice sans; font-size: 1em; background-color: purple;}', $a_nice_renderer->get_css() );
+	}
+
+	/**
+	 * Should merge CSS declarations.
+	 */
+	public function test_dedupe_and_merge_css_declarations() {
+		$an_excellent_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'excellent' );
+		$an_excellent_renderer = new WP_Style_Engine_Processor_Gutenberg( $an_excellent_store );
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dotted',
+			)
+		);
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dotted',
+				'border-color' => 'brown',
+			)
+		);
+
+		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dotted; border-color: brown;}', $an_excellent_renderer->get_css() );
+
+		$an_excellent_store->add_rule( '.an-excellent-rule' )->add_declarations(
+			array(
+				'color'        => 'var(--excellent-color)',
+				'border-style' => 'dashed',
+				'border-width' => '2px',
+			)
+		);
+
+		$this->assertEquals( '.an-excellent-rule {color: var(--excellent-color); border-style: dashed; border-color: brown; border-width: 2px;}', $an_excellent_renderer->get_css() );
+	}
+
+	/**
+	 * Should combine duplicate CSS rules.
+	 */
+	public function test_combine_css_rules() {
+		$a_sweet_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'sweet' );
+		$a_sweet_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_sweet_store );
+		$a_sweet_store->add_rule( '.a-sweet-rule' )->add_declarations(
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+		$a_sweet_store->add_rule( '#an-even-sweeter-rule > marquee' )->add_declarations(
+			array(
+				'color'            => 'var(--sweet-color)',
+				'background-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-sweet-rule,#an-even-sweeter-rule > marquee {color: var(--sweet-color); background-color: purple;}', $a_sweet_renderer->get_css() );
+	}
+
+	/**
+	 * Should combine and store CSS rules.
+	 */
+	public function test_store_combined_css_rules() {
+		$a_lovely_store    = WP_Style_Engine_CSS_Rules_Store_Gutenberg::get_store( 'lovely' );
+		$a_lovely_renderer = new WP_Style_Engine_Processor_Gutenberg( $a_lovely_store );
+		$a_lovely_store->add_rule( '.a-lovely-rule' )->add_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_store->add_rule( '.a-lovelier-rule' )->add_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule {border-color: purple;}', $a_lovely_renderer->get_css() );
+
+		$a_lovely_store->add_rule( '.a-most-lovely-rule' )->add_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+		$a_lovely_store->add_rule( '.a-perfectly-lovely-rule' )->add_declarations(
+			array(
+				'border-color' => 'purple',
+			)
+		);
+
+		$this->assertEquals( '.a-lovely-rule,.a-lovelier-rule,.a-most-lovely-rule,.a-perfectly-lovely-rule {border-color: purple;}', $a_lovely_renderer->get_css() );
+	}
+}

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, $options, $expected_output ) {
-		$generated_styles = wp_style_engine_generate( $block_styles, $options );
+	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,7 +32,7 @@ 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(),
@@ -82,10 +87,16 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'style' => 'dotted',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
-					'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',
+					'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',
 				),
 			),
 
@@ -116,7 +127,21 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'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;',
+					'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',
+					),
 				),
 			),
 
@@ -135,7 +160,17 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'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;',
+					'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',
+					),
 				),
 			),
 
@@ -152,7 +187,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'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; }',
+					'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',
+					),
 				),
 			),
 
@@ -164,11 +205,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'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',
+					'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',
 				),
 			),
 
@@ -196,7 +239,7 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'fontFamily' => 'var:preset|font-family|totally-awesome',
 					),
 				),
-				'options'         => array(),
+				'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',
 				),
@@ -208,10 +251,13 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'text' => 'var:preset|color|teal-independents',
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
-					'css'        => 'color: var(--wp--preset--color--teal-independents);',
-					'classnames' => 'has-text-color has-teal-independents-color',
+					'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',
 				),
 			),
 
@@ -224,8 +270,11 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css'        => 'color: #fff;',
-					'classnames' => 'has-text-color',
+					'css'          => 'color: #fff;',
+					'declarations' => array(
+						'color' => '#fff',
+					),
+					'classnames'   => 'has-text-color',
 				),
 			),
 
@@ -240,12 +289,83 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 						'padding' => 'var:preset|spacing|padding',
 					),
 				),
-				'options'         => array(),
+				'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(
@@ -287,7 +407,20 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'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;',
+					'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',
+					),
 				),
 			),
 
@@ -317,7 +450,10 @@ class WP_Style_Engine_Test extends WP_UnitTestCase {
 				),
 				'options'         => array(),
 				'expected_output' => array(
-					'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
+					'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,
+];