node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


gulp React Nexus Style

gulp wrapper for react-nexus-style. Its takes components source files which export component definitions, and gives CSS files.


In a component file (eg. MyComponent.jsx):

var MyComponent = React.createClass({
  statics: {
    styles: {
module.exports = MyComponent;

In your gulpfile.js:

var style = require('react-nexus-style');
var react = require('gulp-react');
gulp.task('componentsCSS', function() {
  return gulp.src('src/**/*.jsx')

You can combine this with any JS preprocessor or CSS postprocessor, for example if you use 6to5 for JS, and autoprefixer-core and csswring for CSS (via postcss):

.pipe(require('gulp-6to5')({ runtime: true }))
.pipe(require('gulp-postcss')([require('autoprefixer-core'), require('csswring')]))

In the real world, you probably want to only run your JS source transformation once per build and cache the results, but its up to you to design your gulpfile accordingly :)