# gulp-react-statics-styles

> Gulp React Statics Style ========================

Latest version **4.1.0** (published 2015-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-react-statics-styles
pnpm add gulp-react-statics-styles
yarn add gulp-react-statics-styles
bun add gulp-react-statics-styles
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2015-08-31 |
| First published | 2015-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Elie Rotenberg |
| Maintainers | elie.rotenberg |

## Links

- npm: https://www.npmjs.com/package/gulp-react-statics-styles
- Repository: https://github.com/elierotenberg/gulp-react-statics-styles
- Issues: https://github.com/elierotenberg/gulp-react-statics-styles/issues
- npm.io page: https://npm.io/package/gulp-react-statics-styles

## Dependencies (7)

- [lodash](https://npm.io/package/lodash.md) ^3.9.3
- [recase](https://npm.io/package/recase.md) ^1.0.4
- [should](https://npm.io/package/should.md) ^6.0.3
- [bluebird](https://npm.io/package/bluebird.md) ^2.9.30
- [through2](https://npm.io/package/through2.md) ^2.0.0
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.5
- [react-statics-styles](https://npm.io/package/react-statics-styles.md) ^3.1.0

## Recent versions

- 4.1.0 (latest) — 2015-08-31
- 4.0.2 — 2015-06-17
- 4.0.1 — 2015-06-17
- 4.0.0 — 2015-06-16
- 3.0.0 — 2015-06-05
- 2.0.1 — 2015-04-29
- 2.0.0 — 2015-04-29
- 1.3.0 — 2015-02-19
- 1.2.3 — 2015-02-19
- 1.2.2 — 2015-01-24
- 1.2.1 — 2015-01-22

## README

Gulp React Statics Style
========================

gulp wrapper for [`react-statics-styles`](https://github.com/elierotenberg/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.
=======
1. Fork or clone this repository.
2. (Optional) Edit `package.json` if you intent to publish your package on `npm`.
3. `npm install` to install all the required dependencies from `npm`.
4. Hack `src/index.jsx` and `src/__tests__/index.jsx`.
5. Lint/test using `gulp`.
6. Don't forget to edit this `README.md` file.
>>>>>>> starterkit/master

In a component file (eg. `MyComponent.jsx`):
```js
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` and `should` are included by default.
>>>>>>> starterkit/master

In your `gulpfile.js`:

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

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

---
_Source: https://npm.io/package/gulp-react-statics-styles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._