https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style
Transform styleName property to style property in react-native.
https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style
babel babel-plugin react-native style stylename
Last synced: 3 months ago
JSON representation
Transform styleName property to style property in react-native.
- Host: GitHub
- URL: https://github.com/kristerkari/babel-plugin-react-native-stylename-to-style
- Owner: kristerkari
- License: mit
- Created: 2018-04-21T14:15:11.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T23:52:40.000Z (about 1 year ago)
- Last Synced: 2025-03-19T09:13:38.360Z (3 months ago)
- Topics: babel, babel-plugin, react-native, style, stylename
- Language: JavaScript
- Homepage:
- Size: 111 KB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-native-stylename-to-style
[](https://www.npmjs.org/package/babel-plugin-react-native-stylename-to-style)
[](https://travis-ci.org/kristerkari/babel-plugin-react-native-stylename-to-style)
[](https://ci.appveyor.com/project/kristerkari/babel-plugin-react-native-stylename-to-style/branch/master)
[](https://coveralls.io/github/kristerkari/babel-plugin-react-native-stylename-to-style?branch=master)
[](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
Transform JSX `styleName` property to `style` property in react-native. The `styleName` attribute and syntax are based on [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules#conventions).
## Usage
### Step 1: Install
```sh
yarn add --dev babel-plugin-react-native-stylename-to-style
```
or
```sh
npm install --save-dev babel-plugin-react-native-stylename-to-style
```
### Step 2: Configure `.babelrc`
You must give one or more file extensions inside an array in the plugin options.
```
{
"presets": [
"react-native"
],
"plugins": [
["react-native-stylename-to-style", {
"extensions": ["css"]
}]
]
}
```
## Syntax
## Anonymous reference
Anonymous reference can be used when there is only one stylesheet import.
### Single class
```jsx
import "./Button.css";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import Button from "./Button.css";
Foo
;
```
### Multiple classes
```jsx
import "./Button.css";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import Button from "./Button.css";
Foo
;
```
### Expression
```jsx
import "./Button.css";
const name = "wrapper";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import Button from "./Button.css";
const name = "wrapper";
Foo
;
```
### Expression with ternary
```jsx
import "./Button.css";
const condition = true;
const name = "wrapper";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import Button from "./Button.css";
const condition = true;
const name = "wrapper";
Foo
;
```
### with `styleName` and `style`:
```jsx
import "./Button.css";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import Button from "./Button.css";
Foo
;
```
## Named reference
Named reference is used to refer to a specific stylesheet import.
### Single class
```jsx
import foo from "./Button.css";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import foo from "./Button.css";
Foo
;
```
### Multiple classes
```jsx
import foo from "./Button.css";
import bar from "./Grid.css";
Foo
;
```
↓ ↓ ↓ ↓ ↓ ↓
```jsx
import foo from "./Button.css";
import bar from "./Grid.css";
Foo
;
```