Switch getCSSRules to use camelCase and generate to switch to kebabCase

WordPress · Jan 25, 2022 · a756e44 · a756e44
1 parent 26c9767
commit a756e44
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 5 deletions.
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { groupBy } from 'lodash';
+import { groupBy, kebabCase } from 'lodash';
 
 /**
  * Internal dependencies
@@ -26,7 +26,7 @@ export function generate( style: Style, selector: string ): string {
 				`${ subSelector } { ${ groupedRules[ subSelector ]
 					.map(
 						( rule: GeneratedCSSRule ) =>
-							`${ rule.key }: ${ rule.value };`
+							`${ kebabCase( rule.key ) }: ${ rule.value };`
 					)
 					.join( ' ' ) } }`
 			);

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 } from 'lodash';
+import { get, upperFirst } from 'lodash';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ export function generateBoxRules(
 				if ( value ) {
 					acc.push( {
 						selector,
-						key: `${ ruleKey }-${ side }`,
+						key: `${ ruleKey }${ upperFirst( side ) }`,
 						value,
 					} );
 				}

diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { generate } from '../index';
+import { getCSSRules, generate } from '../index';
 
 describe( 'generate', () => {
 	it( 'should generate empty style', () => {
@@ -30,3 +30,46 @@ describe( 'generate', () => {
 		);
 	} );
 } );
+
+describe( 'getCSSRules', () => {
+	it( 'should return an empty rules array', () => {
+		expect( getCSSRules( {}, '.some-selector' ) ).toEqual( [] );
+	} );
+
+	it( 'should return a rules array with CSS keys formatted in camelCase', () => {
+		expect(
+			getCSSRules(
+				{
+					spacing: { padding: '10px' },
+				},
+				'.some-selector'
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'padding',
+				value: '10px',
+			},
+		] );
+
+		expect(
+			getCSSRules(
+				{
+					spacing: { padding: { top: '10px', bottom: '5px' } },
+				},
+				'.some-selector'
+			)
+		).toEqual( [
+			{
+				selector: '.some-selector',
+				key: 'paddingTop',
+				value: '10px',
+			},
+			{
+				selector: '.some-selector',
+				key: 'paddingBottom',
+				value: '5px',
+			},
+		] );
+	} );
+} );
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
@@ -25,6 +25,10 @@ export interface Style {
 export type GeneratedCSSRule = {
 	selector: string;
 	value: string;
+	/**
+	 * The CSS key in JS style attribute format, compatible with React.
+	 * E.g. `paddingTop` instead of `padding-top`.
+	 */
 	key: string;
 };