sindresorhus / gulp-rework

Preprocess CSS with Rework

Deprecated

The Rework project is no longer maintained.

---

gulp-rework

Preprocess CSS with Rework

Issues with the output should be reported on the Rework issue tracker.

Install

$ npm install --save-dev gulp-rework

Usage

const gulp = require('gulp');
const rework = require('gulp-rework');
const at2x = require('rework-plugin-at2x');

gulp.task('default', () =>
	gulp.src('src/app.css')
		.pipe(rework(at2x(), {sourcemap: true}))
		.pipe(gulp.dest('dist'))
);

API

The compress option from Rework is intentionally missing. A separate task like gulp-csso will do a better job.

rework(plugin, plugin, ..., [options])

Plugins are supplied as arguments.
Optionally supply an object with options as the last argument.

options

Type: Object

sourcemap

Type: boolean
Default: false

License

MIT © Sindre Sorhus

gulp-rework's Issues

Example with autoprefixer doesn't work

I just paste the example in the readme & it didn't work.

var gulp = require('gulp');
var rework = require('gulp-rework');
var autoprefixer = require('autoprefixer');

gulp.task('default', function () {
    gulp.src('src/css/index.css')
        .pipe(rework(rework.at2x(), autoprefixer().rework, {sourcemap: true}))
        .pipe(gulp.dest('dist'));
});

Result

❯❯ gulp
[gulp] Using file /blah/frontend/gulpfile.js
[gulp] Working directory changed to /blah/frontend
[gulp] Running 'default'...
[gulp] Finished 'default' in 23 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
TypeError: undefined is not a function
    at Rework.use (/blah/frontend/node_modules/gulp-rework/node_modules/rework/lib/rework.js:58:3)
    at /blah/frontend/node_modules/gulp-rework/index.js:13:8
    at Array.forEach (native)
    at /blah/frontend/node_modules/gulp-rework/index.js:12:11
    at wrappedMapper (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:76:19)
    at Stream.stream.write (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:88:21)
    at Stream.ondata (stream.js:51:26)
    at Stream.EventEmitter.emit (events.js:95:17)
    at queueData (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:38:21)
    at next (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:68:5)

I try to check console.log(autoprefixer().rework) but get undefined.
What am I doing wrong ?

Error when running gulp-rework: no 'slice' method

gulp.task('css', function () {
    gulp.src('./src/css/main.css')
        .pipe(rework())
        .pipe(gulp.dest('./target/css'));
});

Error:

❯ ./node_modules/.bin/gulp css
[11:14:53] Using gulpfile ~/Development/bright-north-site-v4/Gulpfile.js
[11:14:53] Starting 'css'...
[11:14:53] 'css' errored after 6.28 ms
[11:14:53] TypeError: Cannot call method 'slice' of undefined
    at match (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:129:15)
    at whitespace (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:138:5)
    at rules (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:109:5)
    at stylesheet (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:81:16)
    at module.exports (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/node_modules/css/lib/parse/index.js:558:20)
    at rework (/Users/Oliver/Development/bright-north-site-v4/node_modules/rework/index.js:26:21)
    at Gulp.<anonymous> (/Users/Oliver/Development/bright-north-site-v4/Gulpfile.js:19:15)
    at module.exports (/Users/Oliver/Development/bright-north-site-v4/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/Oliver/Development/bright-north-site-v4/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/Oliver/Development/bright-north-site-v4/node_modules/gulp/node_modules/orchestrator/index.js:214:10)

Update to rework 1.0

https://github.com/reworkcss/rework/releases/tag/1.0.0

Not works if css contains inline comments

Not works if css contains inline comments like below. Throwing error

background: #aaaaaa/{bgColorOverlay}/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/{bgImgUrlOverlay}/ 50%/{bgOverlayXPos}/ 50%/{bgOverlayYPos}/ repeat-x/{bgOverlayRepeat}/;

Last argument as option doesn't work.

Here is my task

var rework = require('gulp-rework')

gulp.task('styles', function () {
  gulp.src('src/css/index.css')
    .pipe(
      rework(
        //  rework.at2x()
          rework.colors()
        , rework.references()
        , require('rework-breakpoints')
        , require('rework-vars')()
        , require('rework-parent')
        , require('rework-clearfix')
        , {
          sourcemap: true
        }
      )
    )
    .pipe(require('gulp-autoprefixer')())
    //.pipe(require('gulp-csso')())
    .pipe(gulp.dest('dist/css'))
});

Here is what I got

❯ gulp styles
[gulp] Using file /blah/frontend/gulpfile.js
[gulp] Working directory changed to /blah/frontend
[gulp] Running 'styles'...
[gulp] Finished 'styles' in 46 ms

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
TypeError: object is not a function
    at Rework.use (/blah/frontend/node_modules/gulp-rework/node_modules/rework/lib/rework.js:58:3)
    at /blah/frontend/node_modules/gulp-rework/index.js:13:8
    at Array.forEach (native)
    at /blah/frontend/node_modules/gulp-rework/index.js:12:11
    at wrappedMapper (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:76:19)
    at Stream.stream.write (/blah/frontend/node_modules/gulp-rework/node_modules/event-stream/node_modules/map-stream/index.js:88:21)
    at Stream.ondata (stream.js:51:26)
    at Stream.EventEmitter.emit (events.js:95:17)
    at queueData (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:38:21)
    at next (/blah/frontend/node_modules/gulp/node_modules/event-stream/node_modules/map-stream/index.js:68:5)

Release new version to npm

The fix for the rework.properties warning has been merged but not released.