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

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']
    })
  ]
}