PostCSS plugin order when using with webpack

Question

I want to use the following postCSS plugins:

1. postcssimport (https://github.com/postcss/postcss-import)
2. postcssnested (https://github.com/postcss/postcss-nested)
3. postcsssimplevars (https://github.com/postcss/postcss-simple-vars)
4. postcssmixins (https://github.com/postcss/postcss-mixins)
5. autoprefixer (https://github.com/postcss/autoprefixer)
6. lost (https://github.com/peterramsing/lost)
7. postcssflexibility (https://github.com/7rulnik/postcss-flexibility)

But I'm unsure of the order in which I should put them inside

postcss: function () {
  return [postcssimport, postcssnested, ...];
}

Any help?

Answer 1

Here's an example from my project that i'm currently working on:

webpackConfig.postcss = () => {
  return [
    atImport({
      addDependencyTo: webpack
    }),
    webpackPostcssTools.prependTildesToImports,
    customProperties({
      variables: map.vars
    }),
    customMedia({
      extensions: map.media
    }),
    customSelectors({
      extensions: map.selector
    }),
    normalize,
    mixin,
    cssnext,
    rucksack,
    sorting,
    short
  ]
}

You should always have the import first, then the webpack postcss tools after with the options. Then anything after for your postcss add ons.

Feel free to checkout the project i'm doing here: https://github.com/codetony25/react-starter-boilerplate

Oh, and I want to directly answer your question also. In your case, it should go postcssimport first. Then the rest seems to be add ons, so that order does not matter.