Style engine: export util to compile CSS custom var from preset strin…

…g (#64490)

Remove `compileStyleValue` in favour of pre-existing `getCSSValueFromRawStyle()` from the style engine package.
Update style engine tests to cover bugfix in WordPress/gutenberg#43116
Moves style engine utils tests into correct directory

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: kevin940726 <[email protected]>

Source: WordPress/gutenberg@add79ad

build/block-editor/index.js

@@ -16237,6 +16237,8 @@ function useSetting(path) {
   return value;
 }
 
+;// CONCATENATED MODULE: external ["wp","styleEngine"]
+const external_wp_styleEngine_namespaceObject = window["wp"]["styleEngine"];
 ;// CONCATENATED MODULE: ./packages/block-editor/build-module/components/font-sizes/fluid-utils.js
 /**
  * The fluid utilities must match the backend equivalent.
@@ -16978,6 +16980,7 @@ function findNearestStyleAndWeight(fontFamilyFaces, fontStyle, fontWeight) {
  */
 
 
+
 /**
  * Internal dependencies
  */
@@ -17380,28 +17383,6 @@ 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.
- */
-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.
  *
@@ -17433,7 +17414,7 @@ function getResolvedRefValue(ruleValue, tree) {
   }
   if (typeof ruleValue !== 'string' && ruleValue?.ref) {
     const refPath = ruleValue.ref.split('.');
-    const resolvedRuleValue = compileStyleValue(getValueFromObjectPath(tree, refPath));
+    const resolvedRuleValue = (0,external_wp_styleEngine_namespaceObject.getCSSValueFromRawStyle)(getValueFromObjectPath(tree, refPath));
 
     /*
      * Presence of another ref indicates a reference to another dynamic value.
@@ -20053,8 +20034,6 @@ const stretchWide = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx
 });
 /* harmony default export */ const stretch_wide = (stretchWide);
 
-;// CONCATENATED MODULE: external ["wp","styleEngine"]
-const external_wp_styleEngine_namespaceObject = window["wp"]["styleEngine"];
 ;// CONCATENATED MODULE: ./packages/block-editor/build-module/layouts/constrained.js
 /**
  * WordPress dependencies
@@ -34584,11 +34563,11 @@ function getStylesDeclarations(blockStyles = {}, selector = '', useRootPaddingAl
           return;
         }
         const cssProperty = name.startsWith('--') ? name : use_global_styles_output_kebabCase(name);
-        declarations.push(`${cssProperty}: ${compileStyleValue(getValueFromObjectPath(styleValue, [prop]))}`);
+        declarations.push(`${cssProperty}: ${(0,external_wp_styleEngine_namespaceObject.getCSSValueFromRawStyle)(getValueFromObjectPath(styleValue, [prop]))}`);
       });
     } else if (getValueFromObjectPath(blockStyles, pathToValue, false)) {
       const cssProperty = key.startsWith('--') ? key : use_global_styles_output_kebabCase(key);
-      declarations.push(`${cssProperty}: ${compileStyleValue(getValueFromObjectPath(blockStyles, pathToValue))}`);
+      declarations.push(`${cssProperty}: ${(0,external_wp_styleEngine_namespaceObject.getCSSValueFromRawStyle)(getValueFromObjectPath(blockStyles, pathToValue))}`);
     }
     return declarations;
   }, []);

build/block-editor/index.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-private-apis', 'wp-rich-text', 'wp-style-engine', 'wp-token-list', 'wp-url', 'wp-warning', 'wp-wordcount'), 'version' => '06a14dbf035889b72e26');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-a11y', 'wp-api-fetch', 'wp-blob', 'wp-blocks', 'wp-commands', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-deprecated', 'wp-dom', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-is-shallow-equal', 'wp-keyboard-shortcuts', 'wp-keycodes', 'wp-notices', 'wp-polyfill', 'wp-preferences', 'wp-primitives', 'wp-private-apis', 'wp-rich-text', 'wp-style-engine', 'wp-token-list', 'wp-url', 'wp-warning', 'wp-wordcount'), 'version' => '97ed869a5f73b8bf1edc');

build/style-engine/index.js

@@ -40,7 +40,8 @@ __webpack_require__.r(__webpack_exports__);
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   compileCSS: () => (/* binding */ compileCSS),
-  getCSSRules: () => (/* binding */ getCSSRules)
+  getCSSRules: () => (/* binding */ getCSSRules),
+  getCSSValueFromRawStyle: () => (/* reexport */ getCSSValueFromRawStyle)
 });
 
 ;// CONCATENATED MODULE: ./node_modules/tslib/tslib.es6.mjs
@@ -563,7 +564,7 @@ function generateRule(style, options, path, ruleKey) {
   return styleValue ? [{
     selector: options?.selector,
     key: ruleKey,
-    value: getCSSVarFromStyleValue(styleValue)
+    value: getCSSValueFromRawStyle(styleValue)
   }] : [];
 }
 
@@ -592,7 +593,7 @@ function generateBoxRules(style, options, path, ruleKeys, individualProperties =
     });
   } else {
     const sideRules = individualProperties.reduce((acc, side) => {
-      const value = getCSSVarFromStyleValue(getStyleValueByPath(boxStyle, [side]));
+      const value = getCSSValueFromRawStyle(getStyleValueByPath(boxStyle, [side]));
       if (value) {
         acc.push({
           selector: options?.selector,
@@ -608,13 +609,19 @@ function generateBoxRules(style, options, path, ruleKeys, individualProperties =
 }
 
 /**
- * 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.
  */
-function getCSSVarFromStyleValue(styleValue) {
+
+function getCSSValueFromRawStyle(styleValue) {
   if (typeof styleValue === 'string' && styleValue.startsWith(VARIABLE_REFERENCE_PREFIX)) {
     const variable = styleValue.slice(VARIABLE_REFERENCE_PREFIX.length).split(VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE).map(presetVariable => paramCase(presetVariable, {
       splitRegexp: [/([a-z0-9])([A-Z])/g,
@@ -1117,6 +1124,9 @@ function getCSSRules(style, options = {}) {
   return rules;
 }
 
+// Export style utils.
+
+
 (window.wp = window.wp || {}).styleEngine = __webpack_exports__;
 /******/ })()
 ;

build/style-engine/index.min.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'ef44d03a0bc10ea43c29');
+<?php return array('dependencies' => array('wp-polyfill'), 'version' => 'b27ca810bc996b3b6304');

gutenberg.php

@@ -14,7 +14,7 @@
 
 ### BEGIN AUTO-GENERATED DEFINES
 define( 'GUTENBERG_VERSION', '19.0.0' );
-define( 'GUTENBERG_GIT_COMMIT', '454129b07628e7fead84f158a4d05580ee5a6d3f' );
+define( 'GUTENBERG_GIT_COMMIT', 'add79ad40619242e31a1cc57f38d1aa44ebb9929' );
 ### END AUTO-GENERATED DEFINES
 
 gutenberg_pre_init();