@cssxjs/runtime 0.2.31 → 0.2.32

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.2.32](https://github.com/startupjs/startupjs/compare/v0.2.31...v0.2.32) (2026-01-25)
+
+
+### Bug Fixes
+
+* **runtime:** support var() in shorthand values and in various complex cases ([4483f54](https://github.com/startupjs/startupjs/commit/4483f54d9507ebb38eb5f056de3fcac39862cb30))
+
+
+
+
+
 ## [0.2.31](https://github.com/startupjs/startupjs/compare/v0.2.30...v0.2.31) (2026-01-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/runtime",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "publishConfig": {
     "access": "public"
   },
@@ -39,7 +39,8 @@
     "micro-memoize": "^3.0.1"
   },
   "devDependencies": {
-    "@startupjs/css-to-react-native-transform": "2.1.0-2",
+    "@cssxjs/loaders": "^0.2.32",
+    "@startupjs/css-to-react-native-transform": "2.1.0-3",
     "mocha": "^8.1.1"
   },
   "peerDependencies": {
@@ -54,5 +55,5 @@
       "optional": true
     }
   },
-  "gitHead": "989ab68dbc3ed81262ccc51946ddaa01b90416a5"
+  "gitHead": "2d5f40fdc99ec3cbfb397741444993e2d09d7975"
 }

package/process.js

@@ -4,7 +4,8 @@ import singletonVariables, { defaultVariables } from './variables.js'
 import matcher from './matcher.js'
 import { isPureReact } from './platformHelpers/index.js'
 
-const VARS_REGEX = /"var\(\s*(--[A-Za-z0-9_-]+)\s*,?\s*(.*?)\s*\)"/g
+// Regex to match var() anywhere within a string value (handles both full and partial)
+const VARS_REGEX = /var\(\s*(--[A-Za-z0-9_-]+)\s*,?\s*([^)]*)\s*\)/g
 const SUPPORT_UNIT = true
 
 export function process (
@@ -61,43 +62,55 @@ export function process (
   return res
 }
 
-function replaceVariables (strStyles) {
-  strStyles = strStyles.replace(VARS_REGEX, (match, varName, varDefault) => {
-    let res
-    res = singletonVariables[varName] ?? defaultVariables[varName] ?? varDefault
+function replaceVariablesInObject (obj) {
+  if (obj === null || obj === undefined) return obj
+  if (Array.isArray(obj)) {
+    return obj.map(item => replaceVariablesInObject(item))
+  }
+  if (typeof obj === 'object') {
+    const result = {}
+    for (const key of Object.keys(obj)) {
+      result[key] = replaceVariablesInObject(obj[key])
+    }
+    return result
+  }
+  if (typeof obj === 'string' && obj.includes('var(')) {
+    return replaceVariablesInString(obj)
+  }
+  return obj
+}
+
+function replaceVariablesInString (str) {
+  // Replace all var() occurrences in the string
+  const result = str.replace(VARS_REGEX, (match, varName, varDefault) => {
+    let res = singletonVariables[varName] ?? defaultVariables[varName] ?? varDefault
     if (typeof res === 'string') {
       res = res.trim()
-      // replace 'px' value with a pure number
-      res = res.replace(/px$/, '')
       // sometimes compiler returns wrapped brackets. Remove them
       const bracketsCount = res.match(/^\(+/)?.[0]?.length || 0
       res = res.substring(bracketsCount, res.length - bracketsCount)
     }
-    if (!isNumeric(res)) {
-      res = `"${res}"`
-    }
     return res
   })
-  return JSON.parse(strStyles)
+
+  // After all replacements, check if the result is a pure numeric value
+  // If so, convert it to a number (stripping 'px' suffix if present)
+  const trimmed = result.trim()
+  const withoutPx = trimmed.replace(/px$/, '')
+  if (isNumeric(withoutPx)) {
+    return parseFloat(withoutPx)
+  }
+
+  return result
 }
 
-const stringifiedStylesCache = new WeakMap()
 function transformStyles (styles) {
   if (!styles) return {}
 
-  // IMPORTANT: this will use cached stringified styles from the original styles object
-  // which are singletons. That's why it must be first before other transformations take place
-  // which will modify the styles object.
+  // Dynamically process css variables.
+  // This will also auto-trigger rerendering on variable change when cache is not used
   if (styles.__vars) {
-    let strStyles = stringifiedStylesCache.get(styles)
-    if (!strStyles) {
-      strStyles = JSON.stringify(styles)
-      stringifiedStylesCache.set(styles, strStyles)
-    }
-
-    // Dynamically process css variables.
-    // This will also auto-trigger rerendering on variable change when cache is not used
-    styles = replaceVariables(strStyles)
+    styles = replaceVariablesInObject(styles)
   }
 
   // trigger rerender when cache is NOT used