Style engine: export util to compile CSS custom var from preset string (

#64490) Remove `compileStyleValue` in favour of pre-existing `getCSSValueFromRawStyle()` from the style engine package. Update style engine tests to cover bugfix in #43116 Moves style engine utils tests into correct directory Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
WordPress · Aug 15, 2024 · add79ad · add79ad
1 parent 454129b
commit add79ad
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 101 deletions.
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
-import { getCSSRules } from '@wordpress/style-engine';
+import { getCSSRules, getCSSValueFromRawStyle } from '@wordpress/style-engine';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
@@ -24,7 +24,6 @@ import {
 	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
-	compileStyleValue,
 	getResolvedValue,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
@@ -357,7 +356,7 @@ export function getStylesDeclarations(
 						? name
 						: kebabCase( name );
 					declarations.push(
-						`${ cssProperty }: ${ compileStyleValue(
+						`${ cssProperty }: ${ getCSSValueFromRawStyle(
 							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
@@ -369,7 +368,7 @@ export function getStylesDeclarations(
 					? key
 					: kebabCase( key );
 				declarations.push(
-					`${ cssProperty }: ${ compileStyleValue(
+					`${ cssProperty }: ${ getCSSValueFromRawStyle(
 						getValueFromObjectPath( blockStyles, pathToValue )
 					) }`
 				);

diff --git a/packages/block-editor/src/components/global-styles/utils.js b/packages/block-editor/src/components/global-styles/utils.js
@@ -7,6 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
+import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -526,34 +527,6 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
 	return result.join( ',' );
 }
 
-/**
- * Converts style preset values `var:` to CSS custom var values.
- * TODO: Export and use the style engine util: getCSSVarFromStyleValue().
- *
- * Example:
- *
- * compileStyleValue( 'var:preset|color|primary' ) // returns 'var(--wp--color-primary)'
- *
- * @param {string} uncompiledValue A block style value.
- * @return {string} The compiled, or original value.
- */
-export function compileStyleValue( uncompiledValue ) {
-	const VARIABLE_REFERENCE_PREFIX = 'var:';
-	if (
-		'string' === typeof uncompiledValue &&
-		uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX )
-	) {
-		const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
-		const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-		const variable = uncompiledValue
-			.slice( VARIABLE_REFERENCE_PREFIX.length )
-			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
-	}
-	return uncompiledValue;
-}
-
 /**
  * Looks up a theme file URI based on a relative path.
  *
@@ -591,7 +564,7 @@ export function getResolvedRefValue( ruleValue, tree ) {
 
 	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 		const refPath = ruleValue.ref.split( '.' );
-		const resolvedRuleValue = compileStyleValue(
+		const resolvedRuleValue = getCSSValueFromRawStyle(
 			getValueFromObjectPath( tree, refPath )
 		);
 

diff --git a/packages/style-engine/CHANGELOG.md b/packages/style-engine/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Style engine: export util to compile CSS custom var from preset string. ([#64490](https://github.com/WordPress/gutenberg/pull/64490))
+
 ## 2.5.0 (2024-08-07)
 
 ## 2.4.0 (2024-07-24)

diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
@@ -258,6 +258,22 @@ _Changelog_
 
 `6.1.0` Introduced in WordPress core.
 
+### getCSSValueFromRawStyle
+
+Returns a WordPress CSS custom var value from incoming style preset value. The preset value follows the pattern `var:description|context|slug`.
+
+Example:
+
+`getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
+
+_Parameters_
+
+-   _styleValue_ `string | any`: A raw style value.
+
+_Returns_
+
+-   `string | unknown`: A CSS var value.
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Glossary

diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
@@ -91,3 +91,6 @@ export function getCSSRules(
 
 	return rules;
 }
+
+// Export style utils.
+export { getCSSValueFromRawStyle } from './styles/utils';
diff --git a/packages/style-engine/src/styles/test/utils.js b/packages/style-engine/src/styles/test/utils.js
@@ -0,0 +1,54 @@
+/**
+ * Internal dependencies
+ */
+import { camelCaseJoin, getCSSValueFromRawStyle, upperFirst } from '../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( 'getCSSValueFromRawStyle()', () => {
+		it.each( [
+			[ 'min(40%, 400px)', 'min(40%, 400px)' ],
+			[
+				'var(--wp--preset--color--yellow-bun)',
+				'var:preset|color|yellow-bun',
+			],
+			[ 'var(--wp--preset--font-size--h-1)', 'var:preset|font-size|h1' ],
+			[
+				'var(--wp--preset--font-size--1-px)',
+				'var:preset|font-size|1px',
+			],
+			[
+				'var(--wp--preset--color--orange-11-orange)',
+				'var:preset|color|orange11orange',
+			],
+			[
+				'var(--wp--preset--color--heavenly-blue)',
+				'var:preset|color|heavenlyBlue',
+			],
+			[
+				'var(--wp--preset--background--dark-secrets-100)',
+				'var:preset|background|dark_Secrets_100',
+			],
+			[ null, null ],
+			[ false, false ],
+			[ 1000, 1000 ],
+			[ undefined, undefined ],
+		] )(
+			'should return %s using an incoming value of %s',
+			( expected, value ) => {
+				expect( getCSSValueFromRawStyle( value ) ).toEqual( expected );
+			}
+		);
+	} );
+} );
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
@@ -61,7 +61,7 @@ export function generateRule(
 				{
 					selector: options?.selector,
 					key: ruleKey,
-					value: getCSSVarFromStyleValue( styleValue ),
+					value: getCSSValueFromRawStyle( styleValue ),
 				},
 		  ]
 		: [];
@@ -103,7 +103,7 @@ export function generateBoxRules(
 	} else {
 		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
-				const value: string | undefined = getCSSVarFromStyleValue(
+				const value = getCSSValueFromRawStyle(
 					getStyleValueByPath( boxStyle, [ side ] )
 				);
 				if ( value ) {
@@ -127,13 +127,21 @@ export function generateBoxRules(
 }
 
 /**
- * Returns a CSS var value from incoming style value following the pattern `var:description|context|slug`.
+ * Returns a WordPress CSS custom var value from incoming style preset value.
+ * The preset value follows the pattern `var:description|context|slug`.
+ *
+ * Example:
+ *
+ * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
  *
  * @param styleValue A raw style value.
  *
- * @return string A CSS var value.
+ * @return A CSS var value.
  */
-export function getCSSVarFromStyleValue( styleValue: string ): string {
+
+export function getCSSValueFromRawStyle(
+	styleValue: string | any
+): string | unknown {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )

diff --git a/packages/style-engine/src/test/utils.js b/packages/style-engine/src/test/utils.js
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
@@ -94,7 +94,7 @@ export interface StyleOptions {
 
 export interface GeneratedCSSRule {
 	selector?: string;
-	value: string;
+	value: string | unknown;
 	/**
 	 * The CSS key in JS style attribute format, compatible with React.
 	 * E.g. `paddingTop` instead of `padding-top`.