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

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

Adds support for in-JS template strings css\`andstyl``` 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)

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)

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