@cssxjs/runtime 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# v0.2.0 (Tue Nov 04 2025)
+
+#### 🚀 Enhancement
+
+- feat: add TypeScript support, write a more comprehensive example in TSX ([@cray0000](https://github.com/cray0000))
+- feat(runtime): implement support for both React Native and pure Web ([@cray0000](https://github.com/cray0000))
+- feat: make it work for pure web through a babel plugin [#2](https://github.com/startupjs/cssx/pull/2) ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))

package/constants.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  GLOBAL_NAME: '__CSS_GLOBAL__',
+  LOCAL_NAME: '__CSS_LOCAL__'
+}

package/dimensions.js

@@ -0,0 +1,5 @@
+import { observable } from '@nx-js/observer-util'
+
+export default observable({
+  width: 0
+})

package/entrypoints/react-native-teamplay.js

@@ -0,0 +1,7 @@
+import * as platformHelpers from '../platformHelpers/react-native.js'
+import { setPlatformHelpers } from '../platformHelpers/index.js'
+import { process } from '../processCached.js'
+
+setPlatformHelpers(platformHelpers)
+
+export default process

package/entrypoints/react-native.js

@@ -0,0 +1,7 @@
+import * as platformHelpers from '../platformHelpers/react-native.js'
+import { setPlatformHelpers } from '../platformHelpers/index.js'
+import { process } from '../process.js'
+
+setPlatformHelpers(platformHelpers)
+
+export default process

package/entrypoints/web-teamplay.js

@@ -0,0 +1,7 @@
+import { setPlatformHelpers } from '../platformHelpers/index.js'
+import * as platformHelpers from '../platformHelpers/web.js'
+import { process } from '../processCached.js'
+
+setPlatformHelpers(platformHelpers)
+
+export default process

package/entrypoints/web.js

@@ -0,0 +1,7 @@
+import { setPlatformHelpers } from '../platformHelpers/index.js'
+import * as platformHelpers from '../platformHelpers/web.js'
+import { process } from '../process.js'
+
+setPlatformHelpers(platformHelpers)
+
+export default process

package/matcher.js

@@ -0,0 +1,127 @@
+const ROOT_STYLE_PROP_NAME = 'style'
+const PART_REGEX = /::?part\(([^)]+)\)/
+
+const isArray = Array.isArray || function (arg) {
+  return Object.prototype.toString.call(arg) === '[object Array]'
+}
+
+export default function matcher (
+  styleName,
+  fileStyles,
+  globalStyles,
+  localStyles,
+  inlineStyleProps
+) {
+  // inlineStyleProps is used as an implicit indication of:
+  // w/ inlineStyleProps -- process all styles and return an object with style props
+  // w/o inlineStyleProps -- default inline styles addition is done externally,
+  //                     return styles object directly
+  const legacy = !inlineStyleProps
+
+  // Process styleName through the `classnames`-like function.
+  // This allows to specify styleName as an array or an object,
+  // not just the string.
+  styleName = cc(styleName)
+
+  const htmlClasses = (styleName || '').split(' ').filter(Boolean)
+  const resProps = getStyleProps(htmlClasses, fileStyles, legacy)
+
+  // In the legacy mode, return root styles right away
+  if (legacy) return resProps[ROOT_STYLE_PROP_NAME]
+
+  // 1. Add global styles
+  appendStyleProps(resProps, getStyleProps(htmlClasses, globalStyles))
+
+  // 2. Add local styles
+  appendStyleProps(resProps, getStyleProps(htmlClasses, localStyles))
+
+  // 3. Add inline styles
+  appendStyleProps(resProps, inlineStyleProps)
+  return resProps
+}
+
+function appendStyleProps (target, appendProps) {
+  for (const propName in appendProps) {
+    if (target[propName]) {
+      if (isArray(appendProps[propName])) {
+        target[propName] = target[propName].concat(appendProps[propName])
+      } else {
+        target[propName].push(appendProps[propName])
+      }
+    } else {
+      target[propName] = appendProps[propName]
+    }
+  }
+}
+
+// Process all styles, including the ::part() ones.
+function getStyleProps (htmlClasses, styles, legacyRootOnly) {
+  const res = {}
+  for (const selector in styles) {
+    // Find out which part (or root) this selector is targeting
+    const match = selector.match(PART_REGEX)
+    const attr = match ? getPropName(match[1]) : ROOT_STYLE_PROP_NAME
+
+    // Don't process part if legacyRootOnly is specified
+    if (legacyRootOnly && attr !== ROOT_STYLE_PROP_NAME) continue
+
+    // Strip ::part() if it exists
+    const pureSelector = selector.replace(PART_REGEX, '')
+
+    // Check if the selector is matching our list of existing classes
+    const cssClasses = pureSelector.split('.')
+    if (!arrayContainedInArray(cssClasses, htmlClasses)) continue
+
+    // Push selector's style to the according part's array of styles.
+    // We have a nested array structure here to account for the selector specificity.
+    // This way styles for selector with 3 classes take priority
+    // over selectors with 2 classes, etc.
+
+    // Note: Specificity here does not strictly equal the standard
+    //       since we only use classes to increase the specificity.
+    //       In future this might change when we add support for tags, but for now
+    //       it is a single digit increment starting from 0 and equalling the amount
+    //       of classes in the selector.
+    const specificity = cssClasses.length - 1
+    if (!res[attr]) res[attr] = []
+    if (!res[attr][specificity]) res[attr][specificity] = []
+    res[attr][specificity].push(styles[selector])
+  }
+  return res
+}
+
+function getPropName (name) {
+  return name + 'Style'
+}
+
+function arrayContainedInArray (cssClasses, htmlClasses) {
+  for (let i = 0; i < cssClasses.length; i++) {
+    if (htmlClasses.indexOf(cssClasses[i]) === -1) return false
+  }
+  return true
+};
+
+// classcat 4.0.2
+// https://github.com/jorgebucaran/classcat
+
+function cc (names) {
+  let i
+  let len
+  let tmp = typeof names
+  let out = ''
+
+  if (tmp === 'string' || tmp === 'number') return names || ''
+
+  if (isArray(names) && names.length > 0) {
+    for (i = 0, len = names.length; i < len; i++) {
+      if ((tmp = cc(names[i])) !== '') out += (out && ' ') + tmp
+    }
+  } else {
+    for (i in names) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (names.hasOwnProperty(i) && names[i]) out += (out && ' ') + i
+    }
+  }
+
+  return out
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@cssxjs/runtime",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Dynamically resolve styleName in RN with support for multi-class selectors (for easier modifiers)",
+  "keywords": [
+    "babel",
+    "babel-plugin",
+    "react-native",
+    "stylename",
+    "style"
+  ],
+  "exports": {
+    "./entrypoints/web": "./entrypoints/web.js",
+    "./entrypoints/react-native": "./entrypoints/react-native.js",
+    "./entrypoints/web-teamplay": "./entrypoints/web-teamplay.js",
+    "./entrypoints/react-native-teamplay": "./entrypoints/react-native-teamplay.js",
+    "./constants": "./constants.cjs",
+    "./dimensions": "./dimensions.js"
+  },
+  "type": "module",
+  "scripts": {
+    "test": "mocha"
+  },
+  "author": "Pavel Zhukov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/startupjs/startupjs"
+  },
+  "dependencies": {
+    "@nx-js/observer-util": "^4.1.3",
+    "css-viewport-units-transform": "^0.10.2",
+    "deepmerge": "^3.2.0",
+    "micro-memoize": "^3.0.1"
+  },
+  "devDependencies": {
+    "@startupjs/css-to-react-native-transform": "^2.1.0-0",
+    "mocha": "^8.1.1"
+  },
+  "peerDependencies": {
+    "react-native": "*",
+    "teamplay": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "teamplay": {
+      "optional": true
+    }
+  },
+  "gitHead": "a80a44b4d14c116871ca03997ce772b6beabf5d8"
+}

package/platformHelpers/index.js

@@ -0,0 +1,32 @@
+// injection of platformHelpers
+
+let platformHelpers
+
+export function setPlatformHelpers (newPlatformHelpers) {
+  if (platformHelpers === newPlatformHelpers) return
+  platformHelpers = newPlatformHelpers
+}
+
+export function getPlatformHelpers () {
+  return platformHelpers
+}
+
+// facades to call the currently injected platform helper functions
+
+export function getDimensions (...args) {
+  try {
+    return platformHelpers.getDimensions(...args)
+  } catch (err) {
+    console.error('[cssxjs] platform helpers \'getDimensions\' is not specified. Babel is probably misconfigured')
+    throw err
+  }
+}
+
+export function getPlatform (...args) {
+  try {
+    return platformHelpers.getPlatform(...args)
+  } catch (err) {
+    console.error('[cssxjs] platform helpers \'getPlatform\' is not specified. Babel is probably misconfigured')
+    throw err
+  }
+}

package/platformHelpers/react-native.js

@@ -0,0 +1,9 @@
+import { Dimensions, Platform } from 'react-native'
+
+export function getDimensions () {
+  return Dimensions.get('window')
+}
+
+export function getPlatform () {
+  return Platform.OS
+}

package/platformHelpers/web.js

@@ -0,0 +1,14 @@
+export function getDimensions () {
+  if (typeof window === 'undefined' || !window.innerWidth || !window.innerHeight) {
+    console.warn('[cssx] No "window" global variable. Falling back to constant window width and height of 1024x768')
+    return { width: 1024, height: 768 }
+  }
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }
+}
+
+export function getPlatform () {
+  return 'web'
+}

