npm install gulp-react-native-css> react-native-css plugin for gulp,
inspired by react-native-css, thanks.
First, install gulp-react-native-css as a development dependency:
``shell`
npm install --save-dev gulp-react-native-css
Then, add it to your gulpfile:
`
gulp = require 'gulp'
sass = require 'gulp-sass'
reactCss = require 'gulp-react-native-css'
config =
src: ['../test/fixtures/*/.scss']
dest: '../test/expected'
gulp.task 'css', ->
gulp.src config.src
.pipe sass()
.pipe reactCss()
.pipe gulp.dest config.dest
`
test.scss:
`
#description, #ok {
margin-Bottom: 202;
font-size: 18;
text-align: center;
color: lighten(red, 10%);
name {
color: rgba(0, 0, 0, 0.2);
}
}
.container {
padding: 30;
margin-Top: 65;
align-items: center;
row {
margin-bottom: 50;
}
}
`
After transformed, it will be:
`javascript
module.exports ={
"description": {
"marginBottom": 202,
"fontSize": 18,
"textAlign": "center",
"color": "#ff3333"
},
"ok": {
"marginBottom": 202,
"fontSize": 18,
"textAlign": "center",
"color": "#ff3333"
},
"description name": {
"color": "rgba(0, 0, 0, 0.2)"
},
"ok name": {
"color": "rgba(0, 0, 0, 0.2)"
},
"container": {
"padding": 30,
"marginTop": 65,
"alignItems": "center"
},
"container row": {
"marginBottom": 50
}
}
`
Now, it support the margin, for Example:
`
ok {
margin: 2 2 3;
padding: 2 2 6;
}
`
The code above all will transform to :
`
module.exports ={
"ok": {
"marginLeft": 2,
"marginRight": 2,
"marginTop": 2,
"marginBottom": 3,
"paddingLeft": 2,
"paddingRight": 2,
"paddingTop": 2,
"paddingBottom": 6
}
}
``
[npm-url]: https://npmjs.org/package/gulp-react-native-css
[npm-image]: https://badge.fury.io/js/gulp-react-native-css.png
[travis-url]: http://travis-ci.org/soliury/gulp-react-native-css
[travis-image]: https://secure.travis-ci.org/soliury/gulp-react-native-css.png?branch=master
[coveralls-url]: https://coveralls.io/r/soliury/gulp-react-native-css
[coveralls-image]: https://coveralls.io/repos/soliury/gulp-react-native-css/badge.png
[depstat-url]: https://david-dm.org/soliury/gulp-react-native-css
[depstat-image]: https://david-dm.org/soliury/gulp-react-native-css.png