Proper way to chain PostCSS and SASS in rollup

Question

I'm trying to set up rollup to use both SCSS stylesheets and the Lost grid system, which needs to be parsed through PostCSS. I've verified that the SCSS is being parsed correctly, but the PostCSS processor doesn't seem to have any effect.

According to the rollup-plugin-sass docs, I just need to pass in the vanilla JS function to the processor option. This works without error, but the generated CSS is no different.

Here's my rollup config, called with rollup -c config/dev.js:

// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'postcss';
const postcssProcessor = postcss([require('autoprefixer'), require('lost')]);

export default {
  dest: 'dist/app.js',
  entry: 'src/index.jsx',
  format: 'iife',
  plugins: [
    resolve({
      browser: false,
      main: true
    }),
    sass({
//      processor: postcssProcessor,
      output: 'dist/styles.css'
    }),
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      presets: [ 'es2015-rollup', 'stage-0', 'react' ],
      plugins: [ 'external-helpers' ]
    }),
    cjs({
      exclude: 'node_modules/process-es6/**',
      include: 'node_modules/**'
    }),
    globals(),
    replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
  ],
  sourceMap: true
};

Uncommenting the processor line has no effect. It should convert lost-column lines to calc directives, and add vendor prefixes to CSS properties that require them.

What's the right way to do this?

Answer 1

Check out the rollup-plugin-styles plugin, which handles various preprocessors, including Sass (using both the deprecated node-sass and the recommended sass), and also has built-in PostCSS support. This solves both the problem of the author of the question and the issue of passing parameters to the autoprefixer - in the same way as when using WebPack:

import styles from 'rollup-plugin-styles';
import autoprefixer from 'autoprefixer';

export default {
  plugins: [ // rollup plugins
    styles ({
      plugins: [autoprefixer({/* your options */})], // postcss plugins
    }),
  ],
};

Answer 2

You could also approach it the other way around, by using sass as a pre-processor for rollup-plugin-postcss:

import sass from 'node-sass'
import autoprefixer from 'autoprefixer'
import postcss from 'rollup-plugin-postcss'

export default {
  entry: 'src/app.js',
  dest: 'dist/bundle.js',
  format: 'iife',
  sourceMap: true,
  plugins: [
    postcss({
      preprocessor: (content, id) => new Promise((resolve, reject) => {
        const result = sass.renderSync({ file: id })
        resolve({ code: result.css.toString() })
      }),
      plugins: [
        autoprefixer
      ],
      sourceMap: true,
      extract: true,
      extensions: ['.sass','.css']
    })
  ]
}