@cssxjs/babel-plugin-rn-stylename-inline 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# v0.2.0 (Tue Nov 04 2025)
+
+#### 🚀 Enhancement
+
+- feat: refactor all babel plugins to perform early transformation of all code in Program.enter block ([@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))
+- feat: move over styles-related packages from startupjs ([@cray0000](https://github.com/cray0000))
+
+#### 🐛 Bug Fix
+
+- fix(babel-plugin-rn-stylename-to-stylename-inline): fix import aliases support, update tests ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))

package/README.md

@@ -0,0 +1,76 @@
+# @cssxjs/babel-plugin-rn-stylename-inline
+
+Adds support for in-JS template strings `css\`\`` and `styl\`\``
+for CSS styles for react-native.
+
+Must be used together with `@cssxjs/babel-plugin-rn-stylename-to-style` library.
+
+## Options
+
+- `platform` -- what platform the compilation is on. This is passed down to the underlying compiler (for example in Stylus it defines global variables `$PLATFORM = "web"` and `__WEB__ = true`). Example: `"web"` or `"ios"` or `"android"`. Default: `'web'`.
+- `magicImports` -- an array of magic imports to use. Example: `["cssxjs", "startupjs"]`. Default: `["cssxjs"]`.
+
+## Example
+
+### File-level scope (global to file)
+
+```jsx
+import React from 'react'
+import { View } from 'react-native'
+import { css } from 'cssxjs'
+
+export default function Card () {
+  return <View styleName='card active'><Line /></View>
+}
+function Line () {
+  return <View styleName='line' />
+}
+css`
+  .card {
+    padding: 8px 16px;
+  }
+  .line {
+    margin-top: 16px;
+    border-radius: 8px;
+  }
+  .active {
+    background-color: red;
+  }
+`
+```
+
+### Local component scope (inside particular react component function)
+
+```jsx
+import React from 'react'
+import { View } from 'react-native'
+import { css, styl } from 'cssxjs'
+
+export default function Card () {
+  return <View styleName='root active'><Line /></View>
+  // .root will be scoped only to this specific component
+  styl`
+    .root
+      padding: 8px 16px
+  `
+}
+function Line () {
+  return <View styleName='root' />
+  // .root will be scoped only to this specific component
+  css`
+    .root {
+      margin-top: 16px;
+      border-radius: 8px;
+    }
+  `
+}
+// you can use global- and local- scoped styles together
+styl`
+  .active
+    background-color red
+`
+```
+
+## License
+
+MIT

package/compilers/css.js

@@ -0,0 +1,13 @@
+// TODO: Move loaders into standalone libs
+const cssLoader = require('@cssxjs/bundler/lib/cssToReactNativeLoader')
+const callLoader = require('@cssxjs/bundler/lib/callLoader')
+const { stripExport } = require('./helpers')
+
+module.exports = function compileCss (src) {
+  return stripExport(
+    callLoader(
+      cssLoader,
+      src
+    )
+  )
+}

package/compilers/helpers.js

@@ -0,0 +1,3 @@
+exports.stripExport = function stripExport (source) {
+  return source.replace(/^(?:export\s+default\s*|module\.exports\s*=\s*)/, '')
+}

package/compilers/index.js

@@ -0,0 +1,7 @@
+const css = require('./css')
+const styl = require('./styl')
+
+module.exports = {
+  css,
+  styl
+}

package/compilers/styl.js

@@ -0,0 +1,14 @@
+// TODO: Move loaders into standalone libs
+const stylLoader = require('@cssxjs/bundler/lib/stylusToCssLoader')
+const callLoader = require('@cssxjs/bundler/lib/callLoader')
+const compileCss = require('./css')
+
+module.exports = function compileStyl (src, filename, options) {
+  src = callLoader(
+    stylLoader,
+    src,
+    filename,
+    options
+  )
+  return compileCss(src)
+}

package/index.js