package/process.js

@@ -0,0 +1,107 @@
+import { process as dynamicProcess } from './vendor/react-native-dynamic-style-processor/index.js'
+import dimensions from './dimensions.js'
+import singletonVariables, { defaultVariables } from './variables.js'
+import matcher from './matcher.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\(/
+
+export function process (
+  styleName,
+  fileStyles,
+  globalStyles,
+  localStyles,
+  inlineStyleProps
+) {
+  fileStyles = transformStyles(fileStyles)
+  globalStyles = transformStyles(globalStyles)
+  localStyles = transformStyles(localStyles)
+
+  const res = matcher(
+    styleName, fileStyles, globalStyles, localStyles, inlineStyleProps
+  )
+  // flatten styles into single objects
+  for (const propName in res) {
+    if (Array.isArray(res[propName])) {
+      res[propName] = res[propName].flat(10)
+      res[propName] = Object.assign({}, ...res[propName])
+    }
+  }
+  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)
+  strStyles = strStyles.replace(VARS_REGEX, (match, varName, varDefault) => {
+    let res
+    res = singletonVariables[varName] ?? defaultVariables[varName] ?? varDefault
+    if (typeof res === 'string') {
+      res = res.trim()
+      // replace 'px' value with a pure number
+      res = res.replace(/px$/, '')
+      // sometimes compiler returns wrapped brackets. Remove them
+      const bracketsCount = res.match(/^\(+/)?.[0]?.length || 0
+      res = res.substring(bracketsCount, res.length - bracketsCount)
+    }
+    if (!isNumeric(res)) {
+      res = `"${res}"`
+    }
+    return res
+  })
+  return JSON.parse(strStyles)
+}
+
+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 (hasVariables(styles)) {
+      // Dynamically process css variables.
+      // This will also auto-trigger rerendering on variable change when cache is not used
+      styles = replaceVariables(styles)
+    }
+
+    return styles
+  } else {
+    return {}
+  }
+}
+
+// If @media is used, force trigger access to the observable value.
+// `dimensions` is an observed Proxy so
+// whenever its value changes the according components will
+// automatically rerender.
+// The change is triggered globally in startupjs/plugins/cssMediaUpdater.plugin.js
+export function listenForDimensionsChange () {
+  // eslint-disable-next-line no-unused-expressions
+  if (dimensions.width) true
+}
+
+function isNumeric (num) {
+  return (typeof num === 'number' || (typeof num === 'string' && num.trim() !== '')) && !isNaN(num)
+}

