babel-plugin-transform-rax-styles
v0.0.5
Published
Downloads
11
Readme
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.