babel-plugin-transform-styles's Introduction

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.

babel-plugin-transform-styles's People

Contributors

Stargazers

Watchers

babel-plugin-transform-styles's Issues

You can give a complete example of it?

Please give an example of a complete React-Native, thank you! English is not good, do not mind.
Thinks!

Must i modify css filename when i changed some css properties?

Hi, when i am using your plugin, i changed some css properties in my css file, but when i use Ctrl+R to reload resouces or restart my packager, it can't show directly, but when i changed the css filename, it can be show, why?