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.
WordPress · Aug 15, 2024 · d3d16f4 · d3d16f4
1 parent d669eb6
commit d3d16f4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
@@ -260,19 +260,21 @@ _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:
 
 `getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
 
 _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
@@ -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;
 }