From 0e6cc31a5602709955f5b5ab94ac17636ff7eca3 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 20:47:42 -0700
Subject: [PATCH 01/17] Refactor createBorderGenerateFunction

---
 .../style-engine/src/styles/border/index.ts   | 118 +++++++-----------
 packages/style-engine/src/types.ts            |   7 +-
 2 files changed, 45 insertions(+), 80 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 77ee189a5d92c3..bc4ecd7379d18e 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -1,31 +1,30 @@
 /**
  * Internal dependencies
  */
+import { camelCase } from 'lodash';
 import type {
-	BorderIndividualStyles,
 	BorderIndividualProperty,
-	GeneratedCSSRule,
 	Style,
 	StyleDefinition,
 	StyleOptions,
 } from '../../types';
-import { generateRule, generateBoxRules, upperFirst } from '../utils';
+import { generateRule, generateBoxRules } from '../utils';
 
-const color = {
+const color: StyleDefinition = {
 	name: 'color',
-	generate: (
-		style: Style,
-		options: StyleOptions,
-		path: string[] = [ 'border', 'color' ],
-		ruleKey: string = 'borderColor'
-	): GeneratedCSSRule[] => {
-		return generateRule( style, options, path, ruleKey );
+	generate: ( style, options ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'border', 'color' ],
+			'borderColor'
+		);
 	},
 };
 
