Added explainer comment for BorderIndividualStyles type

Removing lodash camelCase and upperFirst in favour of own implementation + test Removing unnecessary lodash get()
WordPress · Jun 21, 2022 · 93abab8 · 93abab8
1 parent 70a0652
commit 93abab8
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/packages/style-engine/src/styles/border/index.ts b/packages/style-engine/src/styles/border/index.ts
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { camelCase, get } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -14,7 +9,7 @@ import type {
 	StyleDefinition,
 	StyleOptions,
 } from '../../types';
-import { generateRule, generateBoxRules } from '../utils';
+import { generateRule, generateBoxRules, upperFirst } from '../utils';
 
 const color = {
 	name: 'color',
@@ -86,7 +81,7 @@ const createBorderGenerateFunction =
 	( style: Style, options: StyleOptions ) => {
 		const styleValue:
 			| BorderIndividualStyles< typeof individualProperty >
-			| undefined = get( style, [ 'border', individualProperty ] );
+			| undefined = style?.border?.[ individualProperty ];
 
 		if ( ! styleValue ) {
 			return [];
@@ -102,9 +97,9 @@ const createBorderGenerateFunction =
 					styleValue.hasOwnProperty( key ) &&
 					typeof borderDefinition.generate === 'function'
 				) {
-					const ruleKey = camelCase(
-						`border-${ individualProperty }-${ key }`
-					);
+					const ruleKey = `border${ upperFirst(
+						individualProperty
+					) }${ upperFirst( key ) }`;
 					acc.push(
 						...borderDefinition.generate(
 							style,

diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, upperFirst } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -57,7 +57,7 @@ export function generateRule(
  * @param ruleKeys             An array of CSS property keys and patterns.
  * @param individualProperties The "sides" or individual properties for which to generate rules.
  *
- * @return GeneratedCSSRule[] CSS rules.
+ * @return GeneratedCSSRule[]  CSS rules.
  */
 export function generateBoxRules(
 	style: Style,
@@ -110,7 +110,10 @@ export function generateBoxRules(
  * @return string A CSS var value.
  */
 export function getCSSVarFromStyleValue( styleValue: string ): string {
-	if ( styleValue.startsWith( VARIABLE_REFERENCE_PREFIX ) ) {
+	if (
+		typeof styleValue === 'string' &&
+		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
+	) {
 		const variable = styleValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -119,3 +122,14 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 	}
 	return styleValue;
 }
+
+/**
+ * Capitalizes the first letter in a string.
+ *
+ * @param {string} str The string whose first letter the function will capitalize.
+ *
+ * @return string A CSS var value.
+ */
+export function upperFirst( [ firstLetter, ...rest ]: string ) {
+	return firstLetter.toUpperCase() + rest.join( '' );
+}
diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { upperFirst } from '../styles/utils';
+
+describe( 'utils', () => {
+	describe( 'upperFirst()', () => {
+		it( 'should return an string with a capitalized first letter', () => {
+			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
+		} );
+	} );
+} );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
@@ -12,6 +12,7 @@ export type Box< T extends BoxVariants = undefined > = {
 };
 
 export type BorderIndividualProperty = 'top' | 'right' | 'bottom' | 'left';
+// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.
 export type BorderIndividualStyles< T extends BorderIndividualProperty > = {
 	color?: CSSProperties[ `border${ Capitalize< string & T > }Color` ];
 	style?: CSSProperties[ `border${ Capitalize< string & T > }Style` ];