@cssxjs/babel-plugin-rn-stylename-to-style 0.2.13 → 0.2.14

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.2.14 (Sat Nov 08 2025)
+
+#### 🐛 Bug Fix
+
+- fix(babel-plugin-rn-stylename-to-style): add a workaround for adding runtime - use named export for it ([@cray0000](https://github.com/cray0000))
+
+#### Authors: 1
+
+- Pavel Zhukov ([@cray0000](https://github.com/cray0000))
+
+---
+
 # v0.2.13 (Sat Nov 08 2025)
 
 #### 🐛 Bug Fix

package/index.js

@@ -2,13 +2,15 @@ const nodePath = require('path')
 const t = require('@babel/types')
 const template = require('@babel/template').default
 const { GLOBAL_NAME, LOCAL_NAME } = require('@cssxjs/runtime/constants')
+const { addNamed } = require('@babel/helper-module-imports')
 
 const COMPILERS = ['css', 'styl', 'pug'] // used in rn-stylename-inline. TODO: move to a shared place
 const RUNTIME_LIBRARY = 'cssxjs/runtime'
 const STYLE_NAME_REGEX = /(?:^s|S)tyleName$/
 const STYLE_REGEX = /(?:^s|S)tyle$/
 const ROOT_STYLE_PROP_NAME = 'style'
-const RUNTIME_PROCESS_NAME = 'cssx'
+const RUNTIME_IMPORT_NAME = 'runtime'
+const RUNTIME_FRIENDLY_NAME = 'cssx'
 const OPTIONS_CACHE = ['teamplay']
 const OPTIONS_REACT_TYPES = ['react-native', 'web']
 const DEFAULT_MAGIC_IMPORTS = ['cssxjs', 'startupjs']
@@ -19,30 +21,52 @@ const buildSafeVar = template.expression(`
   typeof %%variable%% !== 'undefined' && %%variable%%
 `)
 
-const buildImport = template(`
-  import %%name%% from %%runtimePath%%
-`)
-
-const buildRequire = template(`
-  const %%name%% = require(%%runtimePath%%)
-`)
-
 const buildJsonParse = template(`
   const %%name%% = JSON.parse(%%jsonStyle%%)
 `)
 
+const buildRuntimeVar = template(`
+  const %%name%% = %%imported%%
+`)
+
 module.exports = function (babel) {
   let styleHash = {}
   let cssIdentifier
   let hasObserver
   let $program
   let usedCompilers
+  let runtime
+
+  function getOrCreateRuntime (state) {
+    if (runtime) return runtime
+    const runtimePath = getRuntimePath($program, state, hasObserver)
+    // when using addDefault for some reason Expo doesn't keep the imported variable correctly,
+    // because of this we hack it by importing first and then assigning to a const with the final name
+    // used later in the code to call the runtime function.
+    const imported = addNamedImport($program, RUNTIME_IMPORT_NAME, runtimePath)
+    runtime = $program.scope.generateUidIdentifier(RUNTIME_FRIENDLY_NAME)
+
+    const expression = buildRuntimeVar({
+      name: runtime,
+      imported
+    })
+    const lastImport = $program
+      .get('body')
+      .filter(p => p.isImportDeclaration())
+      .pop()
+    if (lastImport) {
+      lastImport.insertAfter(expression)
+    } else {
+      $program.unshiftContainer('body', expression)
+    }
+
+    return runtime
+  }
 
   function getStyleFromExpression (expression, state) {
-    state.hasTransformedClassName = true
     const cssStyles = cssIdentifier.name
     const processCall = t.callExpression(
-      state.reqName,
+      getOrCreateRuntime(state),
       [expression, t.identifier(cssStyles)]
     )
     return processCall
@@ -153,9 +177,8 @@ module.exports = function (babel) {
     }
 
     // Create a `process` function call
-    state.hasTransformedClassName = true
     const processCall = t.callExpression(
-      state.reqName,
+      getOrCreateRuntime(state),
       [
         styleName
           ? (
@@ -246,6 +269,7 @@ module.exports = function (babel) {
       hasObserver = undefined
       $program = undefined
       usedCompilers = undefined
+      runtime = undefined
     },
     visitor: {
       Program: {
@@ -253,7 +277,6 @@ module.exports = function (babel) {
         enter ($this, state) {
           // 1. Init
           usedCompilers = getUsedCompilers($this, state)
-          state.reqName = $this.scope.generateUidIdentifier(RUNTIME_PROCESS_NAME)
           $program = $this
 
           // 2. Run early traversal of everything
@@ -364,9 +387,8 @@ module.exports = function (babel) {
               if (!$callee.isIdentifier()) return
               if (!usedCompilers.has($callee.node.name)) return
               // Create a `process` function call
-              state.hasTransformedClassName = true
               const processCall = t.callExpression(
-                state.reqName,
+                getOrCreateRuntime(state),
                 [
                   $this.get('arguments.0')
                     ? $this.get('arguments.0').node
@@ -384,26 +406,6 @@ module.exports = function (babel) {
               $this.replaceWith(processCall)
             }
           }, state)
-
-          // 3. Finalize
-          if (!state.hasTransformedClassName) {
-            return
-          }
-
-          const lastImportOrRequire = $this
-            .get('body')
-            .filter(p => p.isImportDeclaration() || isRequire(p.node))
-            .pop()
-
-          if (lastImportOrRequire) {
-            const useImport = state.opts.useImport == null ? true : state.opts.useImport
-            const runtimePath = getRuntimePath($this, state, hasObserver)
-            lastImportOrRequire.insertAfter(
-              useImport
-                ? buildImport({ name: state.reqName, runtimePath: t.stringLiteral(runtimePath) })
-                : buildRequire({ name: state.reqName, runtimePath: t.stringLiteral(runtimePath) })
-            )
-          }
         }
       }
     }
@@ -582,3 +584,10 @@ function getRuntimePath ($node, state, hasObserver) {
   }
   return runtimePath
 }
+
+function addNamedImport ($program, name, sourceName) {
+  return addNamed($program, name, sourceName, {
+    importedType: 'es6',
+    importPosition: 'after'
+  })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxjs/babel-plugin-rn-stylename-to-style",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "publishConfig": {
     "access": "public"
   },
@@ -23,18 +23,19 @@
     "url": "https://github.com/startupjs/startupjs"
   },
   "dependencies": {
+    "@babel/helper-module-imports": "^7.0.0",
     "@babel/template": "^7.4.0",
     "@babel/types": "^7.0.0",
-    "@cssxjs/runtime": "^0.2.13"
+    "@cssxjs/runtime": "^0.2.14"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.0.0",
-    "@cssxjs/babel-plugin-react-pug": "^0.2.13",
+    "@cssxjs/babel-plugin-react-pug": "^0.2.14",
     "babel-plugin-tester": "^9.1.0",
     "jest": "^30.0.4"
   },
   "peerDependencies": {
     "teamplay": "*"
   },
-  "gitHead": "a560e6b7ed6c0c1725b8b9c2bf241d28a6ce2617"
+  "gitHead": "72b2f3d63ebe86ab75b398036ff27f8abe99f1d4"
 }