@cssxjs/loaders 0.2.7

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# v0.2.7 (Wed Nov 05 2025)
+
+#### 🐛 Bug Fix
+
+- fix: move css and styl loaders into a separate package @cssxjs/loaders ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))

package/callLoader.js

@@ -0,0 +1,22 @@
+// Simple mock to be able to call simple webpack loaders with filename substitution.
+module.exports = function callLoader (loader, source, filename, options = {}) {
+  let isAsync = false
+  let resolveAsync
+  let rejectAsync
+  const markAsync = () => {
+    isAsync = true
+    return (err, result) => {
+      if (err) return rejectAsync(err)
+      resolveAsync(result)
+    }
+  }
+  const result = loader.call({ resourcePath: filename, query: options, async: markAsync }, source)
+  if (isAsync) {
+    return new Promise((resolve, reject) => {
+      resolveAsync = resolve
+      rejectAsync = reject
+    })
+  } else {
+    return result
+  }
+}

package/cssToReactNativeLoader.js

@@ -0,0 +1,86 @@
+// ref: https://github.com/kristerkari/react-native-css-transformer
+const css2rn = require('@startupjs/css-to-react-native-transform').default
+
+const EXPORT_REGEX = /:export\s*\{/
+
+module.exports = function cssToReactNative (source) {
+  source = escapeExport(source)
+  const cssObject = css2rn(source, { parseMediaQueries: true, parsePartSelectors: true })
+  for (const key in cssObject.__exportProps || {}) {
+    cssObject[key] = parseStylValue(cssObject.__exportProps[key])
+  }
+  // save hash to use with the caching system of @startupjs/cache
+  cssObject.__hash__ = simpleNumericHash(JSON.stringify(cssObject))
+  return 'module.exports = ' + JSON.stringify(cssObject)
+}
+
+function parseStylValue (value) {
+  if (typeof value !== 'string') return value
+  // strip single quotes (stylus adds it for the topmost value)
+  // and parens (stylus adds them for values in a hash)
+  // Instead of doing a simple regex replace for both beginning and end,
+  // we only find beginning chars and then cut string from both sides.
+  // This is needed to prevent false-replacing the paren at the end of
+  // values like 'rgba(...)'
+  if (/^['"(]/.test(value)) {
+    const wrapsLength = value.match(/^['"(]+/)[0].length
+    value = value.slice(wrapsLength).slice(0, -wrapsLength)
+  }
+  // hash
+  if (value.charAt(0) === '{') {
+    const hash = JSON.parse(value)
+    for (const key in hash) {
+      hash[key] = parseStylValue(hash[key])
+    }
+    return hash
+  } else if (!isNaN(parseFloat(value))) {
+    return parseFloat(value)
+  } else {
+    return value
+  }
+}
+
+// Process :export properties by wrapping their values in quotes
+function escapeExport (source) {
+  const match = source.match(EXPORT_REGEX)
+  if (!match) return source
+
+  // 1. find closing bracket of :export { ... }
+  const matchIndex = match.index
+  const matchStr = match[0]
+  const matchLength = matchStr.length
+  const start = matchIndex + matchLength
+  let openBr = 1 // Count opened brackets, we start from one already opened
+  let end
+
+  for (let i = start; i < source.length; i++) {
+    if (source.charAt(i) === '}') {
+      --openBr
+    } else if (source.charAt(i) === '{') {
+      ++openBr
+    }
+
+    if (openBr <= 0) {
+      end = i
+      break
+    }
+  }
+  if (!end) return source
+
+  // 2. escape all exported values
+  const properties = source
+    .slice(start, end)
+    .split(';')
+    .map(line => line.replace(/(:\s+)([^'"].*[^'"])$/, '$1\'$2\''))
+    .join(';')
+
+  source = source.slice(0, start) + properties + source.slice(end)
+
+  return 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
+  return h
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@cssxjs/loaders",
+  "version": "0.2.7",
+  "description": "Webpack-compatible loaders for CSSX styles in React Native and Web bundlers",
+  "exports": {
+    "./callLoader": "./callLoader.js",
+    "./stylusToCssLoader": "./stylusToCssLoader.js",
+    "./cssToReactNativeLoader": "./cssToReactNativeLoader.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo 'No tests yet' && exit 0"
+  },
+  "author": {
+    "name": "Pavel Zhukov",
+    "email": "cray0000@gmail.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@startupjs/css-to-react-native-transform": "^2.1.0-1",
+    "stylus": "0.64.0"
+  },
+  "gitHead": "df9297432a485b18a13127558a62df7be263cac2"
+}

package/patches/patchStylusAddUnit.js

@@ -0,0 +1,43 @@
+// add a new custom unit 'u' which is equal to 8px
+const units = require('stylus/lib/units.js')
+const Unit = require('stylus/lib/nodes/unit.js')
+let patched = false
+
+module.exports = function patchStylusAddUnit () {
+  if (patched) return
+  patched = true
+
+  // add the unit itself
+  if (!units.includes('u')) units.push('u')
+
+  /**
+   * a monkey patch to convert the 'type' to be dynamic setter/getter
+   * with the real value stored in a private symbol. This simulates having 'u' unit converted to 'px' * 8 on assignment.
+   *
+   * Original constructor is the following:
+   *
+   *   constructor(val, type) {
+   *     super();
+   *     this.val = val;
+   *     this.type = type;
+   *   }
+   *
+   * this.val and this.type are never reassigned.
+   * This make it possible to hack the this.type assignment specifically by auto-multiplying the this.val by 8
+   * during the attempt to assign the 'u' to this.type
+   */
+
+  const TYPE = Symbol('unit.type')
+  Object.defineProperty(Unit.prototype, 'type', {
+    configurable: true,
+    enumerable: true,
+    get () { return this[TYPE] },
+    set (t) {
+      if (t === 'u') {
+        t = 'px'
+        if (typeof this.val === 'number') this.val = this.val * 8
+      }
+      this[TYPE] = t
+    }
+  })
+}

package/stylusToCssLoader.js

@@ -0,0 +1,70 @@
+// ref: https://github.com/kristerkari/react-native-stylus-transformer
+const { existsSync } = require('fs')
+const { join } = require('path')
+const stylus = require('stylus')
+const patchStylusAddUnit = require('./patches/patchStylusAddUnit.js')
+
+// apply patches
+patchStylusAddUnit()
+
+const PROJECT_STYLES_PATH = join(process.cwd(), 'styles/index.styl')
+let UI_STYLES_PATH
+
+function renderToCSS (src, filename, { platform } = {}) {
+  const compiler = stylus(src)
+  compiler.set('filename', filename)
+
+  if (platform) {
+    compiler.define('$PLATFORM', platform)
+    compiler.define(`__${platform.toUpperCase()}__`, true)
+  }
+
+  if (checkUiStylesExist()) {
+    compiler.import(UI_STYLES_PATH)
+  }
+
+  // TODO: Make this a setting
+  if (checkProjectStylesExist()) {
+    compiler.import(PROJECT_STYLES_PATH)
+  }
+
+  let compiled
+  compiler.render(function (err, res) {
+    if (err) {
+      throw new Error(err)
+    }
+    compiled = res
+  })
+
+  return compiled
+}
+
+module.exports = function stylusToReactNative (source) {
+  return renderToCSS(source, this.resourcePath, this.query)
+}
+
+// check if @startupjs/ui is being used to load styles file from it, cache result for 5 seconds
+let uiStylesExist
+let uiStylesLastChecked = 0
+function checkUiStylesExist () {
+  if (uiStylesLastChecked + 5000 > Date.now()) return uiStylesExist
+  uiStylesLastChecked = Date.now()
+  try {
+    // TODO: make this configurable
+    UI_STYLES_PATH = join(require.resolve('@startupjs/ui'), '../styles/index.styl')
+    uiStylesExist = existsSync(UI_STYLES_PATH)
+  } catch {
+    uiStylesExist = false
+  }
+  return uiStylesExist
+}
+
+// check if project styles file exist, cache result for 5 seconds
+let projectStylesExist
+let projectStylesLastChecked = 0
+function checkProjectStylesExist () {
+  if (projectStylesLastChecked + 5000 > Date.now()) return projectStylesExist
+  projectStylesLastChecked = Date.now()
+  projectStylesExist = existsSync(PROJECT_STYLES_PATH)
+  return projectStylesExist
+}