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] 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 14e8edbd0dec26..e8ed04fb11484f 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 0c9b40c384b101..f82b05edd76448 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;
 }