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 e1fbc88ae646a..cd4ad0cea50e0 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, getCSSVarFromStyleValue } from '@wordpress/style-engine';
+import { getCSSRules, getCSSValueFromRawStyle } from '@wordpress/style-engine';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
@@ -356,7 +356,7 @@ export function getStylesDeclarations(
 						? name
 						: kebabCase( name );
 					declarations.push(
-						`${ cssProperty }: ${ getCSSVarFromStyleValue(
+						`${ cssProperty }: ${ getCSSValueFromRawStyle(
 							getValueFromObjectPath( styleValue, [ prop ] )
 						) }`
 					);
@@ -368,7 +368,7 @@ export function getStylesDeclarations(
 					? key
 					: kebabCase( key );
 				declarations.push(
-					`${ cssProperty }: ${ getCSSVarFromStyleValue(
+					`${ cssProperty }: ${ getCSSValueFromRawStyle(
 						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 bee6fab05c716..4cd93357b081b 100644
--- a/packages/block-editor/src/components/global-styles/utils.js
+++ b/packages/block-editor/src/components/global-styles/utils.js
@@ -7,7 +7,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { useViewportMatch } from '@wordpress/compose';
-import { getCSSVarFromStyleValue } from '@wordpress/style-engine';
+import { getCSSValueFromRawStyle } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -564,7 +564,7 @@ export function getResolvedRefValue( ruleValue, tree ) {
 
 	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
 		const refPath = ruleValue.ref.split( '.' );
-		const resolvedRuleValue = getCSSVarFromStyleValue(
+		const resolvedRuleValue = getCSSValueFromRawStyle(
 			getValueFromObjectPath( tree, refPath )
 		);
 
diff --git a/packages/style-engine/README.md b/packages/style-engine/README.md
index 9cc6caf1c87b2..14e8edbd0dec2 100644
--- a/packages/style-engine/README.md
+++ b/packages/style-engine/README.md
@@ -258,21 +258,21 @@ _Changelog_
 
 `6.1.0` Introduced in WordPress core.
 
-### getCSSVarFromStyleValue
+### getCSSValueFromRawStyle
 
 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)'
+`getCSSValueFromRawStyle( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
 
 _Parameters_
 
--   _styleValue_ `string`: A raw style value.
+-   _styleValue_ `string | any`: A raw style value.
 
 _Returns_
 
--   `string`: string A CSS var value.
+-   `string | unknown`: A CSS var value.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
diff --git a/packages/style-engine/src/index.ts b/packages/style-engine/src/index.ts
index 1bb25a8b539e2..102d5842e7a0b 100644
--- a/packages/style-engine/src/index.ts
+++ b/packages/style-engine/src/index.ts
@@ -93,4 +93,4 @@ export function getCSSRules(
 }
 
 // Export style utils.
-export { getCSSVarFromStyleValue } from './styles/utils';
+export { getCSSValueFromRawStyle } from './styles/utils';
diff --git a/packages/style-engine/src/styles/test/utils.js b/packages/style-engine/src/styles/test/utils.js
index 239852cdddebf..02f0adf494e71 100644
--- a/packages/style-engine/src/styles/test/utils.js
+++ b/packages/style-engine/src/styles/test/utils.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { camelCaseJoin, getCSSVarFromStyleValue, upperFirst } from '../utils';
+import { camelCaseJoin, getCSSValueFromRawStyle, upperFirst } from '../utils';
 
 describe( 'utils', () => {
 	describe( 'upperFirst()', () => {
@@ -16,52 +16,39 @@ describe( 'utils', () => {
 		} );
 	} );
 
-	describe( 'getCSSVarFromStyleValue()', () => {
-		it( 'should return a compiled CSS var', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|yellow-bun' )
-			).toEqual( 'var(--wp--preset--color--yellow-bun)' );
-		} );
-
-		it( 'should kebab case numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|h1' )
-			).toEqual( 'var(--wp--preset--font-size--h-1)' );
-		} );
-
-		it( 'should kebab case numbers as prefix', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|font-size|1px' )
-			).toEqual( 'var(--wp--preset--font-size--1-px)' );
-		} );
-
-		it( 'should kebab case both sides of numbers', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|orange11orange' )
-			).toEqual( 'var(--wp--preset--color--orange-11-orange)' );
-		} );
-
-		it( 'should kebab case camel case', () => {
-			expect(
-				getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )
-			).toEqual( 'var(--wp--preset--color--heavenly-blue)' );
-		} );
-
-		it( 'should kebab case underscores', () => {
-			expect(
-				getCSSVarFromStyleValue(
-					'var:preset|background|dark_Secrets_100'
-				)
-			).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 );
-		} );
+	describe( 'getCSSValueFromRawStyle()', () => {
+		it.each( [
+			[ 'min(40%, 400px)', 'min(40%, 400px)' ],
+			[
+				'var(--wp--preset--color--yellow-bun)',
+				'var:preset|color|yellow-bun',
+			],
+			[ 'var(--wp--preset--font-size--h-1)', 'var:preset|font-size|h1' ],
+			[
+				'var(--wp--preset--font-size--1-px)',
+				'var:preset|font-size|1px',
+			],
+			[
+				'var(--wp--preset--color--orange-11-orange)',
+				'var:preset|color|orange11orange',
+			],
+			[
+				'var(--wp--preset--color--heavenly-blue)',
+				'var:preset|color|heavenlyBlue',
+			],
+			[
+				'var(--wp--preset--background--dark-secrets-100)',
+				'var:preset|background|dark_Secrets_100',
+			],
+			[ null, null ],
+			[ false, false ],
+			[ 1000, 1000 ],
+			[ undefined, undefined ],
+		] )(
+			'should return %s using an incoming value of %s',
+			( expected, value ) => {
+				expect( getCSSValueFromRawStyle( value ) ).toEqual( expected );
+			}
+		);
 	} );
 } );
