Package Exports
- @cssxjs/babel-plugin-rn-stylename-inline
- @cssxjs/babel-plugin-rn-stylename-inline/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cssxjs/babel-plugin-rn-stylename-inline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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