From d3d16f47d9a82545f2d744a93cbf05addc6d3c26 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 15 Aug 2024 14:12:29 +1000
Subject: [PATCH 1/2] Use a generic type parameter T to describe argument and
 return value. By default, T is set to string. This allows the function to be
 flexible with the type of styleValue, but it defaults to handling strings.

---
 packages/style-engine/README.md           |  8 +++++---
 packages/style-engine/src/styles/utils.ts | 14 ++++++++------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 14e8edbd0dec2..e8ed04fb11484 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -260,7 +260,9 @@ _Changelog_
 
 ### getCSSValueFromRawStyle
 
-Returns a WordPress CSS custom var value from incoming style preset value. The preset value follows the pattern `var:description|context|slug`.
+Returns a WordPress CSS custom var value from incoming style preset value, if one is detected.
+
+The preset value is a string and follows the pattern `var:description|context|slug`.
 
 Example:
 
@@ -268,11 +270,11 @@ Example:
 
 _Parameters_
 
--   _styleValue_ `string | any`: A raw style value.
+-   _styleValue_ `CSSStyleValue`: A raw style value.
 
 _Returns_
 
--   `string | unknown`: A CSS var value.
+-   `CSSStyleValue`: A CSS var value.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 0c9b40c384b10..f82b05edd7644 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -127,8 +127,10 @@ export function generateBoxRules(
 }
 
 /**
- * Returns a WordPress CSS custom var value from incoming style preset value.
- * The preset value follows the pattern `var:description|context|slug`.
+ * Returns a WordPress CSS custom var value from incoming style preset value,
+ * if one is detected.
+ *
+ * The preset value is a string and follows the pattern `var:description|context|slug`.
  *
  * Example:
  *
@@ -139,9 +141,9 @@ export function generateBoxRules(
  * @return A CSS var value.
  */
 
-export function getCSSValueFromRawStyle(
-	styleValue: string | any
-): string | unknown {
+export function getCSSValueFromRawStyle< CSSStyleValue = string >(
+	styleValue: CSSStyleValue
+): CSSStyleValue {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
@@ -160,7 +162,7 @@ export function getCSSValueFromRawStyle(
 				} )
 			)
 			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
+		return `var(--wp--${ variable })` as CSSStyleValue;
 	}
 	return styleValue;
 }

From 44de6888a833878970b0bec0e70359e289a3d7f8 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Thu, 15 Aug 2024 14:50:23 +1000
Subject: [PATCH 2/2] Update README.md Update utils.ts - change type to
 StyleValue

---
 packages/style-engine/README.md           |  4 ++--
 packages/style-engine/src/styles/utils.ts | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index e8ed04fb11484..a3e302fab4bb9 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -270,11 +270,11 @@ Example:
 
 _Parameters_
 
--   _styleValue_ `CSSStyleValue`: A raw style value.
+-   _styleValue_ `StyleValue`: A string representing a raw CSS value. Non-strings won't be processed.
 
 _Returns_
 
--   `CSSStyleValue`: A CSS var value.
+-   `StyleValue`: A CSS custom var value if the incoming style value is a preset value.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index f82b05edd7644..74a18d2c2a6e4 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -136,14 +136,14 @@ export function generateBoxRules(
  *
  * `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
  *
- * @param styleValue A raw style value.
+ * @param styleValue A string representing a raw CSS value. Non-strings won't be processed.
  *
- * @return A CSS var value.
+ * @return A CSS custom var value if the incoming style value is a preset value.
  */
 
-export function getCSSValueFromRawStyle< CSSStyleValue = string >(
-	styleValue: CSSStyleValue
-): CSSStyleValue {
+export function getCSSValueFromRawStyle< StyleValue = string >(
+	styleValue: StyleValue
+): StyleValue {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
@@ -162,7 +162,7 @@ export function getCSSValueFromRawStyle< CSSStyleValue = string >(
 				} )
 			)
 			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })` as CSSStyleValue;
+		return `var(--wp--${ variable })` as StyleValue;
 	}
 	return styleValue;
 }