Making sure to kebab case CSS variables generated from presets, so `h…

…1` will become `h-1` (#44406) Adding test coverage
WordPress · Sep 26, 2022 · 144a47b · 144a47b
1 parent a5ca42a
commit 144a47b
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 7 deletions.
diff --git a/packages/style-engine/phpunit/style-engine-test.php b/packages/style-engine/phpunit/style-engine-test.php
@@ -363,28 +363,28 @@ public function data_wp_style_engine_get_styles() {
 					'spacing' => array(
 						'margin'  => array(
 							'left'   => 'var:preset|spacing|10',
-							'right'  => 'var:preset|spacing|20',
+							'right'  => 'var:preset|spacing|3XL',
 							'top'    => '1rem',
 							'bottom' => '1rem',
 						),
 						'padding' => array(
 							'left'   => 'var:preset|spacing|30',
-							'right'  => 'var:preset|spacing|40',
+							'right'  => 'var:preset|spacing|3XL',
 							'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;',
+					'css'          => 'padding-left:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--3-xl);padding-top:14px;padding-bottom:14px;margin-left:var(--wp--preset--spacing--10);margin-right:var(--wp--preset--spacing--3-xl);margin-top:1rem;margin-bottom:1rem;',
 					'declarations' => array(
 						'padding-left'   => 'var(--wp--preset--spacing--30)',
-						'padding-right'  => 'var(--wp--preset--spacing--40)',
+						'padding-right'  => 'var(--wp--preset--spacing--3-xl)',
 						'padding-top'    => '14px',
 						'padding-bottom' => '14px',
 						'margin-left'    => 'var(--wp--preset--spacing--10)',
-						'margin-right'   => 'var(--wp--preset--spacing--20)',
+						'margin-right'   => 'var(--wp--preset--spacing--3-xl)',
 						'margin-top'     => '1rem',
 						'margin-bottom'  => '1rem',
 					),

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, kebabCase } from 'lodash';
 
 /**
  * Internal dependencies
@@ -119,6 +119,7 @@ export function getCSSVarFromStyleValue( styleValue: string ): string {
 		const variable = styleValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
+			.map( ( presetVariable ) => kebabCase( presetVariable ) )
 			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
 		return `var(--wp--${ variable })`;
 	}

diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
@@ -96,6 +96,19 @@ describe( 'generate', () => {
 		);
 	} );
 
+	it( 'should parse preset values and kebab-case the slug', () => {
+		expect(
+			compileCSS( {
+				color: {
+					text: 'var:preset|font-size|h1',
+				},
+				spacing: { margin: { top: 'var:preset|spacing|3XL' } },
+			} )
+		).toEqual(
+			'color: var(--wp--preset--font-size--h-1); margin-top: var(--wp--preset--spacing--3-xl);'
+		);
+	} );
+
 	it( 'should parse border rules', () => {
 		expect(
 			compileCSS( {

diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
@@ -1,12 +1,42 @@
 /**
  * Internal dependencies
  */
-import { upperFirst } from '../styles/utils';
+import {
+	camelCaseJoin,
+	getCSSVarFromStyleValue,
+	upperFirst,
+} from '../styles/utils';
 
 describe( 'utils', () => {
 	describe( 'upperFirst()', () => {
 		it( 'should return an string with a capitalized first letter', () => {
 			expect( upperFirst( 'toontown' ) ).toEqual( 'Toontown' );
 		} );
 	} );
+
+	describe( 'camelCaseJoin()', () => {
+		it( 'should return a camelCase string', () => {
+			expect( camelCaseJoin( [ 'toon', 'town' ] ) ).toEqual( 'toonTown' );
+		} );
+	} );
+
+	describe( 'getCSSVarFromStyleValue()', () => {
+		it( 'should return a compiled CSS var', () => {
+			expect(
+				getCSSVarFromStyleValue( 'var:preset|color|yellow-bun' )
+			).toEqual( 'var(--wp--preset--color--yellow-bun)' );
+		} );
+
+		it( 'should kebab case numbers', () => {
+			expect(
+				getCSSVarFromStyleValue( 'var:preset|font-size|h1' )
+			).toEqual( 'var(--wp--preset--font-size--h-1)' );
+		} );
+
+		it( 'should kebab case camel case', () => {
+			expect(
+				getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )
+			).toEqual( 'var(--wp--preset--color--heavenly-blue)' );
+		} );
+	} );
 } );