0.1.8 • Published 7 years ago
babel-plugin-react-style-attributes v0.1.8
babel-plugin-react-style-attributes
Babel plugin to add view styles as configurable inline attributes. Show package on npmjs.com Supports React - React Native - ReactXP
Example
In
// input code
<Block
height={33}
collapsable
color={condition ? "red" : "blue"}
/>
Out
// output code
<View
style={{ backgroundColor: condition ? "red" : "blue", height: 33 }}
collapsable
/>
Installation
$ npm install -D babel-plugin-react-style-attributes
Usage
Via .babelrc
(Recommended)
.babelrc
// BlockName is an optional configuration, that is 'Block' if not set.
{
"plugins": [
[
"babel-plugin-react-style-attributes",
{
"name": "RX"
}
]
]
}
Via CLI
$ babel --plugins babel-plugin-react-style-attributes script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["babel-plugin-react-style-attributes"]
});
Test implemented in test/fixtures
To run the test script:
$ npm run test
Test implemented in test/fixtures:
- ALL-Tests
- Keep style attributes and native attributes
- Manage binary ternary
- Manage classic ternary
- Manage ReactXP element with option
- Native attributes must be preserved
- Style attributes wavy
- Style overwrite other attributes