thabti / react-native-css

Style React-Native components with css
MIT License
769 stars 66 forks source link

[enhancement] Create gulp plugin #57

Closed kcjonson closed 7 years ago

kcjonson commented 7 years ago

Pretty straightforward request. It would be great if this util was available as a gulp plugin.

kcjonson commented 7 years ago

A gulp plugin that directly uses this library is pretty easy to set up, but someone is squatting on gulp-plugin-react-native-css that doesn't actually take a dependency on this library that I can see.

var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
var ReactNativeCSS = require('react-native-css')
var transpiler = new ReactNativeCSS();

// Consts
const PLUGIN_NAME = 'gulp-css-to-rnstyles';

function transpileBuffer(fileBuffer, prettyPrint) {
    var contents = transpiler.toJSS(fileBuffer.toString('utf-8'))
    var indentation = prettyPrint ? 4 : 0;
    var jsonOutput = JSON.stringify(contents, null, indentation);
    var output = `module.exports = require('react-native').StyleSheet.create(${jsonOutput});`;
    return Buffer.from(output);
};

function convertCSS(prettyPrint) {
    return through.obj(function(file, enc, cb) {
        if (file.isNull()) {
            return cb(null, file);
        }
        if (file.isBuffer()) {
            file.contents = transpileBuffer(file.contents, prettyPrint);
        }
        if (file.isStream()) {
            this.emit('error', new PluginError(PLUGIN_NAME, 'Streams not supported!'));
        }
        return cb(null, file);
    });
};

module.exports = convertCSS;

Should I open a PR to put the plugin into this module which could be accessed by something like var ReactNativeCSS = require('react-native-css/gulp-plugin')?

thabti commented 7 years ago

@kcjonson This would be beneficial. I would approve a PR for this feature.

I think if we can get this to play nice with the packager then it would be a killer feature.