babel-plugin-transform-rax-styles

babel-plugin-transform-rax-styles

This Babel transoformation auto-generates Rax StyleSheets from import statements of CSS files at compile time.

When used in the test environment（e.g jest, mocha）, which usually only depend on Babel instead of Webpack，we need the suitable plugin。Since offical Rax only provide Webpack loader stylesheet-loader，but lack of version for Babel plugin，so I create this Babel plugin。This plugin is inspired by babel-plugin-transform-styles。

Example

For example, given the following CSS file

.container {
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #F5FCFF;
  margin: 10 5;
}

when imported as follows

import styles from '../styles.css';

<Container style={styles.container} />

will be transformed to

var styles = {
  "container": {
    "flex": 1,
    "justifyContent": "center",
    "alignItems": "center",
    "backgroundColor": "rgb(245,252,255)",
    "marginTop": "10rem",
    "marginRight": "5rem",
    "marginBottom": "10rem",
    "marginLeft": "5rem"
  }
};

Requirements

Babel v6 or higher.

Installation

$ npm install babel-plugin-transform-rax-styles

Usage

Via .babelrc

.babelrc

{
  "plugins": ["transform-rax-styles"]
}

Via Node API

require('babel-core').transform('code', {
  plugins: ['transform-rax-styles']
});

Contributing

Contributions are very welcome—bug fixes, features, documentation, tests. Just make sure the tests are passing.