Remove compileStyleValue

Use style engine getCSSVarFromStyleValue Update style engine tests to cover bugfix in #43116 Moves style engine utils tests into correct directory
WordPress · Aug 14, 2024 · cfeb080 · cfeb080
1 parent 46f9fe0
commit cfeb080
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 39 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, getCSSVarFromStyleValue } 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 }: ${ getCSSVarFromStyleValue(
 							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
@@ -369,7 +368,7 @@ export function getStylesDeclarations(
 					? key
 					: kebabCase( key );
 				declarations.push(
-					`${ cssProperty }: ${ compileStyleValue(
+					`${ cssProperty }: ${ getCSSVarFromStyleValue(
 						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 { getCSSVarFromStyleValue } 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 = getCSSVarFromStyleValue(
 			getValueFromObjectPath( tree, refPath )
 		);
 

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.
 
+### getCSSVarFromStyleValue
+
+Returns a WordPress CSS custom var value from incoming style preset value. The preset value follows the pattern `var:description|context|slug`.
+
+Example:
+
+`getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
+
+_Parameters_
+
+-   _styleValue_ `string`: A raw style value.
+
+_Returns_
+
+-   `string`: string 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 { getCSSVarFromStyleValue } from './styles/utils';
diff --git a/packages/style-engine/src/test/utils.js → ...ges/style-engine/src/styles/test/utils.js b/packages/style-engine/src/test/utils.js → ...ges/style-engine/src/styles/test/utils.js
@@ -1,11 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	camelCaseJoin,
-	getCSSVarFromStyleValue,
-	upperFirst,
-} from '../styles/utils';
+import { camelCaseJoin, getCSSVarFromStyleValue, upperFirst } from '../utils';
 
 describe( 'utils', () => {
 	describe( 'upperFirst()', () => {
@@ -58,5 +54,14 @@ describe( 'utils', () => {
 				)
 			).toEqual( 'var(--wp--preset--background--dark-secrets-100)' );
 		} );
+		it( 'should handle null gracefully', () => {
+			expect( getCSSVarFromStyleValue( null ) ).toEqual( null );
+		} );
+		it( 'should handle boolean gracefully', () => {
+			expect( getCSSVarFromStyleValue( false ) ).toEqual( false );
+		} );
+		it( 'should handle integers gracefully', () => {
+			expect( getCSSVarFromStyleValue( 1000 ) ).toEqual( 1000 );
+		} );
 	} );
 } );
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
@@ -127,7 +127,12 @@ 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:
+ *
+ * `getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
  *
  * @param styleValue A raw style value.
  *