@cssxjs/runtime 0.2.30 → 0.2.32

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
+
+
+### Bug Fixes
+
+* **runtime:** improve performance of substituting var() in css ([282cb46](https://github.com/startupjs/startupjs/commit/282cb461369cdb951cc873973a2d0da97a682b9b))
+
+
+
+
+
 ## [0.2.30](https://github.com/startupjs/startupjs/compare/v0.2.29...v0.2.30) (2026-01-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/runtime",
-  "version": "0.2.30",
+  "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": "2fd171f6da726008a2386471bd5be4b5291e49ab"
+  "gitHead": "2d5f40fdc99ec3cbfb397741444993e2d09d7975"
 }

package/process.js

@@ -4,11 +4,8 @@ import singletonVariables, { defaultVariables } from './variables.js'
 import matcher from './matcher.js'
 import { isPureReact } from './platformHelpers/index.js'
 
-// TODO: Improve css variables performance. Instead of rerunning finding variables each time
-//       it has to work as a pipeline and pass the variables from one step to the next.
-
-const VARS_REGEX = /"var\(\s*(--[A-Za-z0-9_-]+)\s*,?\s*(.*?)\s*\)"/g
-const HAS_VAR_REGEX = /"var\(/
+// 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 (
@@ -65,63 +62,64 @@ export function process (
   return res
 }
 
-export function hasMedia (styles = {}) {
-  for (const selector in styles) {
-    if (/^@media/.test(selector)) {
-      return true
+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
   }
-}
-
-export function hasVariables (...styleObjects) {
-  for (const styleObject of styleObjects) {
-    if (_hasVariables(styleObject)) return true
+  if (typeof obj === 'string' && obj.includes('var(')) {
+    return replaceVariablesInString(obj)
   }
+  return obj
 }
 
-function _hasVariables (styles = {}) {
-  return HAS_VAR_REGEX.test(JSON.stringify(styles))
-}
-
-function replaceVariables (styles = {}) {
-  let strStyles = JSON.stringify(styles)
-  strStyles = strStyles.replace(VARS_REGEX, (match, varName, varDefault) => {
-    let res
-    res = singletonVariables[varName] ?? defaultVariables[varName] ?? varDefault
+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
 }
 
 function transformStyles (styles) {
-  if (styles) {
-    // trigger rerender when cache is NOT used
-    if (hasMedia(styles)) listenForDimensionsChange()
+  if (!styles) return {}
 
-    // dynamically process @media queries and vh/vw units
-    styles = dynamicProcess(styles)
+  // Dynamically process css variables.
+  // This will also auto-trigger rerendering on variable change when cache is not used
+  if (styles.__vars) {
+    styles = replaceVariablesInObject(styles)
+  }
 
-    if (hasVariables(styles)) {
-      // Dynamically process css variables.
-      // This will also auto-trigger rerendering on variable change when cache is not used
-      styles = replaceVariables(styles)
-    }
+  // trigger rerender when cache is NOT used
+  if (styles.__hasMedia) listenForDimensionsChange()
 
-    return styles
-  } else {
-    return {}
-  }
+  // dynamically process @media queries and vh/vw units
+  styles = dynamicProcess(styles)
+
+  return styles
 }
 
 // If @media is used, force trigger access to the observable value.

package/processCached.js

@@ -1,9 +1,7 @@
 import { singletonMemoize } from 'teamplay/cache'
 import dimensions from './dimensions.js'
 import singletonVariables from './variables.js'
-import { process as _process, hasMedia, listenForDimensionsChange, hasVariables } from './process.js'
-
-const VAR_NAMES_REGEX = /"var\(\s*--[A-Za-z0-9_-]+/g
+import { process as _process, listenForDimensionsChange } from './process.js'
 
 export const process = singletonMemoize(_process, {
   cacheName: 'styles',
@@ -18,7 +16,7 @@ export const process = singletonMemoize(_process, {
   // IMPORTANT: This should be the same as the ones which go into the singletonMemoize function
   forceUpdateWhenChanged: (styleName, fileStyles, globalStyles, localStyles, inlineStyleProps) => {
     const args = {}
-    const watchWidthChange = hasMedia(fileStyles) || hasMedia(globalStyles) || hasMedia(localStyles)
+    const watchWidthChange = fileStyles?.__hasMedia || globalStyles?.__hasMedia || localStyles?.__hasMedia
     if (watchWidthChange) {
       // trigger rerender when cache is used
       listenForDimensionsChange()
@@ -26,7 +24,7 @@ export const process = singletonMemoize(_process, {
       // the affected cache to recalculate
       args.dimensionsWidth = dimensions.width
     }
-    if (hasVariables(fileStyles, globalStyles, localStyles)) {
+    if (fileStyles?.__vars || globalStyles?.__vars || localStyles?.__vars) {
       const variableNames = getVariableNames(fileStyles, globalStyles, localStyles)
       // trigger rerender when cache is used
       listenForVariablesChange(variableNames)
@@ -41,18 +39,14 @@ export const process = singletonMemoize(_process, {
 })
 
 function getVariableNames (...styleObjects) {
-  let res = []
+  const vars = []
   for (const styleObject of styleObjects) {
-    res = res.concat(_getVariableNames(styleObject))
+    if (!styleObject?.__vars) continue
+    for (const varName of styleObject.__vars) {
+      if (!vars.includes(varName)) vars.push(varName)
+    }
   }
-  res = [...new Set(res)].sort() // remove duplicates and sort
-  return res
-}
-
-function _getVariableNames (styles = {}) {
-  let res = JSON.stringify(styles).match(VAR_NAMES_REGEX) || []
-  res = res.map(i => i.replace(/"var\(\s*/, ''))
-  return res
+  return vars.sort()
 }
 
 // If var() is used, force trigger access to the observable value.