https://github.com/jmurzy/babel-plugin-transform-styles
Auto-generates React StyleSheets from import statements of CSS files 💃🏻
https://github.com/jmurzy/babel-plugin-transform-styles
babel react-native
Last synced: 3 months ago
JSON representation
Auto-generates React StyleSheets from import statements of CSS files 💃🏻
- Host: GitHub
- URL: https://github.com/jmurzy/babel-plugin-transform-styles
- Owner: jmurzy
- License: mit
- Created: 2016-04-01T01:26:29.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-20T21:13:41.000Z (over 9 years ago)
- Last Synced: 2025-08-09T02:20:58.177Z (11 months ago)
- Topics: babel, react-native
- Language: JavaScript
- Homepage:
- Size: 94.7 KB
- Stars: 24
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# babel-plugin-transform-styles
This [Babel](https://github.com/babel/babel) [transoformation](https://babeljs.io/docs/plugins/) auto-generates React [StyleSheet](https://facebook.github.io/react-native/docs/stylesheet.html)s from import statements of CSS files at compile time.
[](https://circleci.com/gh/jmurzy/babel-plugin-transform-styles)
[](https://www.npmjs.com/package/babel-plugin-transform-styles)
[](https://github.com/jmurzy/babel-plugin-transform-styles/blob/master/LICENSE.md)
## Example
Once you clone the repo, you should be able to run the [example project](https://github.com/jmurzy/babel-plugin-transform-styles/tree/master/examples/Vanilla) as below.
```shell
- cd examples/Vanilla
- npm install
- npm run simulator
```
For example, given the following CSS file
```css
.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
```js
import styles from '../styles.css';
```
will be transformed to
```js
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](https://github.com/jmurzy/babel-plugin-transform-styles/blob/master/test/index.spec.js).
## Requirements
[Babel](https://github.com/babel/babel) v6 or higher.
## Installation
```sh
$ npm install babel-plugin-transform-styles
```
## Usage
### Via `.babelrc`
**.babelrc**
```json
{
"plugins": [["transform-styles", {
"extensions": ["css"],
}]]
}
```
### Via Node API
```javascript
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.