@cssxjs/babel-plugin-rn-stylename-to-style 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# 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: add TypeScript support, write a more comprehensive example in TSX ([@cray0000](https://github.com/cray0000))
+- feat(runtime): implement support for both React Native and pure Web ([@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))
+
+#### ⚠️ 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,330 @@
+# @startupjs/babel-plugin-rn-stylename-to-style
+
+Transform JSX `styleName` property to `style` property in react-native. The `styleName` attribute and syntax are based on [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules#conventions).
+
+## Information
+
+This is the fork of https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style
+
+The differences are:
+
+1. Support resolving multi-class selectors in CSS:
+
+```jsx
+import classnames from 'classnames'
+
+function Button ({
+  variant,  // [string] 'primary' | 'secondary'
+  dark,     // [bool]
+  disabled  // [bool]
+}) {
+  return (
+    <Text
+      styleName={classnames('button', [variant, { dark, disabled }])}
+    >CLICK ME</Text>
+  )
+}
+```
+
+```sass
+.button
+  background-color: blue
+  &.primary
+    color: #ff0000
+    &.disabled
+      color: rgba(#ff0000, 0.5)
+  &.secondary
+    color: #00ff00
+    &.disabled
+      color: rgba(#00ff00, 0.5)
+  &.disabled
+    color: #777
+
+.dark
+  &.button
+    background-color: purple
+    &.primary
+      color: white
+      &.disabled
+        color: #ddd
+  &.disabled
+    color: #eee
+```
+
+And what's important is that selectors` specificity is properly emulated. For example:
+
+Styles for `.button.primary.disabled` (specificity *30*) will override styles of `.button.disabled` (specificity *20*),
+even though `.button.disabled` is written later in the CSS.
+
+This simple change brings a lot more capabilities in theming your components for a dynamic look.
+
+2. Convert any `*StyleName` attribute to the according `*Style` attribute. This is very useful for passing the sub-element styles (which are usually exposed by react-native libraries) directly from CSS.
+
+3. If the `styleName` value is an object or an array, automatically pipe it through the `classnames`-like library.
+
+4. Support for multiple named css file imports is removed
+
+## Usage
+
+**WARNING:** This plugin is already built in into the `babel-preset-startupjs` and is included into the default StartupJS project.
+
+If you want to use this plugin separately from StartupJS:
+
+### Step 1: Install
+
+```sh
+yarn add --dev @startupjs/babel-plugin-rn-stylename-to-style
+```
+
+or
+
+```sh
+npm install --save-dev @startupjs/babel-plugin-rn-stylename-to-style
+```
+
+### Step 2: Configure `.babelrc`
+
+You must give one or more file extensions inside an array in the plugin options.
+
+```
+{
+  "presets": [
+    "react-native"
+  ],
+  "plugins": [
+    ["react-native-dynamic-stylename-to-style", {
+      "extensions": ["css"]
+    }]
+  ]
+}
+```
+
+### Plugin Options
+
+#### `extensions`
+
+**Required**
+
+List of css extensions to process (`css`, `styl`, `sass`, etc.)
+
+#### `useImport`
+
+**Default:** `false`
+
+Whether to generate ESM `import` instead of CJS `require`.
+
+#### `parseJson`
+
+**Default:** `false`
+
+Whether the imported css is expected to be a JSON string or an object.
+If this flag is specified then JSON string is expected and it will do `JSON.parse` on it.
+
+#### `cache`
+
+**Default:** `undefined`
+
+Whether to use integration with some caching library. Currently supported ones:
+- `"teamplay"`
+
+#### `platform`
+
+**Default:** `'web'`
+
+Which platform is targeted for compilation. Supported ones:
+- `"web"`
+- `"react-native"`
+
+## Syntax
+
+## Anonymous reference
+
+Anonymous reference can be used when there is only one stylesheet import.
+
+### Single class
+
+```jsx
+import "./Button.css";
+
+<View styleName="wrapper">
+  <Text>Foo</Text>
+</View>;
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```jsx
+import Button from "./Button.css";
+
+<View style={Button.wrapper}>
+  <Text>Foo</Text>
+</View>;
+```
+
+### Multiple classes
+
+```jsx
+import "./Button.css";
+
+<View styleName="wrapper red-background">
+  <Text>Foo</Text>
+</View>;
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```jsx
+import Button from "./Button.css";
+
+<View style={[Button.wrapper, Button["red-background"]]}>
+  <Text>Foo</Text>
+</View>;
+```
+
+### Expression
+
+```jsx
+import "./Button.css";
+const name = "wrapper";
+
+<View styleName={name}>
+  <Text>Foo</Text>
+</View>;
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```jsx
+import Button from "./Button.css";
+const name = "wrapper";
+
+<View
+  style={(name || "")
+    .split(" ")
+    .filter(Boolean)
+    .map(function(name) {
+      Button[name];
+    })}
+>
+  <Text>Foo</Text>
+</View>;
+```
+
+### Expression with ternary
+
+```jsx
+import "./Button.css";
+
+const condition = true;
+const name = "wrapper";
+
+<View styleName={condition ? name : "bar"}>
+  <Text>Foo</Text>
+</View>;
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```jsx
+import Button from "./Button.css";
+
+const condition = true;
+const name = "wrapper";
+
+<View
+  style={((condition ? name : "bar") || "")
+    .split(" ")
+    .filter(Boolean)
+    .map(function(name) {
+      Button[name];
+    })}
+>
+  <Text>Foo</Text>
+</View>;
+```
+
+### with `styleName` and `style`:
+
+```jsx
+import "./Button.css";
+
+<View styleName="wrapper" style={{ height: 10 }}>
+  <Text>Foo</Text>
+</View>;
+```
+
+↓ ↓ ↓ ↓ ↓ ↓
+
+```jsx
+import Button from "./Button.css";
+
+<View style={[Button.wrapper, { height: 10 }]}>
+  <Text>Foo</Text>
+</View>;
+```
+
+## ::part() selector
+
+### Preprocess `part` attribute.
+
+- Each `part` gets its styles from the `{part}Style` prop.
+- `part='root'` is magic -- it's linked to the pure `style` prop.
+
+Here is an example `<Card>` component which specifies its root container, title and footer as stylizable parts:
+
+```jsx
+// Card.js
+
+function Card ({ title }) {
+  return (
+    <View part='root'>
+      <Text part='header'>{title}</Text>
+      <Text part='footer'>Copyright</Text>
+    </View>
+  )
+}
+```
+
+**↓ ↓ ↓ ↓ ↓ ↓**
+
+```jsx
+function Card ({ title, style, headerStyle, footerStyle }) {
+  return (
+    <View style={style}>
+      <Text style={headerStyle}>{title}</Text>
+      <Text style={footerStyle}>Copyright</Text>
+    </View>
+  )
+}
+```
+
+### Preprocess `::part()` selector from CSS file to style any component which uses `part` attributes.
+
+Following an example `<Card>` component above, we can call `<Card>` from the `<App>` and customize its parts styles:
+
+```jsx
+// App.js
+
+import Card from './Card'
+import './index.styl'
+
+function App ({ users }) {
+  return users.map(user => (
+    <Card styleName='user' title={user.name} />
+  ))
+}
+```
+
+```styl
+// index.styl
+
+.user
+  margin-top 16px
+
+  &:part(header)
+    background-color black
+    color white
+
+  &:part(footer)
+    font-weight bold
+```

package/index.cjs

@@ -0,0 +1,580 @@
+const nodePath = require('path')
+const t = require('@babel/types')
+const template = require('@babel/template').default
+
+const COMPILERS = ['css', 'styl'] // 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 OPTIONS_CACHE = ['teamplay']
+const OPTIONS_PLATFORM = ['react-native', 'web']
+
+const GLOBAL_OBSERVER_LIBRARY = 'startupjs'
+const GLOBAL_OBSERVER_DEFAULT_NAME = 'observer'
+
+const { GLOBAL_NAME, LOCAL_NAME } = require('@cssxjs/runtime/constants')
+
+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%%)
+`)
+
+module.exports = function (babel) {
+  let styleHash = {}
+  let cssIdentifier
+  let hasObserver
+  let $program
+  let usedCompilers
+
+  function getStyleFromExpression (expression, state) {
+    state.hasTransformedClassName = true
+    const cssStyles = cssIdentifier.name
+    const processCall = t.callExpression(
+      state.reqName,
+      [expression, t.identifier(cssStyles)]
+    )
+    return processCall
+  }
+
+  function addPartStyleToProps ($jsxAttribute) {
+    const parts = getParts($jsxAttribute.get('value'))
+    const $fnComponent = findReactFnComponent($jsxAttribute)
+    if (!$fnComponent) {
+      throw $jsxAttribute.buildCodeFrameError(`
+        Closest react functional component not found for 'part' attribute.
+        Or your component is named lowercase.'
+      `)
+    }
+    let props = $fnComponent.node.params[0]
+    if (!props) {
+      props = $jsxAttribute.scope.generateUidIdentifier('props')
+      $fnComponent.node.params[0] = props
+    }
+    if (t.isAssignmentPattern(props)) {
+      props = props.left
+    }
+    const styleProps = []
+    if (t.isIdentifier(props)) {
+      for (const part of parts) {
+        const partStyleAttr = convertPartName(part.name)
+        const value = t.memberExpression(props, t.identifier(partStyleAttr))
+        styleProps.push(buildDynamicPart(value, part))
+      }
+    } else if (t.isObjectPattern(props)) {
+      // TODO: optimize to be more efficient than O(n^2)
+      for (const part of parts) {
+        const partStyleAttr = convertPartName(part.name)
+        let exists
+        // Check whether the part style property already exists
+        for (const property of props.properties) {
+          if (!t.isObjectProperty(property)) continue
+          if (property.key.name === partStyleAttr) {
+            styleProps.push(buildDynamicPart(property.value, part))
+            exists = true
+            break
+          }
+        }
+        if (exists) continue
+        // If part style property doesn't exist, inject it
+        const key = t.identifier(partStyleAttr)
+        const value = $jsxAttribute.scope.generateUidIdentifier(partStyleAttr)
+        props.properties.unshift(t.objectProperty(key, value))
+        styleProps.push(buildDynamicPart(value, part))
+      }
+    } else {
+      throw $jsxAttribute.buildCodeFrameError(`
+        Can't find props attribute and embed 'part' style props into it.
+        Supported props formats:
+          - function Hello ({ one, two }) {}
+          - function Hello (props) {}
+      `)
+    }
+    return styleProps
+  }
+
+  function handleStyleNames (jsxOpeningElementPath, state) {
+    if (!Object.keys(styleHash).length) return
+    const styleName = styleHash[ROOT_STYLE_PROP_NAME]?.styleName
+    const partStyle = styleHash[ROOT_STYLE_PROP_NAME]?.partStyle
+    const inlineStyles = []
+
+    // Always process if 'observer' import is found in the file
+    // which is needed for styles caching.
+    // Otherwise, if no 'observer' found and no 'styleName' or 'part' found then skip
+    if (!(hasObserver || styleName || partStyle)) return
+
+    // Check if styleName exists and if it can be processed
+    if (styleName != null) {
+      if (!(
+        t.isStringLiteral(styleName.node.value) ||
+        t.isJSXExpressionContainer(styleName.node.value)
+      )) {
+        throw jsxOpeningElementPath.buildCodeFrameError(`
+          styleName attribute has an unsupported type. It must be either a string or an expression.
+
+          Most likely you wrote styleName=[] instead of styleName={[]}
+        `)
+      }
+    }
+
+    // Gather all inline styles
+    for (const key in styleHash) {
+      if (styleHash[key].style || styleHash[key].partStyle) {
+        let style = []
+        if (styleHash[key].style) {
+          style.push(styleHash[key].style.node.value.expression)
+        }
+        // Part style has higher priority, so must be last
+        if (styleHash[key].partStyle) {
+          style = style.concat(styleHash[key].partStyle)
+        }
+        if (style.length > 1) {
+          style = t.arrayExpression(style)
+        } else {
+          style = style[0]
+        }
+        inlineStyles.push(t.objectProperty(
+          t.identifier(key),
+          style
+        ))
+      }
+    }
+
+    // Create a `process` function call
+    state.hasTransformedClassName = true
+    const processCall = t.callExpression(
+      state.reqName,
+      [
+        styleName
+          ? (
+              t.isStringLiteral(styleName.node.value)
+                ? styleName.node.value
+                : styleName.node.value.expression
+            )
+          : t.stringLiteral(''),
+        cssIdentifier
+          ? t.identifier(cssIdentifier.name)
+          : t.objectExpression([]),
+        buildSafeVar({ variable: t.identifier(GLOBAL_NAME) }),
+        buildSafeVar({ variable: t.identifier(LOCAL_NAME) }),
+        t.objectExpression(inlineStyles)
+      ]
+    )
+
+    jsxOpeningElementPath.node.attributes.push(
+      t.jsxSpreadAttribute(processCall)
+    )
+
+    // Remove old attributes
+    for (const key in styleHash) {
+      if (styleHash[key].style) styleHash[key].style.remove()
+      if (styleHash[key].styleName) styleHash[key].styleName.remove()
+    }
+
+    // Clear hash since we handled everything
+    for (const key in styleHash) {
+      delete styleHash[key].styleName
+      delete styleHash[key].style
+      delete styleHash[key].partStyle
+      delete styleHash[key]
+    }
+    styleHash = {}
+  }
+
+  function handleStyleName (state, convertedName, styleName, style) {
+    let expressions
+
+    if (
+      styleName == null ||
+      cssIdentifier == null ||
+      !(
+        t.isStringLiteral(styleName.node.value) ||
+        t.isJSXExpressionContainer(styleName.node.value)
+      )
+    ) {
+      return
+    }
+
+    if (t.isStringLiteral(styleName.node.value)) {
+      expressions = [
+        getStyleFromExpression(styleName.node.value, state)
+      ]
+    } else if (t.isJSXExpressionContainer(styleName.node.value)) {
+      expressions = [
+        getStyleFromExpression(styleName.node.value.expression, state)
+      ]
+    }
+
+    const hasStyleNameAndStyle =
+      styleName &&
+      style &&
+      styleName.parentPath.node === style.parentPath.node
+
+    if (hasStyleNameAndStyle) {
+      style.node.value = t.jsxExpressionContainer(
+        t.arrayExpression(
+          expressions.concat([style.node.value.expression])
+        )
+      )
+      styleName.remove()
+    } else {
+      if (expressions.length > 1) {
+        styleName.node.value = t.jsxExpressionContainer(t.arrayExpression(expressions))
+      } else {
+        styleName.node.value = t.jsxExpressionContainer(expressions[0])
+      }
+      styleName.node.name.name = convertedName
+    }
+  }
+
+  return {
+    post () {
+      styleHash = {}
+      cssIdentifier = undefined
+      hasObserver = undefined
+      $program = undefined
+      usedCompilers = undefined
+    },
+    visitor: {
+      Program: {
+        // TODO: Refactor this to move the sub-visitor out into getVisitor() function
+        enter ($this, state) {
+          // 1. Init
+          usedCompilers = getUsedCompilers($this)
+          state.reqName = $this.scope.generateUidIdentifier(RUNTIME_PROCESS_NAME)
+          $program = $this
+
+          // 2. Run early traversal of everything
+          $this.traverse({
+            ImportDeclaration ($this, state) {
+              if (!hasObserver) hasObserver = checkObserverImport($this)
+
+              const extensions =
+                Array.isArray(state.opts.extensions) &&
+                state.opts.extensions
+
+              if (!extensions) {
+                throw new Error(
+                  'You have not specified any extensions in the plugin options.'
+                )
+              }
+
+              const node = $this.node
+
+              if (extensions.indexOf(getExt(node)) === -1) {
+                return
+              }
+
+              const anonymousImports = $this.container.filter(n => {
+                return (
+                  t.isImportDeclaration(n) &&
+                  n.specifiers.length === 0 &&
+                  extensions.indexOf(getExt(n)) > -1
+                )
+              })
+
+              if (anonymousImports.length > 1) {
+                throw $this.buildCodeFrameError(
+                  'Cannot use anonymous style name with more than one stylesheet import.'
+                )
+              }
+
+              let specifier = node.specifiers[0]
+
+              if (!specifier) {
+                specifier = t.ImportDefaultSpecifier(
+                  $this.scope.generateUidIdentifier('css')
+                )
+                node.specifiers = [specifier]
+              }
+
+              cssIdentifier = specifier.local
+
+              // Do JSON.parse() on the css file if we receive it as a json string:
+              // import css from './index.styl'
+              //   v v v
+              // import jsonCss from './index.styl'
+              // const css = JSON.parse(jsonCss)
+              if (state.opts.parseJson) {
+                const lastImportOrRequire = $program
+                  .get('body')
+                  .filter(p => p.isImportDeclaration() || isRequire(p.node))
+                  .pop()
+                const tempCssIdentifier = $this.scope.generateUidIdentifier('jsonCss')
+                node.specifiers[0].local = tempCssIdentifier
+                lastImportOrRequire.insertAfter(
+                  buildJsonParse({
+                    name: cssIdentifier,
+                    jsonStyle: tempCssIdentifier
+                  })
+                )
+              }
+            },
+            JSXOpeningElement: {
+              exit ($this, state) {
+                // TODO: Don't handle *StyleName separately, instead merge it into handleStyleNames()
+                for (const key in styleHash) {
+                  // root styleName can only be handled by new logic in handleStyleNames()
+                  if (key === ROOT_STYLE_PROP_NAME) continue
+                  if (styleHash[key].styleName) {
+                    handleStyleName(state, key, styleHash[key].styleName, styleHash[key].style)
+                    delete styleHash[key].styleName
+                    delete styleHash[key].style
+                    delete styleHash[key]
+                  }
+                }
+                // New logic with support for ::part(name) pseudo-class
+                handleStyleNames($this, state)
+                styleHash = {}
+              }
+            },
+            JSXAttribute ($this, state) {
+              const name = $this.node.name.name
+              if (STYLE_NAME_REGEX.test(name)) {
+                const convertedName = convertStyleName(name)
+                if (!styleHash[convertedName]) styleHash[convertedName] = {}
+                styleHash[convertedName].styleName = $this
+              // Some react-native built-in stuff might have props like 'barStyle' which
+              // is a string. We skip those.
+              } else if (STYLE_REGEX.test(name) && !$this.get('value').isStringLiteral()) {
+                if (!styleHash[name]) styleHash[name] = {}
+                styleHash[name].style = $this
+              } else if (name === 'part') {
+                validatePart($this)
+                const styleProps = addPartStyleToProps($this)
+                if (!styleHash[ROOT_STYLE_PROP_NAME]) styleHash[ROOT_STYLE_PROP_NAME] = {}
+                styleHash[ROOT_STYLE_PROP_NAME].partStyle = styleProps
+                $this.remove()
+              }
+            },
+            CallExpression ($this, state) {
+              const $callee = $this.get('callee')
+              if (!$callee.isIdentifier()) return
+              if (!usedCompilers?.[$callee.node.name]) return
+              // Create a `process` function call
+              state.hasTransformedClassName = true
+              const processCall = t.callExpression(
+                state.reqName,
+                [
+                  $this.get('arguments.0')
+                    ? $this.get('arguments.0').node
+                    : t.stringLiteral(''),
+                  cssIdentifier
+                    ? t.identifier(cssIdentifier.name)
+                    : t.objectExpression([]),
+                  buildSafeVar({ variable: t.identifier(GLOBAL_NAME) }),
+                  buildSafeVar({ variable: t.identifier(LOCAL_NAME) }),
+                  $this.get('arguments.1')
+                    ? $this.get('arguments.1').node
+                    : t.objectExpression([])
+                ]
+              )
+              $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)
+            lastImportOrRequire.insertAfter(
+              useImport
+                ? buildImport({ name: state.reqName, runtimePath: t.stringLiteral(runtimePath) })
+                : buildRequire({ name: state.reqName, runtimePath: t.stringLiteral(runtimePath) })
+            )
+          }
+        }
+      }
+    }
+  }
+}
+
+function isRequire (node) {
+  return node?.declarations?.[0]?.init?.callee?.name === 'require'
+}
+
+function getExt (node) {
+  return nodePath.extname(node.source.value).replace(/^\./, '')
+}
+
+function convertStyleName (name) {
+  return name.replace(/Name$/, '')
+}
+
+function convertPartName (partName) {
+  if (partName === 'root') return 'style'
+  return partName + 'Style'
+}
+
+function validatePart ($jsxAttribute) {
+  const $value = $jsxAttribute.get('value')
+  if ($value.isStringLiteral()) return true
+  if ($value.isJSXExpressionContainer()) {
+    const $expr = $value.get('expression')
+    if ($expr.isObjectExpression()) {
+      return validateDynamicPartObject($expr)
+    } else if ($expr.isArrayExpression()) {
+      return validateDynamicPartArray($expr)
+    }
+  }
+  throw $jsxAttribute.buildCodeFrameError(`
+    'part' attribute might only be the following:
+      - static string
+      - array (with static strings or objects)
+      - object (with static keys)
+    Basically the rule is that the name of the part must be static so that
+    it is possible to determine at compile time which parts are being used.
+  `)
+}
+
+function validateDynamicPartObject ($object) {
+  for (const $property of $object.get('properties')) {
+    if (!$property.isObjectProperty() || $property.node.computed) {
+      throw $property.buildCodeFrameError(`
+        'part' attribute only supports literal or string keys in object.
+        Dynamic keys or spreads are not supported.
+      `)
+    }
+  }
+  return true
+}
+
+function validateDynamicPartArray ($array) {
+  for (const $element of $array.get('elements')) {
+    if ($element.isStringLiteral()) continue
+    if ($element.isObjectExpression()) {
+      validateDynamicPartObject($element)
+      continue
+    }
+    throw $element.buildCodeFrameError(`
+      'part' attribute only supports static strings or objects inside an array.
+    `)
+  }
+  return true
+}
+
+function getParts ($value) {
+  if ($value.isStringLiteral()) {
+    return $value.node.value.split(' ').filter(Boolean).map(i => ({ name: i }))
+  } else if ($value.isJSXExpressionContainer()) {
+    return getParts($value.get('expression'))
+  } else if ($value.isArrayExpression()) {
+    return $value.get('elements').map($el => getParts($el)).flat()
+  } else if ($value.isObjectExpression()) {
+    return $value.get('properties').map($prop => ({
+      name: $prop.node.key.name || $prop.node.key.value,
+      condition: $prop.node.value
+    }))
+  }
+}
+
+function buildDynamicPart (expr, part) {
+  if (part.condition) {
+    return t.conditionalExpression(
+      part.condition,
+      expr,
+      t.identifier('undefined')
+    )
+  } else {
+    return expr
+  }
+}
+
+function checkObserverImport ($import, {
+  observerLibrary = GLOBAL_OBSERVER_LIBRARY,
+  observerDefaultName = GLOBAL_OBSERVER_DEFAULT_NAME
+} = {}) {
+  if ($import.node.source.value !== observerLibrary) return
+  for (const $specifier of $import.get('specifiers')) {
+    if (!$specifier.isImportSpecifier()) continue
+    const { imported } = $specifier.node
+    if (imported.name === observerDefaultName) return true
+  }
+}
+
+// find topmost function (which is not a lowercase named one).
+// .getFunctionParent() returns undefined when we reach Program
+function findReactFnComponent ($jsxAttribute) {
+  let $current = $jsxAttribute.getFunctionParent()
+  let $potentialComponentFn
+
+  while ($current) {
+    // if function is named and starts with a capital letter then it's definitely a component
+    // and we return it right away
+    if ($current.node.id?.name && /^[A-Z]/.test($current.node.id.name)) return $current
+    // set function as component candidate,
+    // BUT ignore it if it's a named function which starts from a lowercase or underscore,
+    // because such function can never be a react component
+    if (!($current.node.id?.name && /^[a-z_]/.test($current.node.id.name))) {
+      $potentialComponentFn = $current
+    }
+    // and get the parent function definition
+    $current = $current.getFunctionParent()
+  }
+  return $potentialComponentFn
+}
+
+// Get compilers from the magic import
+function getUsedCompilers ($program) {
+  for (const $import of $program.get('body')) {
+    if (!$import.isImportDeclaration()) continue
+    if ($import.get('source').node.value !== GLOBAL_OBSERVER_LIBRARY) continue
+    const usedCompilers = {}
+    for (const $specifier of $import.get('specifiers')) {
+      if (!$specifier.isImportSpecifier()) continue
+      const importedName = $specifier.get('imported').node.name
+      if (COMPILERS.includes(importedName)) {
+        const localName = $specifier.get('local').node.name
+        usedCompilers[localName] = true
+      }
+    }
+    return usedCompilers
+  }
+}
+
+function getRuntimePath ($node, state) {
+  const cache = state.opts.cache
+  if (cache && !OPTIONS_CACHE.includes(cache)) {
+    throw $node.buildCodeFrameError(
+      `Invalid cache option value: "${cache}". Supported values: ${OPTIONS_CACHE.join(', ')}`
+    )
+  }
+  const platform = state.opts.platform
+  if (platform && !OPTIONS_PLATFORM.includes(platform)) {
+    throw $node.buildCodeFrameError(
+      `Invalid platform option value: "${platform}". Supported values: ${OPTIONS_PLATFORM.join(', ')}`
+    )
+  }
+  let runtimePath = RUNTIME_LIBRARY
+  if (platform) {
+    runtimePath += `/${platform}`
+    if (cache) {
+      runtimePath += `-${cache}`
+    }
+  } else if (cache) {
+    runtimePath += `/${cache}`
+  }
+  return runtimePath
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@cssxjs/babel-plugin-rn-stylename-to-style",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Dynamically resolve styleName in RN with support for multi-class selectors (for easier modifiers)",
+  "keywords": [
+    "babel",
+    "babel-plugin",
+    "react-native",
+    "stylename",
+    "style"
+  ],
+  "main": "index.cjs",
+  "exports": {
+    ".": "./index.cjs",
+    "./process": "./process.js",
+    "./processCached": "./processCached.js",
+    "./constants": "./constants.cjs"
+  },
+  "type": "module",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "Pavel Zhukov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/startupjs/startupjs"
+  },
+  "dependencies": {
+    "@babel/template": "^7.4.0",
+    "@babel/types": "^7.0.0",
+    "@cssxjs/runtime": "^0.2.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-jsx": "^7.0.0",
+    "@cssxjs/babel-plugin-react-pug": "^0.2.0",
+    "babel-plugin-tester": "^9.1.0",
+    "jest": "^30.0.4"
+  },
+  "peerDependencies": {
+    "teamplay": "*"
+  },
+  "gitHead": "a80a44b4d14c116871ca03997ce772b6beabf5d8"
+}