❤
npm
Sign UpSign In

gulp-react-nexus-style

1.2.0 • Public • Published

gulp React Nexus Style

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

Usage

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')
    .pipe(react())
    .pipe(style())
  .pipe(gulp.dest('static/'));
});

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):

gulp.src('src/**/*.jsx')
.pipe(require('gulp-react')())
.pipe(require('gulp-6to5')({ runtime: true }))
.pipe(require('react-nexus-style')())
.pipe(require('gulp-contact')())
.pipe(require('gulp-postcss')([require('autoprefixer-core'), require('csswring')]))
.pipe(gulp.dest('static/components.css'));

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 :)

Readme

Keywords

none

Package Sidebar

Install

npm i gulp-react-nexus-style

Repository

github.com/elierotenberg/gulp-react-nexus-style

Homepage

github.com/elierotenberg/gulp-react-nexus-style

Weekly Downloads

1

Version

1.2.0

License

MIT

Last publish

Collaborators

  • elie.rotenberg
Try on RunKit
Report malware