@cssxjs/loaders 0.2.27 → 0.2.31

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.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)
+
+
+### Features
+
+* support animation and transition (the way it's expected by Reanimated v4) ([44a1f77](https://github.com/startupjs/cssx/commit/44a1f778074f1f65a8ccd76994a6bf1a3eb5e4a7))
+
+
+
+
+
 ## [0.2.27](https://github.com/startupjs/cssx/compare/v0.2.26...v0.2.27) (2025-12-16)
 
 **Note:** Version bump only for package @cssxjs/loaders

package/cssToReactNativeLoader.js

@@ -2,15 +2,28 @@
 const css2rn = require('@startupjs/css-to-react-native-transform').default
 
 const EXPORT_REGEX = /:export\s*\{/
+const VAR_NAMES_REGEX = /"var\(\s*--[A-Za-z0-9_-]+/g
 
 module.exports = function cssToReactNative (source) {
   source = escapeExport(source)
-  const cssObject = css2rn(source, { parseMediaQueries: true, parsePartSelectors: true })
+  const cssObject = css2rn(source, {
+    parseMediaQueries: true,
+    parsePartSelectors: true,
+    parseKeyframes: true
+  })
   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)
 }
 
@@ -81,6 +94,23 @@ 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) {
+  let res = cssString.match(VAR_NAMES_REGEX)
+  if (!res) return
+  res = res.map(i => i.replace(/"var\(\s*/, ''))
+  res = [...new Set(res)].sort() // remove duplicates and sort
+  return res
+}
+
+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.27",
+  "version": "0.2.31",
   "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-1",
+    "@startupjs/css-to-react-native-transform": "2.1.0-2",
     "stylus": "0.64.0"
   },
-  "gitHead": "68a2b7e3305e225801f6e636eff421e0a34d4a6c"
+  "gitHead": "989ab68dbc3ed81262ccc51946ddaa01b90416a5"
 }