@cssxjs/runtime 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.2.4 (Wed Nov 05 2025)
+
+#### 🚀 Enhancement
+
+- feat: add 'u' unit support to the 'style' prop: 1u = 8px ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
+
+---
+
 # v0.2.2 (Tue Nov 04 2025)
 
 #### 🐛 Bug Fix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/runtime",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "publishConfig": {
     "access": "public"
   },
@@ -52,5 +52,5 @@
       "optional": true
     }
   },
-  "gitHead": "ac21101fdcc9a9a6e5eeeb3f89825bf237e5066a"
+  "gitHead": "22ebaf580b16f07e1f2695c2c21196dd15735f11"
 }

package/process.js

@@ -8,6 +8,7 @@ import matcher from './matcher.js'
 
 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 (
   styleName,
@@ -23,12 +24,34 @@ export function process (
   const res = matcher(
     styleName, fileStyles, globalStyles, localStyles, inlineStyleProps
   )
-  // flatten styles into single objects
   for (const propName in res) {
+    // flatten styles into single objects
     if (Array.isArray(res[propName])) {
       res[propName] = res[propName].flat(10)
       res[propName] = Object.assign({}, ...res[propName])
     }
+    // add 'u' unit support (1u = 8px)
+    // replace in string values `{NUMBER}u` with the `{NUMBER*8}`
+    // (pure number without any units - which will be treated as 'px' by React Native and pure React)
+    if (SUPPORT_UNIT) {
+      for (const property in res[propName]) {
+        if (typeof res[propName][property] !== 'string') continue
+        if (!/\du/.test(res[propName][property])) continue // quick check for potential presence of 'u' unit
+        while (true) {
+          const match = res[propName][property].match(/(\(|,| |^)([+-]?(?:\d*\.)?\d+)u(\)|,| |$)/)
+          if (!match) break
+          const fullMatch = match[0]
+          const number = parseFloat(match[2])
+          const replacedValue = number * 8
+          // if left and right don't exist (pure value), then assign the pure number
+          if (!match[1] && !match[3]) {
+            res[propName][property] = replacedValue
+            break
+          }
+          res[propName][property] = res[propName][property].replace(fullMatch, `${match[1]}${replacedValue}${match[3]}`)
+        }
+      }
+    }
   }
   return res
 }