Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use rework plugins #8

Closed
heltonvalentini opened this issue Mar 18, 2015 · 2 comments
Closed

Use rework plugins #8

heltonvalentini opened this issue Mar 18, 2015 · 2 comments

Comments

@heltonvalentini
Copy link

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
Copy link
Member

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants