Use rework plugins

[heltonvalentini]

Is it possible to use other rework plugins along with this preprocessor ? Plugins like: https://github.com/reworkcss/rework-plugin-at2x/ https://github.com/reworkcss/rework-plugin-inline

Couldn't find this info anywhere.

[simonsmith]

The preprocessor is just a wrapper around rework-suit and autoprefixer, so if you use those directly you can add in other rework plugins.

Here's an example I've used in gulp:

var gulp = require('gulp');
var rework = require('gulp-rework');
var autoprefixer = require('gulp-autoprefixer');
var reworkAt2x = require('rework-plugin-at2x');
var reworkSuit = require('rework-suit');

gulp.task('suit', function() {
  return gulp.src('*.css')
    .pipe(rework(
      reworkSuit(),
      reworkAt2x()
    ))
    .pipe(autoprefixer())
    .pipe(gulp.dest('built/'));
});

[heltonvalentini]

So there isn't a way to use preprocessor along with other rework plugins I had to create a script and use rework-suit Here is a sample script:

var autoprefixer = require('autoprefixer');
var rework       = require('rework');
var suit         = require('rework-suit');
var colors       = require('rework-plugin-colors');
var at2x         = require('rework-plugin-at2x');
var inherit      = require('rework-inherit');
var fs           = require('fs');

var browserConfig = [
    'Explorer >= 9',
    'last 2 Chrome versions',
    'last 2 Firefox versions',
    'last 2 Safari versions',
    'last 2 iOS versions',
    'Android 4'
];

var css = fs.readFileSync('index.css','utf8');

var bundle = rework(css, { source: 'index.css' })
                .use(suit({ source: 'index.css' }))
                .use(inherit())
                .use(colors())
                .use(at2x())
                .toString({ sourcemap: true });

bundle = autoprefixer(browserConfig).process(bundle).css;

fs.writeFileSync('bundle.css', bundle);