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