Example of web and native visitors in JSXUI.

babel.config.js

module.exports = {
  plugins: [
    ['@jsxui/babel-plugin', {
      visitor: process.env.PLATFORM === 'native' ? require('./native') : require('./web')
    }]
  ]
}

native.js

const buildStylesheet = template(`
const styles = StyleSheet.create(STYLES)
`)

export const nativeVistitor = {
  Program(path) {
    path.pushContainer(
      'body',
      buildStylesheet({
        STYLES: t.objectExpression(
          Object.entries(this.styleAttributes).map(([id, attributes]) =>
            t.objectProperty(t.identifier(id), t.objectExpression(attributes))
          )
        ),
      })
    )
  },
  JSXOpeningElement(path) {
    const uid = path.node.attributes.find(
      (attribute) => attribute.name.name === 'uid'
    )
    const attributes = path.node.attributes.filter(
      (attribute) => attribute.name.name !== 'uid'
    )
    path.node.attributes = [
      ...attributes,
      t.jsxAttribute(
        t.jsxIdentifier('style'),
        t.jSXExpressionContainer(
          t.memberExpression(
            t.identifier('styles'),
            t.identifier(uid.value.value)
          )
        )
      ),
    ]
  },
}

web.js

export const webVisitor = {
  JSXOpeningElement(path) {
    const id = path.node.attributes.find(
      (attribute) => attribute.name.name === 'uid'
    )
    const styleAttributes = id ? this.styleAttributes[id.value.value] : null
    if (styleAttributes) {
      path.node.attributes.push(
        t.jsxAttribute(
          t.jsxIdentifier('css'),
          t.jsxExpressionContainer(t.objectExpression(styleAttributes))
        )
      )
    }
  },
}