Giter Club home page Giter Club logo

Comments (2)

simonsmith avatar simonsmith commented on May 24, 2024

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/'));
});

from preprocessor.

heltonvalentini avatar heltonvalentini commented on May 24, 2024

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

from preprocessor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.