webpack-pre-css-loader.js

webpack-pre-css-loader.js

var path = require('path');

/**
 * CSS transform dependencies
 */

var autoprefixer = require('autoprefixer-core');
var calc = require('rework-calc');
var color = require('rework-color-function');
var conformance = require('rework-suit-conformance');
var customMedia = require('rework-custom-media');
var rework = require('rework');
var utils = require('loader-utils');
var vars = require('rework-vars');

// config files
var cssConfig = require('../css.config');

/**
 * Transform CSS source
 *
 * @param {String} source
 */
module.exports = function (source) {
  if (this.cacheable) {
    this.cacheable();
  }

  var file = utils.getRemainingRequest(this);
  var query = utils.parseQuery(this.query);
  var varsMap = cssConfig.vars;
  var mediaMap = cssConfig.media;
  var browsers = cssConfig.browsers || [];

  // rework css
  var output = rework(source, { source: file })
    .use(conformance)
    // W3C-style variables
    .use(vars({ map: varsMap }))
    // W3C-style color function
    .use(color)
    // basic calc resolution
    .use(calc)
    // W3C-style custom media queries
    .use(customMedia({ map: mediaMap }))
    .toString({ sourcemap: (query.minimize ? false : true) });

  // add vendor prefixes
  output = autoprefixer({
    browsers: browsers,
    cascade: false
  }).process(output, {
    from: file,
    map: (query.minimize ? false : 'inline')
  });

  this.callback(null, output.css);
};

Stumbled on this after Googling for a better rework loader -- have you figured out how to get webpack to play nice with rework-npm?

Banging my head against the wall trying to migrate a bunch of code built on suit-rework from gulp to webpack.