fix(babel-plugin-rn-stylename-to-style): add a workaround for adding runtime - use named export for it

Author: cray0000

packages/babel-plugin-rn-stylename-to-style/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,14 +269,14 @@ module.exports = function (babel) {
       hasObserver = undefined
       $program = undefined
       usedCompilers = undefined
+      runtime = undefined
     },
     visitor: {
       Program: {
         // TODO: Refactor this to move the sub-visitor out into getVisitor() function
         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'
+  })
+}

packages/babel-plugin-rn-stylename-to-style/package.json

@@ -23,6 +23,7 @@
     "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"

packages/cssxjs/runtime/react-native-teamplay.js

@@ -1 +1,2 @@
 export { default } from '@cssxjs/runtime/entrypoints/react-native-teamplay'
+export { default as runtime } from '@cssxjs/runtime/entrypoints/react-native-teamplay'

packages/cssxjs/runtime/react-native.js

@@ -1 +1,2 @@
 export { default } from '@cssxjs/runtime/entrypoints/react-native'
+export { default as runtime } from '@cssxjs/runtime/entrypoints/react-native'

packages/cssxjs/runtime/web-teamplay.js

@@ -1 +1,2 @@
 export { default } from '@cssxjs/runtime/entrypoints/web-teamplay'
+export { default as runtime } from '@cssxjs/runtime/entrypoints/web-teamplay'

packages/cssxjs/runtime/web.js

@@ -1 +1,2 @@
 export { default } from '@cssxjs/runtime/entrypoints/web'
+export { default as runtime } from '@cssxjs/runtime/entrypoints/web'

yarn.lock

@@ -335,6 +335,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-module-imports@npm:7.27.1"
+  dependencies:
+    "@babel/traverse": "npm:^7.27.1"
+    "@babel/types": "npm:^7.27.1"
+  checksum: 10c0/e00aace096e4e29290ff8648455c2bc4ed982f0d61dbf2db1b5e750b9b98f318bf5788d75a4f974c151bd318fd549e81dbcab595f46b14b81c12eda3023f51e8
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-imports@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-module-imports@npm:7.25.9"
@@ -345,16 +355,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/helper-module-imports@npm:7.27.1"
-  dependencies:
-    "@babel/traverse": "npm:^7.27.1"
-    "@babel/types": "npm:^7.27.1"
-  checksum: 10c0/e00aace096e4e29290ff8648455c2bc4ed982f0d61dbf2db1b5e750b9b98f318bf5788d75a4f974c151bd318fd549e81dbcab595f46b14b81c12eda3023f51e8
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-transforms@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/helper-module-transforms@npm:7.26.0"
@@ -874,6 +874,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@cssxjs/babel-plugin-rn-stylename-to-style@workspace:packages/babel-plugin-rn-stylename-to-style"
   dependencies:
+    "@babel/helper-module-imports": "npm:^7.0.0"
     "@babel/plugin-syntax-jsx": "npm:^7.0.0"
     "@babel/template": "npm:^7.4.0"
     "@babel/types": "npm:^7.0.0"