-const radius = {
+const radius: StyleDefinition = {
 	name: 'radius',
-	generate: ( style: Style, options: StyleOptions ): GeneratedCSSRule[] => {
+	generate: ( style, options ) => {
 		return generateBoxRules(
 			style,
 			options,
@@ -39,36 +38,30 @@ const radius = {
 	},
 };
 
-const borderStyle = {
+const borderStyle: StyleDefinition = {
 	name: 'style',
-	generate: (
-		style: Style,
-		options: StyleOptions,
-		path: string[] = [ 'border', 'style' ],
-		ruleKey: string = 'borderStyle'
-	): GeneratedCSSRule[] => {
-		return generateRule( style, options, path, ruleKey );
+	generate: ( style, options ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'border', 'style' ],
+			'borderStyle'
+		);
 	},
 };
 
-const width = {
+const width: StyleDefinition = {
 	name: 'width',
-	generate: (
-		style: Style,
-		options: StyleOptions,
-		path: string[] = [ 'border', 'width' ],
-		ruleKey: string = 'borderWidth'
-	): GeneratedCSSRule[] => {
-		return generateRule( style, options, path, ruleKey );
+	generate: ( style, options ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'border', 'width' ],
+			'borderWidth'
+		);
 	},
 };
 
-const borderDefinitionsWithIndividualStyles: StyleDefinition[] = [
-	color,
-	borderStyle,
-	width,
-];
-
 /**
  * Returns a curried generator function with the individual border property ('top' | 'right' | 'bottom' | 'left') baked in.
  *
@@ -79,64 +72,41 @@ const borderDefinitionsWithIndividualStyles: StyleDefinition[] = [
 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;
-			},
-			[]
-		);
+		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
+			const path = [ 'border', individualProperty, key ];
+			return generateRule(
+				style,
+				options,
+				path,
+				camelCase( path.join( ' ' ) )
+			);
+		} );
 	};
 
-const borderTop = {
+const borderTop: StyleDefinition = {
 	name: 'borderTop',
 	generate: createBorderGenerateFunction( 'top' ),
 };
 
-const borderRight = {
+const borderRight: StyleDefinition = {
 	name: 'borderRight',
 	generate: createBorderGenerateFunction( 'right' ),
 };
 
-const borderBottom = {
+const borderBottom: StyleDefinition = {
 	name: 'borderBottom',
 	generate: createBorderGenerateFunction( 'bottom' ),
 };
 
-const borderLeft = {
+const borderLeft: StyleDefinition = {
 	name: 'borderLeft',
 	generate: createBorderGenerateFunction( 'left' ),
 };
 
 export default [
-	...borderDefinitionsWithIndividualStyles,
+	color,
+	borderStyle,
+	width,
 	radius,
 	borderTop,
 	borderRight,
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index a16430745f99ac..083b9e91ebeddf 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -86,10 +86,5 @@ export type GeneratedCSSRule = {
 
 export interface StyleDefinition {
 	name: string;
-	generate?: (
-		style: Style,
-		options: StyleOptions | {},
-		path?: string[],
-		ruleKey?: string
-	) => GeneratedCSSRule[];
+	generate?: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
 }

From d243abb5e02e7aa96a030ccc3b7cfa6e1316eab0 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:00:51 -0700
Subject: [PATCH 02/17] Add missing return type to generateRule

---
 packages/style-engine/src/styles/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 64a761ae5d359f..5a0fb32331d27a 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -34,7 +34,7 @@ export function generateRule(
 	options: StyleOptions,
 	path: string[],
 	ruleKey: string
-) {
+): GeneratedCSSRule[] {
 	const styleValue: string | undefined = get( style, path );
 
 	return styleValue

From ba5035569fdf497e8403d07f3687e7db37ba4573 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:07:22 -0700
Subject: [PATCH 03/17] Further refactor border styles

---
 .../style-engine/src/styles/border/index.ts   | 64 ++++++-------------
 1 file changed, 19 insertions(+), 45 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index bc4ecd7379d18e..e185e8676c0179 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -10,16 +10,25 @@ import type {
 } from '../../types';
 import { generateRule, generateBoxRules } from '../utils';
 
+function makeGenerateRule( path: string[] ) {
+	return ( style: Style, options: StyleOptions ) =>
+		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
+}
+
+function createBorderGenerateFunction(
+	individualProperty: BorderIndividualProperty
+) {
+	return ( style: Style, options: StyleOptions ) => {
+		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
+			const path = [ 'border', individualProperty, key ];
+			return makeGenerateRule( path )( style, options );
+		} );
+	};
+}
+
 const color: StyleDefinition = {
 	name: 'color',
-	generate: ( style, options ) => {
-		return generateRule(
-			style,
-			options,
-			[ 'border', 'color' ],
-			'borderColor'
-		);
-	},
+	generate: makeGenerateRule( [ 'border', 'color' ] ),
 };
 
 const radius: StyleDefinition = {
@@ -40,49 +49,14 @@ const radius: StyleDefinition = {
 
 const borderStyle: StyleDefinition = {
 	name: 'style',
-	generate: ( style, options ) => {
-		return generateRule(
-			style,
-			options,
-			[ 'border', 'style' ],
-			'borderStyle'
-		);
-	},
+	generate: makeGenerateRule( [ 'border', 'style' ] ),
 };
 
 const width: StyleDefinition = {
 	name: 'width',
-	generate: ( style, options ) => {
-		return generateRule(
-			style,
-			options,
-			[ 'border', 'width' ],
-			'borderWidth'
-		);
-	},
+	generate: makeGenerateRule( [ 'border', '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 ) => {
-		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
-			const path = [ 'border', individualProperty, key ];
-			return generateRule(
-				style,
-				options,
-				path,
-				camelCase( path.join( ' ' ) )
-			);
-		} );
-	};
-
 const borderTop: StyleDefinition = {
 	name: 'borderTop',
 	generate: createBorderGenerateFunction( 'top' ),

From 52c02c096dc396cb39d20c125ae316a100d75ebf Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:21:02 -0700
Subject: [PATCH 04/17] Refactor to use exported GenerateFunction type

---
 .../style-engine/src/styles/border/index.ts     | 17 ++++++-----------
 packages/style-engine/src/types.ts              |  6 +++++-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index e185e8676c0179..70a01bbc4760fd 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -2,23 +2,18 @@
  * Internal dependencies
  */
 import { camelCase } from 'lodash';
-import type {
-	BorderIndividualProperty,
-	Style,
-	StyleDefinition,
-	StyleOptions,
-} from '../../types';
+import type { BoxEdges, GenerateFunction, StyleDefinition } from '../../types';
 import { generateRule, generateBoxRules } from '../utils';
 
-function makeGenerateRule( path: string[] ) {
-	return ( style: Style, options: StyleOptions ) =>
+function makeGenerateRule( path: string[] ): GenerateFunction {
+	return ( style, options ) =>
 		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
 }
 
 function createBorderGenerateFunction(
-	individualProperty: BorderIndividualProperty
-) {
-	return ( style: Style, options: StyleOptions ) => {
+	individualProperty: BoxEdges
+): GenerateFunction {
+	return ( style, options ) => {
 		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
 			const path = [ 'border', individualProperty, key ];
 			return makeGenerateRule( path )( style, options );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 083b9e91ebeddf..657df9addaa316 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -84,7 +84,11 @@ export type GeneratedCSSRule = {
 	key: string;
 };
 
+export interface GenerateFunction {
+	( style: Style, options: StyleOptions ): GeneratedCSSRule[];
+}
+
 export interface StyleDefinition {
 	name: string;
-	generate?: ( style: Style, options: StyleOptions ) => GeneratedCSSRule[];
+	generate?: GenerateFunction;
 }

From a08f5878d9c517c6bf4af36278038ce80efcab17 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:22:19 -0700
Subject: [PATCH 05/17] Rename individualProperty to edge

---
 packages/style-engine/src/styles/border/index.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 70a01bbc4760fd..00eb52531dae55 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -10,12 +10,10 @@ function makeGenerateRule( path: string[] ): GenerateFunction {
 		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
 }
 
-function createBorderGenerateFunction(
-	individualProperty: BoxEdges
-): GenerateFunction {
+function createBorderGenerateFunction( edge: BoxEdges ): GenerateFunction {
 	return ( style, options ) => {
 		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
-			const path = [ 'border', individualProperty, key ];
+			const path = [ 'border', edge, key ];
 			return makeGenerateRule( path )( style, options );
 		} );
 	};

From 3cb3f01cbfed88c75d27a36377793ce96df75ce9 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:23:21 -0700
Subject: [PATCH 06/17] Rename BorderIndividualProperty to BoxEdges

---
 packages/style-engine/src/types.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 657df9addaa316..e151d82b38aad8 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -11,12 +11,13 @@ export type Box< T extends BoxVariants = undefined > = {
 	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
 };
 
-export type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
+export type BoxEdges = '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 type BorderIndividualStyles< T extends BoxEdges > = {
+	color?: CSSProperties[ `border${ Capitalize< T > }Color` ];
+	style?: CSSProperties[ `border${ Capitalize< T > }Style` ];
+	width?: CSSProperties[ `border${ Capitalize< T > }Width` ];
 };
 
 export interface Style {

From 51212d27f5467bed849736275ae4c23a757a8652 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:27:02 -0700
Subject: [PATCH 07/17] Use singular nouns for tagged unions

---
 packages/style-engine/src/styles/border/index.ts | 4 ++--
 packages/style-engine/src/types.ts               | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 00eb52531dae55..0720a476b0e547 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { camelCase } from 'lodash';
-import type { BoxEdges, GenerateFunction, StyleDefinition } from '../../types';
+import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
 import { generateRule, generateBoxRules } from '../utils';
 
 function makeGenerateRule( path: string[] ): GenerateFunction {
@@ -10,7 +10,7 @@ function makeGenerateRule( path: string[] ): GenerateFunction {
 		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
 }
 
-function createBorderGenerateFunction( edge: BoxEdges ): GenerateFunction {
+function createBorderGenerateFunction( edge: BoxEdge ): GenerateFunction {
 	return ( style, options ) => {
 		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
 			const path = [ 'border', edge, key ];
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index e151d82b38aad8..7c7f0bcc1e8562 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -11,10 +11,10 @@ export type Box< T extends BoxVariants = undefined > = {
 	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
 };
 
-export type BoxEdges = 'top' | 'right' | 'bottom' | 'left';
+export type BoxEdge = '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 BoxEdges > = {
+export type BorderIndividualStyles< T extends BoxEdge > = {
 	color?: CSSProperties[ `border${ Capitalize< T > }Color` ];
 	style?: CSSProperties[ `border${ Capitalize< T > }Style` ];
 	width?: CSSProperties[ `border${ Capitalize< T > }Width` ];

From 983a349f60316c64275401f5bfaf02649f4bbcf5 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:33:11 -0700
Subject: [PATCH 08/17] Rename functions to be more consistent

---
 .../style-engine/src/styles/border/index.ts   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 0720a476b0e547..98f98bdcba1d1f 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -5,23 +5,23 @@ import { camelCase } from 'lodash';
 import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
 import { generateRule, generateBoxRules } from '../utils';
 
-function makeGenerateRule( path: string[] ): GenerateFunction {
+function createBorderGenerateRule( path: string[] ): GenerateFunction {
 	return ( style, options ) =>
 		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
 }
 
-function createBorderGenerateFunction( edge: BoxEdge ): GenerateFunction {
+function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
 	return ( style, options ) => {
 		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
 			const path = [ 'border', edge, key ];
-			return makeGenerateRule( path )( style, options );
+			return createBorderGenerateRule( path )( style, options );
 		} );
 	};
 }
 
 const color: StyleDefinition = {
 	name: 'color',
-	generate: makeGenerateRule( [ 'border', 'color' ] ),
+	generate: createBorderGenerateRule( [ 'border', 'color' ] ),
 };
 
 const radius: StyleDefinition = {
@@ -42,32 +42,32 @@ const radius: StyleDefinition = {
 
 const borderStyle: StyleDefinition = {
 	name: 'style',
-	generate: makeGenerateRule( [ 'border', 'style' ] ),
+	generate: createBorderGenerateRule( [ 'border', 'style' ] ),
 };
 
 const width: StyleDefinition = {
 	name: 'width',
-	generate: makeGenerateRule( [ 'border', 'width' ] ),
+	generate: createBorderGenerateRule( [ 'border', 'width' ] ),
 };
 
 const borderTop: StyleDefinition = {
 	name: 'borderTop',
-	generate: createBorderGenerateFunction( 'top' ),
+	generate: createBorderEdgeGenerateFunction( 'top' ),
 };
 
 const borderRight: StyleDefinition = {
 	name: 'borderRight',
-	generate: createBorderGenerateFunction( 'right' ),
+	generate: createBorderEdgeGenerateFunction( 'right' ),
 };
 
 const borderBottom: StyleDefinition = {
 	name: 'borderBottom',
-	generate: createBorderGenerateFunction( 'bottom' ),
+	generate: createBorderEdgeGenerateFunction( 'bottom' ),
 };
 
 const borderLeft: StyleDefinition = {
 	name: 'borderLeft',
-	generate: createBorderGenerateFunction( 'left' ),
+	generate: createBorderEdgeGenerateFunction( 'left' ),
 };
 
 export default [

From d2e06d157b1b49fb1ce083a1a5bd1d7e4c783bc0 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 21:40:09 -0700
Subject: [PATCH 09/17] Add lodash import under external

---
 packages/style-engine/src/styles/border/index.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 98f98bdcba1d1f..1d039f66f07152 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -1,7 +1,11 @@
 /**
- * Internal dependencies
+ * External dependencies
  */
 import { camelCase } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
 import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
 import { generateRule, generateBoxRules } from '../utils';
 

From 4339957e220860cdce1d8d3cfa758d43cb356ff1 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 22:03:49 -0700
Subject: [PATCH 10/17] Refactor to prefer interfaces

---
 packages/style-engine/src/types.ts | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 7c7f0bcc1e8562..7a90908e156810 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -4,21 +4,21 @@
 import type { CSSProperties } from 'react';
 
 type BoxVariants = 'margin' | 'padding' | undefined;
-export type Box< T extends BoxVariants = undefined > = {
+export interface Box< T extends BoxVariants = undefined > {
 	top?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];
 	right?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];
 	bottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];
 	left?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];
-};
+}
 
 export type BoxEdge = '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 BoxEdge > = {
+export interface BorderIndividualStyles< T extends BoxEdge > {
 	color?: CSSProperties[ `border${ Capitalize< T > }Color` ];
 	style?: CSSProperties[ `border${ Capitalize< T > }Style` ];
 	width?: CSSProperties[ `border${ Capitalize< T > }Width` ];
-};
+}
 
 export interface Style {
 	border?: {
@@ -66,16 +66,19 @@ export interface Style {
 	};
 }
 
-export type CssRulesKeys = { default: string; individual: string };
+export interface CssRulesKeys {
+	default: string;
+	individual: string;
+}
 
-export type StyleOptions = {
+export interface StyleOptions {
 	/**
 	 * CSS selector for the generated style.
 	 */
 	selector?: string;
-};
+}
 
-export type GeneratedCSSRule = {
+export interface GeneratedCSSRule {
 	selector?: string;
 	value: string;
 	/**
@@ -83,7 +86,7 @@ export type GeneratedCSSRule = {
 	 * E.g. `paddingTop` instead of `padding-top`.
 	 */
 	key: string;
-};
+}
 
 export interface GenerateFunction {
 	( style: Style, options: StyleOptions ): GeneratedCSSRule[];

From 9ced76827c0d78510ea535bf020208dfedd0d3e0 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 22:04:33 -0700
Subject: [PATCH 11/17] Refactor BoxVariants

---
 packages/style-engine/src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 7a90908e156810..a700816f218ce8 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -3,8 +3,8 @@
  */
 import type { CSSProperties } from 'react';
 
-type BoxVariants = 'margin' | 'padding' | undefined;
-export interface Box< T extends BoxVariants = undefined > {
+type BoxVariant = 'margin' | 'padding';
+export interface Box< T extends BoxVariant | undefined = undefined > {
 	top?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];
 	right?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];
 	bottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];

From 52532ad5678df3e55367bf6ccedbc09ae4b67a4a Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 22:13:24 -0700
Subject: [PATCH 12/17] Use camelCase from change-case instead

---
 package-lock.json                                | 1 +
 packages/style-engine/package.json               | 1 +
 packages/style-engine/src/styles/border/index.ts | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index e35bd0491294fb..afb1c313397bed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18197,6 +18197,7 @@
 			"version": "file:packages/style-engine",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
+				"change-case": "^4.1.2",
 				"lodash": "^4.17.21"
 			}
 		},
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 8d91cfc45183ed..4fc60172a269c0 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -29,6 +29,7 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"change-case": "^4.1.2",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 1d039f66f07152..12c6c3e08750e3 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { camelCase } from 'lodash';
+import { camelCase } from 'change-case';
 
 /**
  * Internal dependencies

From 8b420f448d8c7bbfa93f0f45bdab15ecd10bc05f Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Wed, 24 Aug 2022 22:21:06 -0700
Subject: [PATCH 13/17] Rename createBorderGenerateRule ->
 createBorderGenerateFunction for consistency

---
 packages/style-engine/src/styles/border/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 12c6c3e08750e3..50dc85e8e32d24 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -9,7 +9,7 @@ import { camelCase } from 'change-case';
 import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
 import { generateRule, generateBoxRules } from '../utils';
 
-function createBorderGenerateRule( path: string[] ): GenerateFunction {
+function createBorderGenerateFunction( path: string[] ): GenerateFunction {
 	return ( style, options ) =>
 		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
 }
@@ -18,14 +18,14 @@ function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
 	return ( style, options ) => {
 		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {
 			const path = [ 'border', edge, key ];
-			return createBorderGenerateRule( path )( style, options );
+			return createBorderGenerateFunction( path )( style, options );
 		} );
 	};
 }
 
 const color: StyleDefinition = {
 	name: 'color',
-	generate: createBorderGenerateRule( [ 'border', 'color' ] ),
+	generate: createBorderGenerateFunction( [ 'border', 'color' ] ),
 };
 
 const radius: StyleDefinition = {
@@ -46,12 +46,12 @@ const radius: StyleDefinition = {
 
 const borderStyle: StyleDefinition = {
 	name: 'style',
-	generate: createBorderGenerateRule( [ 'border', 'style' ] ),
+	generate: createBorderGenerateFunction( [ 'border', 'style' ] ),
 };
 
 const width: StyleDefinition = {
 	name: 'width',
-	generate: createBorderGenerateRule( [ 'border', 'width' ] ),
+	generate: createBorderGenerateFunction( [ 'border', 'width' ] ),
 };
 
 const borderTop: StyleDefinition = {

From 990f0a1c53dcaf5d666f2dd44da34c895818547a Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 25 Aug 2022 09:56:42 -0700
Subject: [PATCH 14/17] Replace change-case with camelCaseJoin util function

---
 package-lock.json                                |  1 -
 packages/style-engine/package.json               |  1 -
 packages/style-engine/src/styles/border/index.ts |  9 ++-------
 packages/style-engine/src/styles/utils.ts        | 11 +++++++++++
 packages/style-engine/src/test/utils.js          |  7 ++++++-
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index afb1c313397bed..e35bd0491294fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18197,7 +18197,6 @@
 			"version": "file:packages/style-engine",
 			"requires": {
 				"@babel/runtime": "^7.16.0",
-				"change-case": "^4.1.2",
 				"lodash": "^4.17.21"
 			}
 		},
diff --git a/packages/style-engine/package.json b/packages/style-engine/package.json
index 4fc60172a269c0..8d91cfc45183ed 100644
--- a/packages/style-engine/package.json
+++ b/packages/style-engine/package.json
@@ -29,7 +29,6 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"change-case": "^4.1.2",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 50dc85e8e32d24..92956cf78b0f01 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -1,17 +1,12 @@
-/**
- * External dependencies
- */
-import { camelCase } from 'change-case';
-
 /**
  * Internal dependencies
  */
 import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
-import { generateRule, generateBoxRules } from '../utils';
+import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
 
 function createBorderGenerateFunction( path: string[] ): GenerateFunction {
 	return ( style, options ) =>
-		generateRule( style, options, path, camelCase( path.join( ' ' ) ) );
+		generateRule( style, options, path, camelCaseJoin( path ) );
 }
 
 function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 5a0fb32331d27a..f48c5f6c0055cc 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -135,3 +135,14 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 export function upperFirst( [ firstLetter, ...rest ]: string ) {
 	return firstLetter.toUpperCase() + rest.join( '' );
 }
+
+/**
+ * Converts an array of strings into a camelCase string.
+ *
+ * @param strings The strings to join into a camelCase string.
+ *
+ * @return camelCase string.
+ */
+export function camelCaseJoin( [ firstItem, ...rest ]: string[] ): string {
+	return firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );
+}
diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
index 7fccd013594420..62dec772979060 100644
--- a/packages/style-engine/src/test/utils.js
+++ b/packages/style-engine/src/test/utils.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { upperFirst } from '../styles/utils';
+import { camelCaseJoin, upperFirst } from '../styles/utils';
 
 describe( 'utils', () => {
 	describe( 'upperFirst()', () => {
@@ -9,4 +9,9 @@ describe( 'utils', () => {
 			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
 		} );
 	} );
+	describe( 'camelCaseJoin()', () => {
+		it( 'should return a camelCase string', () => {
+			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
+		} );
+	} );
 } );

From efdf65160e3cfb86fa5ee215a720d98697dab12a Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 25 Aug 2022 10:09:15 -0700
Subject: [PATCH 15/17] Clean up some types and docs for upperFirst

---
 packages/style-engine/src/styles/utils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index f48c5f6c0055cc..ef78178904975b 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -128,11 +128,11 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 /**
  * Capitalizes the first letter in a string.
  *
- * @param {string} str The string whose first letter the function will capitalize.
+ * @param string The string whose first letter the function will capitalize.
  *
- * @return string A CSS var value.
+ * @return String with the first letter capitalized.
  */
-export function upperFirst( [ firstLetter, ...rest ]: string ) {
+export function upperFirst( [ firstLetter, ...rest ]: string ): string {
 	return firstLetter.toUpperCase() + rest.join( '' );
 }
 

From adb40ef3501fd10811487a6da3f92ff3f102fc10 Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 25 Aug 2022 10:55:22 -0700
Subject: [PATCH 16/17] Add comments explaining the new internal border
 functions

---
 packages/style-engine/src/styles/border/index.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 92956cf78b0f01..0198d3711e26e4 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -4,11 +4,25 @@
 import type { BoxEdge, GenerateFunction, StyleDefinition } from '../../types';
 import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
 
+/**
+ * Creates a function for generating CSS rules when the style path is the same as the camelCase CSS property used in React.
+ *
+ * @param path An array of strings representing the path to the style value in the style object.
+ *
+ * @returns A function that generates CSS rules.
+ */
 function createBorderGenerateFunction( path: string[] ): GenerateFunction {
 	return ( style, options ) =>
 		generateRule( style, options, path, camelCaseJoin( path ) );
 }
 
+/**
+ * Creates a function for generating border-{top,bottom,left,right}-{color,style,width} CSS rules.
+ *
+ * @param edge The edge to create CSS rules for.
+ *
+ * @returns A function that generates CSS rules.
+ */
 function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
 	return ( style, options ) => {
 		return [ 'color', 'style', 'width' ].flatMap( ( key ) => {

From 3ccc54ca3c8fcdc113e61221904acd7142696e8d Mon Sep 17 00:00:00 2001
From: Alex Lende <alex@lende.xyz>
Date: Thu, 25 Aug 2022 11:28:48 -0700
Subject: [PATCH 17/17] Fix eslint errors

---
 packages/style-engine/src/styles/border/index.ts | 4 ++--
 packages/style-engine/src/styles/utils.ts        | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
index 0198d3711e26e4..465e78a09aa5fc 100644
--- a/packages/style-engine/src/styles/border/index.ts
+++ b/packages/style-engine/src/styles/border/index.ts
@@ -9,7 +9,7 @@ import { generateRule, generateBoxRules, camelCaseJoin } from '../utils';
  *
  * @param path An array of strings representing the path to the style value in the style object.
  *
- * @returns A function that generates CSS rules.
+ * @return A function that generates CSS rules.
  */
 function createBorderGenerateFunction( path: string[] ): GenerateFunction {
 	return ( style, options ) =>
@@ -21,7 +21,7 @@ function createBorderGenerateFunction( path: string[] ): GenerateFunction {
  *
  * @param edge The edge to create CSS rules for.
  *
- * @returns A function that generates CSS rules.
+ * @return A function that generates CSS rules.
  */
 function createBorderEdgeGenerateFunction( edge: BoxEdge ): GenerateFunction {
 	return ( style, options ) => {
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index ef78178904975b..f0c3112d230b34 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -132,7 +132,8 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
  *
  * @return String with the first letter capitalized.
  */
-export function upperFirst( [ firstLetter, ...rest ]: string ): string {
+export function upperFirst( string: string ): string {
+	const [ firstLetter, ...rest ] = string;
 	return firstLetter.toUpperCase() + rest.join( '' );
 }
 
@@ -143,6 +144,7 @@ export function upperFirst( [ firstLetter, ...rest ]: string ): string {
  *
  * @return camelCase string.
  */
-export function camelCaseJoin( [ firstItem, ...rest ]: string[] ): string {
+export function camelCaseJoin( strings: string[] ): string {
+	const [ firstItem, ...rest ] = strings;
 	return firstItem.toLowerCase() + rest.map( upperFirst ).join( '' );
 }