fix: use only "var" in detecting CSS variable

Author: Arukuen

src/block-components/columns/style.js

@@ -33,7 +33,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		responsive: 'all',
 		valueCallback: value => {
 			// Substitute with using format to work with preset controls
-			if ( value.startsWith( 'var(--stk' ) ) {
+			if ( value.startsWith( 'var' ) ) {
 				return value
 			}
 			return value + 'px'
@@ -46,7 +46,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		attrName: 'columnGap',
 		responsive: 'all',
 		valueCallback: value => {
-			if ( value.startsWith( 'var(--stk' ) ) {
+			if ( value.startsWith( 'var' ) ) {
 				return value
 			}
 			return value + 'px'
@@ -91,7 +91,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 			attrName: 'rowGap',
 			responsive: 'all',
 			valueCallback: value => {
-				if ( value.startsWith( 'var(--stk' ) ) {
+				if ( value.startsWith( 'var' ) ) {
 					return value
 				}
 				return value + 'px'
@@ -104,7 +104,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 			attrName: 'rowGap',
 			responsive: 'all',
 			valueCallback: value => {
-				if ( value.startsWith( 'var(--stk' ) ) {
+				if ( value.startsWith( 'var' ) ) {
 					return value
 				}
 				return value + 'px'

src/block-components/helpers/borders/style.js

@@ -39,7 +39,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		valueCallback: value => {
 			// Substitute with using format to work with preset controls
 			value = typeof value === 'number' ? value.toString() : value
-			if ( value.startsWith( 'var(--stk' ) ) {
+			if ( value.startsWith( 'var' ) ) {
 				return value
 			}
 			return value + 'px'
@@ -57,7 +57,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrNameTemplate,
 		valueCallback: value => {
 			value = typeof value === 'number' ? value.toString() : value
-			if ( value.startsWith( 'var(--stk' ) ) {
+			if ( value.startsWith( 'var' ) ) {
 				return value
 			}
 			return value + 'px'
@@ -75,7 +75,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrNameTemplate,
 		valueCallback: value => {
 			value = typeof value === 'number' ? value.toString() : value
-			if ( value.startsWith( 'var(--stk' ) ) {
+			if ( value.startsWith( 'var' ) ) {
 				return value
 			}
 			return value + 'px'
@@ -93,7 +93,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrNameTemplate,
 		valueCallback: value => {
 			value = typeof value === 'number' ? value.toString() : value
-			if ( value.startsWith( 'var(--stk' ) ) {
+			if ( value.startsWith( 'var' ) ) {
 				return value
 			}
 			return value + 'px'

src/components/advanced-range-control/index.js

@@ -283,7 +283,7 @@ export default memo( AdvancedRangeControl, isEqual )
 const extractNumberAndUnit = value => {
 	// Match the last characters that are not numbers.
 	const matches = value.match( /([\d.]+)(\D*)$/ )
-	if ( ! matches || value.startsWith( 'var(--stk' ) ) {
+	if ( ! matches || value.startsWith( 'var' ) ) {
 		return [ value, '' ]
 	}
 	return [ matches[ 1 ], matches[ 2 ] ]

src/components/block-css/index.js

@@ -183,7 +183,7 @@ const BlockCss = props => {
 
 		if ( unit ) { // Note: this will only work for non-objects.
 			// If the value is `auto` or a CSS variable, don't add units.
-			if ( ! ( value === 'auto' || ( typeof value === 'string' && value.startsWith( 'var(--stk' ) ) ) ) {
+			if ( ! ( value === 'auto' || ( typeof value === 'string' && value.startsWith( 'var' ) ) ) ) {
 				value = `${ value }${ unit }`
 			}
 		}

src/components/four-range-control/index.js

@@ -59,7 +59,7 @@ const isEqualInitial = ( props, value, firstValue ) => {
 const extractNumberAndUnit = value => {
 	// Match the last characters that are not numbers.
 	const matches = value.match( /([\d.]+)(\D*)$/ )
-	if ( ! matches || value.startsWith( 'var(--stk' ) ) {
+	if ( ! matches || value.startsWith( 'var' ) ) {
 		return [ value, '' ]
 	}
 	return [ matches[ 1 ], matches[ 2 ] ]

src/util/styles/style-object.js

@@ -336,7 +336,7 @@ class StyleObject {
 
 			if ( unit ) { // Note: this will only work for non-objects.
 				// If the value is `auto` or a CSS variable, don't add units.
-				if ( ! ( value === 'auto' || ( typeof value === 'string' && value.startsWith( 'var(--stk' ) ) ) ) {
+				if ( ! ( value === 'auto' || ( typeof value === 'string' && value.startsWith( 'var' ) ) ) ) {
 					value = `${ value }${ unit }`
 				}
 			}