From cfeb08087f78cbfb5bffc243742f295b83834e87 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 14 Aug 2024 16:21:43 +1000 Subject: [PATCH] Remove compileStyleValue Use style engine getCSSVarFromStyleValue Update style engine tests to cover bugfix in https://github.com/WordPress/gutenberg/pull/43116 Moves style engine utils tests into correct directory --- .../global-styles/use-global-styles-output.js | 7 ++--- .../src/components/global-styles/utils.js | 31 ++----------------- packages/style-engine/README.md | 16 ++++++++++ packages/style-engine/src/index.ts | 3 ++ .../src/{ => styles}/test/utils.js | 15 ++++++--- packages/style-engine/src/styles/utils.ts | 7 ++++- 6 files changed, 40 insertions(+), 39 deletions(-) rename packages/style-engine/src/{ => styles}/test/utils.js (78%) 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 index c1449d6d8b298f..e1fbc88ae646a2 100644 --- 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 index 8de479e39382e5..bee6fab05c716c 100644 --- 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 index 44b78eed8a81a6..9cc6caf1c87b26 100644 --- 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. + ## Glossary diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts index fe5b9929877be7..1bb25a8b539e20 100644 --- 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 b/packages/style-engine/src/styles/test/utils.js similarity index 78% rename from packages/style-engine/src/test/utils.js rename to packages/style-engine/src/styles/test/utils.js index 9f1f84d2b45310..239852cdddebf5 100644 --- a/packages/style-engine/src/test/utils.js +++ b/packages/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 index 00e9dab8b5892b..546eb06da9702f 100644 --- 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. *