@cssxjs/loaders 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/cssx/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/cssx/commit/4483f54d9507ebb38eb5f056de3fcac39862cb30))
+
+
+
+
+
+## [0.2.31](https://github.com/startupjs/cssx/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/cssx/commit/282cb461369cdb951cc873973a2d0da97a682b9b))
+
+
+
+
+
 ## [0.2.30](https://github.com/startupjs/cssx/compare/v0.2.29...v0.2.30) (2026-01-18)
 
 

package/cssToReactNativeLoader.js

@@ -2,6 +2,8 @@
 const css2rn = require('@startupjs/css-to-react-native-transform').default
 
 const EXPORT_REGEX = /:export\s*\{/
+// Match var() anywhere in a string value (not just at the start)
+const VAR_NAMES_REGEX = /var\(\s*(--[A-Za-z0-9_-]+)/g
 
 module.exports = function cssToReactNative (source) {
   source = escapeExport(source)
@@ -13,8 +15,16 @@ module.exports = function cssToReactNative (source) {
   for (const key in cssObject.__exportProps || {}) {
     cssObject[key] = parseStylValue(cssObject.__exportProps[key])
   }
+  const stringifiedCss = JSON.stringify(cssObject)
   // save hash to use with the caching system of @startupjs/cache
-  cssObject.__hash__ = simpleNumericHash(JSON.stringify(cssObject))
+  cssObject.__hash__ = simpleNumericHash(stringifiedCss)
+  // OPTIMIZATION: save vars used in the styles for later replacement in runtime
+  // and also to determine whether we need to listen for variable changes
+  const vars = getVariableNames(stringifiedCss)
+  if (vars) cssObject.__vars = vars
+  // OPTIMIZATION: indicate whether @media queries are used.
+  // This is later used in runtime to determine whether we need to listen for dimension changes
+  if (hasMedia(cssObject)) cssObject.__hasMedia = true
   return 'module.exports = ' + JSON.stringify(cssObject)
 }
 
@@ -85,6 +95,22 @@ function escapeExport (source) {
 
 // ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2694461#gistcomment-2694461
 function simpleNumericHash (s) {
-  for (var i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  let i, h
+  for (i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
   return h
 }
+
+function getVariableNames (cssString) {
+  const matches = [...cssString.matchAll(VAR_NAMES_REGEX)]
+  if (!matches.length) return
+  const res = matches.map(m => m[1]) // extract capture group (variable name)
+  return [...new Set(res)].sort() // remove duplicates and sort
+}
+
+function hasMedia (styles = {}) {
+  for (const selector in styles) {
+    if (/^@media/.test(selector)) {
+      return true
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/loaders",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "description": "Webpack-compatible loaders for CSSX styles in React Native and Web bundlers",
   "exports": {
     "./callLoader": "./callLoader.js",
@@ -20,8 +20,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@startupjs/css-to-react-native-transform": "2.1.0-2",
+    "@startupjs/css-to-react-native-transform": "2.1.0-3",
     "stylus": "0.64.0"
   },
-  "gitHead": "2fd171f6da726008a2386471bd5be4b5291e49ab"
+  "gitHead": "2d5f40fdc99ec3cbfb397741444993e2d09d7975"
 }