monkingxue / gulp-rn-css

a gulp-plugin to transform css/nest-css file to javascript object

gulp-rn-css

a gulp plugin to transform css/nest-css file to javascript object in react-native.

Tips

Hello guys,this is a plugin but its function is not perfect, so I will imporve this plugin, please read the usage carefully.

Installation v0.0.2-test-xue

Install via npm:

npm install gulp-rn-css --save-dev

Example

var gulp = require('gulp');
var rnCss  = require('gulp-rn-css');

gulp.task('default', function() {
    return gulp.src('style/*.scss')
        .pipe(rnCss())
        .pipe(gulp.dest('dist/style'))
});

Compile

before:

.item-get {
	display: flex;
	margin-left: 4px;
	flex-direction: row
}

.item-title {
	padding-top: 4px;
	height: 100px;
	.item-control: {
		border-top: 1px;
		border-color: #fff;
	}
}

after:

module.exports = {
    "itemGet":{
        "display":"flex",
        "marginLeft":"4",
        "flexDirection":"row",
    },
    "itemTitle":{
        "paddingTop":"4",
        "height":"100",
        "itemControl":{
            "borderTop":"1",
            "borderColor":"#fff",
        }
     }
}

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © monkingxue