jmurzy / babel-plugin-transform-styles

Auto-generates React StyleSheets from import statements of CSS files 💃🏻

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 simulator

For 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-styles

Usage

Via .babelrc

.babelrc

{
  "plugins": [["transform-styles", {
                "extensions": ["css"],
              }]]
}

Via Node API

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

Contributing

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