babel-plugin-react-native-dynamic-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.
Information
This is the fork of https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style
The differences are:
- Support resolving multi-class selectors in CSS:
import classnames from 'classnames' { return <Text = >CLICK ME</Text> }
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.
-
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. -
If the
styleName
value is an object or an array, automatically pipe it through theclassnames
-like library. -
Support for multiple named css file imports is removed
Usage
Step 1: Install
yarn add --dev babel-plugin-react-native-dynamic-stylename-to-style
or
npm install --save-dev babel-plugin-react-native-dynamic-stylename-to-style
.babelrc
Step 2: Configure 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"]
}]
]
}
Syntax
Anonymous reference
Anonymous reference can be used when there is only one stylesheet import.
Single class
import "./Button.css"; <View ="wrapper"> <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; <View => <Text>Foo</Text></View>;
Multiple classes
import "./Button.css"; <View ="wrapper red-background"> <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; <View => <Text>Foo</Text></View>;
Expression
import "./Button.css";const name = "wrapper"; <View => <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css";const name = "wrapper"; <View => <Text>Foo</Text></View>;
Expression with ternary
import "./Button.css"; const condition = true;const name = "wrapper"; <View => <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; const condition = true;const name = "wrapper"; <View => <Text>Foo</Text></View>;
styleName
and style
:
with import "./Button.css"; <View ="wrapper" => <Text>Foo</Text></View>;
↓ ↓ ↓ ↓ ↓ ↓
import Button from "./Button.css"; <View => <Text>Foo</Text></View>;