@cssxjs/runtime 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.2.5 (Wed Nov 05 2025)
+
+#### 🐛 Bug Fix
+
+- fix: force 'px' unit for lineHegiht in pure React on web ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
+
+---
+
+# 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.3",
+  "version": "0.2.5",
   "publishConfig": {
     "access": "public"
   },
@@ -52,5 +52,5 @@
       "optional": true
     }
   },
-  "gitHead": "f0c94552a7c93f54f2b8b0fbf5d0d728a5e225f5"
+  "gitHead": "43c7c2f95105e88b07db9c12f3fffdb516a998ff"
 }

package/platformHelpers/index.js

@@ -30,3 +30,12 @@ export function getPlatform (...args) {
     throw err
   }
 }
+
+export function isPureReact (...args) {
+  try {
+    return platformHelpers.isPureReact(...args)
+  } catch (err) {
+    console.error('[cssxjs] platform helpers \'isPureReact\' is not specified. Babel is probably misconfigured')
+    throw err
+  }
+}

package/platformHelpers/react-native.js

@@ -7,3 +7,7 @@ export function getDimensions () {
 export function getPlatform () {
   return Platform.OS
 }
+
+export function isPureReact () {
+  return false
+}

package/platformHelpers/web.js

@@ -12,3 +12,7 @@ export function getDimensions () {
 export function getPlatform () {
   return 'web'
 }
+
+export function isPureReact () {
+  return true
+}

package/process.js

@@ -2,12 +2,14 @@ import { process as dynamicProcess } from './vendor/react-native-dynamic-style-p
 import dimensions from './dimensions.js'
 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 (
   styleName,
@@ -23,12 +25,41 @@ 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])
     }
+    // force transform to 'px' some units in pure React environment
+    if (isPureReact()) {
+      // atm it's only 'lineHeight' property
+      if (typeof res[propName].lineHeight === 'number') {
+        res[propName].lineHeight = `${res[propName].lineHeight}px`
+      }
+    }
+    // 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
 }