babel-plugin-rn-style-attributes v0.1.3

rn-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 rn-style-attributes

Usage

Via .babelrc (Recommended)

.babelrc

// BlockName is an optional configuration, that is 'Block' if not set.
{
  "plugins": [
    "rn-style-attributes",
    {
      "name": `BlockName`
    }
  ]
}

Via CLI

$ babel --plugins rn-style-attributes script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["rn-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