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?

score 19 · Answer 1 · edited Dec 31 '21 at 10:08

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

compile sass with this version of rollup-plugin-postcss is not a good option beclouse it used node-sass not official sass (dartsass) and its roo slow and use python for build and will be deprecated soon — S. Ali Mihandoost, Sep 01 '20 at 14:55

score 9 · Accepted Answer · answered Jan 28 '17 at 00:20

9

This is a working config that I use:

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

sass({
    processor: css => postcss([autoprefixer])
        .process(css)
        .then(result => result.css)
})

answered Jan 28 '17 at 00:20

nathancahill

10,452
9
51
91

1

How can i pass option to postcss plugin ?, for example pass browser env to autoprefixer – S. Ali Mihandoost Sep 01 '20 at 14:56
please mention the refrence: https://www.npmjs.com/package/rollup-plugin-sass#processor – S. Ali Mihandoost Sep 01 '20 at 15:02
1

For anyone who is running into issues with `autoprefixer` you have to invoke it: `postcss( plugins: [ autoprefixer() ], )` – Hope Kim Jun 28 '21 at 19:14

score 2 · Answer 3 · answered Apr 28 '21 at 16:43

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
    }),
  ],
};

This is me from the future. Don't use rollup-plugin-styles anymore. It was great while it lasted but it's gone stale and does not appear to be actively maintained anymore. — Tim Goyer, Jun 08 '23 at 17:07

Proper way to chain PostCSS and SASS in rollup

3 Answers3