babel-plugin-transform-styles
This Babel transoformation auto-generates React StyleSheets from import statements of CSS files at compile time.
Example
Once you clone the repo, you should be able to run the example project as below.
- cd examples/Vanilla
- npm install
- npm run simulatorFor example, given the following CSS file
.container {
flex: 1;
justify-content: center;
align-items: center;
background-color: #F5FCFF;
margin: 10 5;
border-bottom-width: hairline-width;
-ios-shadow-opacity: 4;
-ios-shadow-offset: 2 4;
-android-elevation: 1;
}when imported as follows
import styles from '../styles.css';
<Container style={styles.container} />
will be transformed to
var styles = StyleSheet.create({
"container": {
"flex": 1,
"justifyContent": "center",
"alignItems": "center",
"backgroundColor": "#F5FCFF",
"margin": 0,
"marginTop": 10,
"marginRight": 5,
"marginBottom": 10,
"marginLeft": 5,
"borderBottomWidth": StyleSheet.hairlineWidth,
"shadowOpacity": 4,
"shadowOffset": {
"width": 2,
"height": 4
},
"elevation": 1
}
});See the spec for more examples.
Requirements
Babel v6 or higher.
Installation
$ npm install babel-plugin-transform-stylesUsage
Via .babelrc
.babelrc
{
"plugins": [["transform-styles", {
"extensions": ["css"],
}]]
}Via Node API
require('babel-core').transform('code', {
plugins: [['transform-styles', {
extensions: ['css'],
}]]
});Release Notes
- 0.0.2 Fix dependency issue
- 0.0.1 Initial release
Contributing
Contributions are very welcome—bug fixes, features, documentation, tests. Just make sure the tests are passing.