package/processCached.js

@@ -0,0 +1,74 @@
+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
+
+export const process = singletonMemoize(_process, {
+  cacheName: 'styles',
+  // IMPORTANT: This should be the same as the ones which go into the singletonMemoize function
+  normalizer: (styleName, fileStyles, globalStyles, localStyles, inlineStyleProps) => simpleNumericHash(JSON.stringify([
+    styleName,
+    fileStyles?.__hash__ || fileStyles,
+    globalStyles?.__hash__ || globalStyles,
+    localStyles?.__hash__ || localStyles,
+    inlineStyleProps
+  ])),
+  // 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)
+    if (watchWidthChange) {
+      // trigger rerender when cache is used
+      listenForDimensionsChange()
+      // Return the dimensionsWidth value itself to force
+      // the affected cache to recalculate
+      args.dimensionsWidth = dimensions.width
+    }
+    if (hasVariables(fileStyles, globalStyles, localStyles)) {
+      const variableNames = getVariableNames(fileStyles, globalStyles, localStyles)
+      // trigger rerender when cache is used
+      listenForVariablesChange(variableNames)
+      // Return the variable values themselves to force
+      // the affected cache to recalculate
+      for (const variableName of variableNames) {
+        args['VAR_' + variableName] = singletonVariables[variableName]
+      }
+    }
+    return simpleNumericHash(JSON.stringify(args))
+  }
+})
+
+function getVariableNames (...styleObjects) {
+  let res = []
+  for (const styleObject of styleObjects) {
+    res = res.concat(_getVariableNames(styleObject))
+  }
+  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
+}
+
+// If var() is used, force trigger access to the observable value.
+// `singletonVariables` is an observed Proxy so
+// whenever its value changes the according components will
+// automatically rerender.
+function listenForVariablesChange (variables = []) {
+  for (const variable of variables) {
+    // eslint-disable-next-line no-unused-expressions
+    if (singletonVariables[variable]) true
+  }
+}
+
+// ref: https://gist.github.com/hyamamoto/fd435505d29ebfa3d9716fd2be8d42f0?permalink_comment_id=2694461#gistcomment-2694461
+function simpleNumericHash (s) {
+  let i, h
+  for (i = 0, h = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  return h
+}

package/variables.js

@@ -0,0 +1,9 @@
+import { observable } from '@nx-js/observer-util'
+
+export let defaultVariables = {}
+
+export default observable({})
+
+export function setDefaultVariables (variables = {}) {
+  defaultVariables = { ...variables }
+}

package/vendor/react-native-css-media-query-processor/README.md

@@ -0,0 +1,8 @@
+# Credits
+
+[kristerkary](https://github.com/kristerkari)
+
+Original code taken from:
+https://github.com/kristerkari/react-native-css-media-query-processor
+
+Original version: 0.21.3

package/vendor/react-native-css-media-query-processor/index.js

@@ -0,0 +1,46 @@
+import merge from 'deepmerge'
+import memoize from 'micro-memoize'
+import mediaQuery from './mediaquery.js'
+import { getPlatform } from '../../platformHelpers/index.js'
+
+const PREFIX = '@media'
+
+function isMediaQuery (str) {
+  return typeof str === 'string' && str.indexOf(PREFIX) === 0
+}
+
+function filterMq (obj) {
+  return Object.keys(obj).filter(key => isMediaQuery(key))
+}
+
+function filterNonMq (obj) {
+  return Object.keys(obj).reduce((out, key) => {
+    if (!isMediaQuery(key) && key !== '__mediaQueries') {
+      out[key] = obj[key]
+    }
+    return out
+  }, {})
+}
+
+const mFilterMq = memoize(filterMq)
+const mFilterNonMq = memoize(filterNonMq)
+
+export function process (obj, matchObject) {
+  const mqKeys = mFilterMq(obj)
+  let res = mFilterNonMq(obj)
+
+  mqKeys.forEach(key => {
+    if (/^@media\s+(not\s+)?(ios|android|dom|macos|web|windows)/i.test(key)) {
+      matchObject.type = getPlatform()
+    } else {
+      matchObject.type = 'screen'
+    }
+
+    const isMatch = mediaQuery.match(obj.__mediaQueries[key], matchObject)
+    if (isMatch) {
+      res = merge(res, obj[key])
+    }
+  })
+
+  return res
+}

package/vendor/react-native-css-media-query-processor/mediaquery.js

@@ -0,0 +1,152 @@
+/*
+Copyright (c) 2014, Yahoo! Inc. All rights reserved.
+Copyrights licensed under the New BSD License.
+See the accompanying LICENSE file for terms.
+*/
+
+export default match
+
+// -----------------------------------------------------------------------------
+
+const RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?\s*$/
+const RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?\s*$/
+
+function match (parsed, values) {
+  if (!parsed) {
+    return false
+  }
+  if (parsed.length === 1) {
+    return matchQuery(parsed[0], values)
+  }
+  return parsed.some(mq => matchQuery(mq, values))
+}
+
+function matchQuery (query, values) {
+  const inverse = query.inverse
+
+  // Either the parsed or specified `type` is "all", or the types must be
+  // equal for a match.
+  const typeMatch = query.type === 'all' || values.type === query.type
+
+  if (query.expressions.length === 0) {
+    // Quit early when `type` doesn't match, but take "not" into account.
+    if ((typeMatch && inverse) || !(typeMatch || inverse)) {
+      return false
+    }
+  }
+
+  const expressionsMatch = query.expressions.every(function (expression) {
+    const feature = expression.feature
+    const modifier = expression.modifier
+    let expValue = expression.value
+    let value = values[feature]
+
+    // Missing or falsy values don't match.
+    if (!value) {
+      return false
+    }
+
+    switch (feature) {
+      case 'orientation':
+      case 'scan':
+        return value.toLowerCase() === expValue.toLowerCase()
+
+      case 'width':
+      case 'height':
+      case 'device-width':
+      case 'device-height':
+        expValue = toPx(expValue)
+        value = toPx(value)
+        break
+
+      case 'resolution':
+        expValue = toDpi(expValue)
+        value = toDpi(value)
+        break
+
+      case 'aspect-ratio':
+      case 'device-aspect-ratio':
+      case /* Deprecated */ 'device-pixel-ratio':
+        expValue = toDecimal(expValue)
+        value = toDecimal(value)
+        break
+
+      case 'grid':
+      case 'color':
+      case 'color-index':
+      case 'monochrome':
+        expValue = parseInt(expValue, 10) || 1
+        value = parseInt(value, 10) || 0
+        break
+    }
+
+    switch (modifier) {
+      case 'min':
+        return value >= expValue
+      case 'max':
+        return value <= expValue
+      default:
+        return value === expValue
+    }
+  })
+
+  const isMatch = typeMatch && expressionsMatch
+
+  if (inverse) {
+    return !isMatch
+  }
+
+  return isMatch
+}
+
+// -- Utilities ----------------------------------------------------------------
+
+function toDecimal (ratio) {
+  let decimal = Number(ratio)
+  let numbers
+
+  if (!decimal) {
+    numbers = ratio.match(/^(\d+)\s*\/\s*(\d+)$/)
+    decimal = numbers[1] / numbers[2]
+  }
+
+  return decimal
+}
+
+function toDpi (resolution) {
+  const value = parseFloat(resolution)
+  const units = String(resolution).match(RE_RESOLUTION_UNIT)[1]
+
+  switch (units) {
+    case 'dpcm':
+      return value / 2.54
+    case 'dppx':
+      return value * 96
+    default:
+      return value
+  }
+}
+
+function toPx (length) {
+  const value = parseFloat(length)
+  const units = String(length).match(RE_LENGTH_UNIT)[1]
+
+  switch (units) {
+    case 'em':
+      return value * 16
+    case 'rem':
+      return value * 16
+    case 'cm':
+      return (value * 96) / 2.54
+    case 'mm':
+      return (value * 96) / 2.54 / 10
+    case 'in':
+      return value * 96
+    case 'pt':
+      return value * 72
+    case 'pc':
+      return (value * 72) / 12
+    default:
+      return value
+  }
+}

package/vendor/react-native-dynamic-style-processor/README.md

@@ -0,0 +1,8 @@
+# Credits
+
+[kristerkary](https://github.com/kristerkari)
+
+Original code taken from:
+https://github.com/kristerkari/react-native-dynamic-style-processor
+
+Original version: 0.21.0

package/vendor/react-native-dynamic-style-processor/index.js

@@ -0,0 +1,52 @@
+import { process as mediaQueriesProcess } from '../react-native-css-media-query-processor/index.js'
+import { transform } from 'css-viewport-units-transform'
+import memoize from 'micro-memoize'
+import { getDimensions } from '../../platformHelpers/index.js'
+
+function omit (obj, omitKey) {
+  return Object.keys(obj).reduce((result, key) => {
+    if (key !== omitKey) {
+      result[key] = obj[key]
+    }
+    return result
+  }, {})
+}
+
+const omitMemoized = memoize(omit)
+
+function viewportUnitsTransform (obj, matchObject) {
+  const hasViewportUnits = '__viewportUnits' in obj
+
+  if (!hasViewportUnits) {
+    return obj
+  }
+  return transform(omitMemoized(obj, '__viewportUnits'), matchObject)
+}
+
+function mediaQueriesTransform (obj, matchObject) {
+  const hasParsedMQs = '__mediaQueries' in obj
+
+  if (!hasParsedMQs) {
+    return obj
+  }
+  return mediaQueriesProcess(obj, matchObject)
+}
+
+export function process (obj) {
+  const matchObject = getMatchObject()
+  return viewportUnitsTransform(
+    mediaQueriesTransform(obj, matchObject),
+    matchObject
+  )
+}
+
+function getMatchObject () {
+  const win = getDimensions()
+  return {
+    width: win.width,
+    height: win.height,
+    orientation: win.width > win.height ? 'landscape' : 'portrait',
+    'aspect-ratio': win.width / win.height,
+    type: 'screen'
+  }
+}