@@ -0,0 +1,126 @@
+const { GLOBAL_NAME, LOCAL_NAME } =
+  require('@cssxjs/runtime/constants')
+const template = require('@babel/template').default
+const parser = require('@babel/parser')
+const t = require('@babel/types')
+const compilers = require('./compilers')
+const DEFAULT_MAGIC_IMPORTS = ['cssxjs']
+const DEFAULT_PLATFORM = 'web'
+
+const buildConst = template(`
+  const %%variable%% = %%value%%
+`)
+
+module.exports = () => ({
+  visitor: {
+    Program: {
+      enter ($this, state) {
+        const usedCompilers = getUsedCompilers($this, state)
+        $this.traverse(getVisitor({ $program: $this, usedCompilers }), state)
+      }
+    }
+  }
+})
+
+const getVisitor = ({ $program, usedCompilers }) => ({
+  TaggedTemplateExpression: ($this, state) => {
+    // 0. process only templates which are in usedCompilers (imported from our library)
+    if (!shouldProcess($this, usedCompilers)) return
+
+    // I. validate template
+    validateTemplate($this, usedCompilers)
+
+    const compiler = usedCompilers[$this.node.tag.name]
+
+    // II. compile template
+    const source = $this.node.quasi.quasis[0]?.value?.raw || ''
+    const filename = state.file?.opts?.filename
+    const platform = state.opts?.platform || DEFAULT_PLATFORM
+    const compiledString = compiler(source, filename, { platform })
+    const compiledExpression = parser.parseExpression(compiledString)
+
+    // III. find parent function or program
+    const $function = $this.getFunctionParent()
+
+    // IV. LOCAL. if parent is function -- handle local
+    if ($function) {
+      // 1. define a `const` variable at the top of the file
+      //    with the unique identifier
+      const localIdentifier = $program.scope.generateUidIdentifier('localCssInstance')
+      insertAfterImports($program, buildConst({
+        variable: localIdentifier,
+        value: compiledExpression
+      }))
+
+      // 2. reassign this unique identifier to a constant LOCAL_NAME
+      //    in the scope of current function
+      $function.get('body').unshiftContainer('body', buildConst({
+        variable: t.identifier(LOCAL_NAME),
+        value: localIdentifier
+      }))
+
+    // V. GLOBAL. if parent is program -- handle global
+    } else {
+      // 1. define a `const` variable at the top of the file
+      //    with the constant GLOBAL_NAME
+      insertAfterImports($program, buildConst({
+        variable: t.identifier(GLOBAL_NAME),
+        value: compiledExpression
+      }))
+    }
+
+    // VI. Remove template expression after processing
+    $this.remove()
+
+    // TODO: Throw error if global styles were already added or
+    //       local styles were already added to the same function scope
+  }
+})
+
+function insertAfterImports ($program, expressionStatement) {
+  const lastImport = $program
+    .get('body')
+    .filter($i => $i.isImportDeclaration())
+    .pop()
+
+  if (lastImport) {
+    lastImport.insertAfter(expressionStatement)
+  } else {
+    $program.unshift(expressionStatement)
+  }
+}
+
+function shouldProcess ($template, usedCompilers = {}) {
+  if (!$template.get('tag').isIdentifier()) return
+  if (!usedCompilers[$template.node.tag.name]) return
+  return true
+}
+
+function validateTemplate ($template, usedCompilers = {}) {
+  const { node: { quasi } } = $template
+
+  if (quasi.expressions.length > 0) {
+    throw $template.buildCodeFrameError(`
+      [@cssxjs/babel-plugin-rn-stylename-inline] Expression interpolations are not supported in css\`\` and styl\`\`.
+    `)
+  }
+}
+
+function getUsedCompilers ($program, state) {
+  const res = {}
+  const magicImports = state.opts.magicImports || DEFAULT_MAGIC_IMPORTS
+  for (const $import of $program.get('body')) {
+    if (!$import.isImportDeclaration()) continue
+    if (!magicImports.includes($import.node.source.value)) continue
+    for (const $specifier of $import.get('specifiers')) {
+      if (!$specifier.isImportSpecifier()) continue
+      const { local, imported } = $specifier.node
+      if (compilers[imported.name]) {
+        res[local.name] = compilers[imported.name]
+        $specifier.remove()
+      }
+    }
+    if ($import.get('specifiers').length === 0) $import.remove()
+  }
+  return res
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@cssxjs/babel-plugin-rn-stylename-inline",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Use styleName attributes with inline css and styl template strings",
+  "keywords": [
+    "babel",
+    "babel-plugin",
+    "react",
+    "lazy",
+    "import"
+  ],
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "Pavel Zhukov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/startupjs/startupjs"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.0.0",
+    "@babel/template": "^7.4.0",
+    "@babel/types": "^7.0.0",
+    "@cssxjs/bundler": "^0.2.0",
+    "@cssxjs/runtime": "^0.2.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "babel-plugin-tester": "^9.1.0",
+    "jest": "^30.0.4"
+  },
+  "gitHead": "a80a44b4d14c116871ca03997ce772b6beabf5d8"
+}