diff --git a/packages/style-engine/src/styles/utils.ts b/packages/style-engine/src/styles/utils.ts
index 546eb06da9702..0c9b40c384b10 100644
--- a/packages/style-engine/src/styles/utils.ts
+++ b/packages/style-engine/src/styles/utils.ts
@@ -61,7 +61,7 @@ export function generateRule(
 				{
 					selector: options?.selector,
 					key: ruleKey,
-					value: getCSSVarFromStyleValue( styleValue ),
+					value: getCSSValueFromRawStyle( styleValue ),
 				},
 		  ]
 		: [];
@@ -103,7 +103,7 @@ export function generateBoxRules(
 	} else {
 		const sideRules = individualProperties.reduce(
 			( acc: GeneratedCSSRule[], side: string ) => {
-				const value: string | undefined = getCSSVarFromStyleValue(
+				const value = getCSSValueFromRawStyle(
 					getStyleValueByPath( boxStyle, [ side ] )
 				);
 				if ( value ) {
@@ -132,13 +132,16 @@ export function generateBoxRules(
  *
  * Example:
  *
- * `getCSSVarFromStyleValue( 'var:preset|color|heavenlyBlue' )` // returns 'var(--wp--preset--color--heavenly-blue)'
+ * `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.
  */
-export function getCSSVarFromStyleValue( styleValue: string ): string {
+
+export function getCSSValueFromRawStyle(
+	styleValue: string | any
+): string | unknown {
 	if (
 		typeof styleValue === 'string' &&
 		styleValue.startsWith( VARIABLE_REFERENCE_PREFIX )
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 5b361836a8e37..8de623fcfcb2b 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -94,7 +94,7 @@ export interface StyleOptions {
 
 export interface GeneratedCSSRule {
 	selector?: string;
-	value: string;
+	value: string | unknown;
 	/**
 	 * The CSS key in JS style attribute format, compatible with React.
 	 * E.g. `paddingTop` instead of `padding-top`.