@cssxjs/bundler 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# v0.2.0 (Tue Nov 04 2025)
+
+#### 🚀 Enhancement
+
+- feat: make it work for pure web through a babel plugin [#2](https://github.com/startupjs/cssx/pull/2) ([@cray0000](https://github.com/cray0000))
+- feat: move over styles-related packages from startupjs ([@cray0000](https://github.com/cray0000))
+
+#### ⚠️ Pushed to `master`
+
+- tests: create a general test command which loops through all packages and runs tests. Update tests for babel-plugin-rn-stylename-to-style ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))

package/README.md

@@ -0,0 +1,53 @@
+# cssx bundler
+
+> Compile CSSX styles in React Native and Web bundlers
+
+## Usage
+
+TBD
+
+## Export from stylus and css files
+
+We can export variables directly from stylus into js. Here is an example:
+
+1. In `ShoppingCart/index.styl` file:
+
+```styl
+// allow overrides from global configuration
+$this = merge({
+  bgColor: $UI.colors.primary,
+  height: 10u
+}, $UI.ShoppingCart, true)
+
+.root
+  height: $this.height
+  background-color: $this.bgColor
+
+:export
+  config: $this
+  colors: $UI.colors
+  foobar: 42
+```
+
+2. Now import variables `colors`, `config` and `foobar` in the `ShoppingCart/index.js` file:
+
+```jsx
+import STYLES from './index.styl'
+
+const {
+  config: { bgColor },
+  colors,
+  foobar
+} = STYLES
+
+export default function ShoppingCart () {
+  console.log('Background color is:', bgColor)
+  console.log('Available colors:', colors)
+  console.log('Magic number FooBar:', foobar)
+  return <View styleName='root' />
+}
+```
+
+## MIT License
+
+Copyright (c) 2018 Pavel Zhukov

package/lib/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/lib/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/lib/cssxjsBabelLoader.js

@@ -0,0 +1,18 @@
+// TODO: add support for source maps
+const babel = require('@babel/core')
+
+module.exports = function cssxjsBabelLoader (source) {
+  const filename = this.resourcePath
+  const { platform } = this.query
+
+  return babel.transformSync(source, {
+    filename,
+    babelrc: false,
+    configFile: false,
+    plugins: [
+      [require('babel-preset-cssxjs'), {
+        platform
+      }]
+    ]
+  }).code
+}

package/lib/stylusToCssLoader.js

@@ -0,0 +1,66 @@
+// ref: https://github.com/kristerkari/react-native-stylus-transformer
+const { existsSync } = require('fs')
+const { join } = require('path')
+const stylus = require('stylus')
+
+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
+}

package/metro-babel-transformer.js

@@ -0,0 +1,42 @@
+const stylusToCssLoader = require('./lib/stylusToCssLoader')
+const cssToReactNativeLoader = require('./lib/cssToReactNativeLoader')
+const cssxjsBabelLoader = require('./lib/cssxjsBabelLoader')
+const callLoader = require('./lib/callLoader')
+
+module.exports.transform = async function cssxjsMetroBabelTransform ({
+  src, filename, options: { upstreamTransformer, ...options } = {}
+}) {
+  upstreamTransformer ??= getUpstreamTransformer()
+  const { platform } = options
+
+  // from exotic extensions to js
+  if (/\.styl$/.test(filename)) {
+    // TODO: Refactor `platform` to be just passed externally as an option in metro and in webpack
+    src = callLoader(stylusToCssLoader, src, filename, { platform })
+    src = callLoader(cssToReactNativeLoader, src, filename)
+  } else if (/\.css$/.test(filename)) {
+    src = callLoader(cssToReactNativeLoader, src, filename)
+  }
+
+  // js transformations
+  if (/\.[mc]?[jt]sx?$/.test(filename)) {
+    src = callLoader(cssxjsBabelLoader, src, filename, { platform })
+  }
+
+  return upstreamTransformer.transform({ src, filename, options })
+}
+
+function getUpstreamTransformer () {
+  try {
+    // Expo
+    return require('@expo/metro-config/babel-transformer')
+  } catch (err) {
+    try {
+      // React Native 0.73+
+      return require('@react-native/metro-babel-transformer')
+    } catch (err) {
+      // React Native <0.73
+      return require('metro-react-native-babel-transformer')
+    }
+  }
+}

package/metro-config.js

@@ -0,0 +1,39 @@
+// To pass existing config for modification, pass it as 'upstreamConfig' in options:
+//   config = getDefaultConfig(__dirname, { upstreamConfig })
+exports.getDefaultConfig = function getDefaultConfig (projectRoot, { upstreamConfig } = {}) {
+  upstreamConfig ??= getUpstreamConfig(projectRoot)
+
+  const config = {
+    ...upstreamConfig,
+    transformer: {
+      ...upstreamConfig.transformer,
+      babelTransformerPath: require.resolve('./metro-babel-transformer.js'),
+      unstable_allowRequireContext: true
+    },
+    resolver: {
+      ...upstreamConfig.resolver,
+      sourceExts: [...new Set([
+        ...(upstreamConfig.resolver.sourceExts || []),
+        ...['css', 'styl']
+      ])],
+      unstable_enablePackageExports: true
+    }
+  }
+
+  return config
+}
+
+function getUpstreamConfig (projectRoot) {
+  try {
+    // Expo
+    return require('expo/metro-config').getDefaultConfig(projectRoot)
+  } catch (err) {
+    try {
+      // React Native 0.73+
+      return require('@react-native/metro-config').getDefaultConfig(projectRoot)
+    } catch (err) {
+      // React Native <0.73
+      return require('metro-config').getDefaultConfig()
+    }
+  }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@cssxjs/bundler",
+  "version": "0.2.0",
+  "description": "Compile CSSX styles in React Native and Web bundlers",
+  "exports": {
+    "./metro-config": "./metro-config.js",
+    "./metro-babel-transformer": "./metro-babel-transformer.js",
+    "./lib/callLoader": "./lib/callLoader.js",
+    "./lib/stylusToCssLoader": "./lib/stylusToCssLoader.js",
+    "./lib/cssToReactNativeLoader": "./lib/cssToReactNativeLoader.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo 'No tests yet' && exit 0"
+  },
+  "author": {
+    "name": "Pavel Zhukov",
+    "email": "cray0000@gmail.com"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/core": "^7.0.0",
+    "@cssxjs/babel-plugin-rn-stylename-inline": "^0.2.0",
+    "@startupjs/css-to-react-native-transform": "^2.1.0-0",
+    "babel-preset-cssxjs": "^0.2.0",
+    "stylus": "0.54.7"
+  },
+  "gitHead": "a80a44b4d14c116871ca03997ce772b6beabf5d8"
+}