babel-plugin-styles v0.1.2

babel-plugin-styles for JSX

Support react-native styles array writting in react-dom

<span style={[{color: 'white'}, {padding: 10}, false && {fontSize: 10}]} />;

💫

import _style from "react-dom-styles";
<span style={_style({
  color: 'white'
}, {
  padding: 10
}, false && {
  fontSize: 10
})} />;

By default imports from react-dom-styles. However the package name is configurable.

styles package code

function styles() {
  const obj = Object.create(null);
  [].slice.call(arguments).forEach(item => {
    item && Object.keys(item).forEach(k => {
      obj[k] = item[k]
    })
  })
  return obj;
}

module.exports = styles

installation

npm i --save-dev babel-plugin-styles

Then add the plugin to your .babelrc file:

{
  "plugins": [
    "@babel/plugin-syntax-jsx",
    "babel-plugin-styles"
  ]
}

Configuring the package name

You can set the package name by defining the packageName options:

{
  "plugins": [
    ["babel-plugin-styles", { "packageName": "other-styles-packagename" }]
  ]
}