@cssxjs/runtime 0.2.30 → 0.2.31

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.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.31",
   "publishConfig": {
     "access": "public"
   },
@@ -54,5 +54,5 @@
       "optional": true
     }
   },
-  "gitHead": "2fd171f6da726008a2386471bd5be4b5291e49ab"
+  "gitHead": "989ab68dbc3ed81262ccc51946ddaa01b90416a5"
 }

package/process.js

@@ -4,11 +4,7 @@ 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\(/
 const SUPPORT_UNIT = true
 
 export function process (
@@ -65,26 +61,7 @@ export function process (
   return res
 }
 
-export function hasMedia (styles = {}) {
-  for (const selector in styles) {
-    if (/^@media/.test(selector)) {
-      return true
-    }
-  }
-}
-
-export function hasVariables (...styleObjects) {
-  for (const styleObject of styleObjects) {
-    if (_hasVariables(styleObject)) return true
-  }
-}
-
-function _hasVariables (styles = {}) {
-  return HAS_VAR_REGEX.test(JSON.stringify(styles))
-}
-
-function replaceVariables (styles = {}) {
-  let strStyles = JSON.stringify(styles)
+function replaceVariables (strStyles) {
   strStyles = strStyles.replace(VARS_REGEX, (match, varName, varDefault) => {
     let res
     res = singletonVariables[varName] ?? defaultVariables[varName] ?? varDefault
@@ -104,24 +81,32 @@ function replaceVariables (styles = {}) {
   return JSON.parse(strStyles)
 }
 
+const stringifiedStylesCache = new WeakMap()
 function transformStyles (styles) {
-  if (styles) {
-    // trigger rerender when cache is NOT used
-    if (hasMedia(styles)) listenForDimensionsChange()
-
-    // dynamically process @media queries and vh/vw units
-    styles = dynamicProcess(styles)
+  if (!styles) return {}
 
-    if (hasVariables(styles)) {
-      // Dynamically process css variables.
-      // This will also auto-trigger rerendering on variable change when cache is not used
-      styles = replaceVariables(styles)
+  // 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.
+  if (styles.__vars) {
+    let strStyles = stringifiedStylesCache.get(styles)
+    if (!strStyles) {
+      strStyles = JSON.stringify(styles)
+      stringifiedStylesCache.set(styles, strStyles)
     }
 
-    return styles
-  } else {
-    return {}
+    // Dynamically process css variables.
+    // This will also auto-trigger rerendering on variable change when cache is not used
+    styles = replaceVariables(strStyles)
   }
+
+  // trigger rerender when cache is NOT used
+  if (styles.__hasMedia) listenForDimensionsChange()
+
+  // 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.