react-native-css plugin for gulp, inspired by react-native-css, thanks.
First, install gulp-react-native-css as a development dependency:
npm install --save-dev gulp-react-native-cssThen, 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:
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
}
}