Update [gatsby-plugin-postcss-sass] to process Sass before running PostCSS?

[ooloth]

Does gatsby-plugin-postcss-sass run PostCSS before running Sass?

If so, this is causing issues in cases where Sass needs to run first (e.g. when using Tailwind and Sass together). See this issue for an example.

Any chance of updating this plugin to run Sass before PostCSS? I imagine this is generally the desired behavior.

[KyleAMathews]

I'm not sure — it was written by a community member. Care to check out the source code for the plugin and report back?

[ooloth]

Absolutely!

The plugin source code linked above consistently shows PostCSS listed before Sass in the loaders array. For example:

// gatsby-plugin-postcss-sass/src/gatsby-node.js
// ...
switch (stage) {
  case `develop`: {
    config.loader(`sass`, {
      test: sassFiles,
      exclude: sassModulesFiles,
      loaders: [`style`, `css`, `postcss`, sassLoader],
    })

    config.loader(`sassModules`, {
      test: sassModulesFiles,
      loaders: [`style`, cssModulesConfig(stage), `postcss`, sassLoader],
    })
    return config
  }
// ...

If PostCSS is listed first, does that mean it runs first? (Sorry, these config files are a wee bit over my head...)

[KyleAMathews]

Loaders run in reverse order (no idea why :-)) so yeah, sass runs last.

[KyleAMathews]

@scottyeck any reason why sass runs after postcss instead of the other way around?

[scottyeck]

Yeek yeah that don't look right. The sass should definitely run before the post-css.

To be fair, we're not using either of these anymore as all of our CSS is in JS, so I wouldn't particularly call myself an authority on how folks use sass in gatsby these days. That said, the above should be the case in general.

[ooloth]

In case anyone finds it helpful, I posted my current CLI workaround for running Sass + Tailwinds + PurgeCSS with Gatsby here on StackOverflow. It provides a CLI method for running Sass before PostCSS.

If anyone can translate it into a working Webpack version, that would be great!

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!