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

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

$3

`jsx
import React from 'react'
import { View } from 'react-native'
import { css } from 'cssxjs'

export default function Card () {
return
}
function Line () {
return
}
css
.card {
padding: 8px 16px;
}
.line {
margin-top: 16px;
border-radius: 8px;
}
.active {
background-color: red;
}

`

$3

`jsx
import React from 'react'
import { View } from 'react-native'
import { css, styl } from 'cssxjs'

export default function Card () {
return
// .root will be scoped only to this specific component
styl
.root
padding: 8px 16px

}
function Line () {
return
// .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