Awesome
Gulp React Statics Style
gulp wrapper for react-statics-styles
.
Its takes components source files which export component definitions, and gives CSS files. You can then pipe it to other processors, such as gulp-postcss
.
Usage
<<<<<<< HEAD
This module is written in ES6/7. You will need babel
to run it.
- Fork or clone this repository.
- (Optional) Edit
package.json
if you intent to publish your package onnpm
. npm install
to install all the required dependencies fromnpm
.- Hack
src/index.jsx
andsrc/__tests__/index.jsx
. - Lint/test using
gulp
. - Don't forget to edit this
README.md
file.
starterkit/master
In a component file (eg. MyComponent.jsx
):
import { styles } from 'react-statics-styles';
@styles({
'.MyComponent': {
transform: 'translate(-50%,-50%)',
},
})
class MyComponent extends React.Component {
...
}
<<<<<<< HEAD
export default MyComponent;
=======
- Sanely configured
gulpfile.js
,package.json
,.gitignore
,.editorconfig
,.eslintrc
,.jsbeautifyrc
. - Both CommonJS and ES6 modules are supported.
- Linting and testing is pre-configured.
lodash
,bluebird
andshould
are included by default.
starterkit/master
In your gulpfile.js
:
var styles = require('gulp-react-statics-styles');
gulp.task('componentsCSS', function() {
return gulp.src('src/**/*.jsx')
.pipe(babel())
.pipe(styles())
.pipe(gulp.dest('static/'));
});
You can combine this with any JS preprocessor or CSS postprocessor, for example if you use babel
for JS, and autoprefixer-core
and csswring
for CSS (via postcss
):
gulp.src('src/**/*.jsx')
.pipe(babel())
.pipe(styles())
.pipe(postcss([autoprefixer, 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 :)