Gatsby: [1.0] When using gatsby-plugin-sass final output CSS isn't run through autoprefixer

[levibuzolic]

If using gatsby-plugin-sass you don't get any vendor prefixes applied to your output CSS (in both development and production builds).

I'm wondering if maybe autoprefixer should be run as the final loader for CSS files regardless of other loaders so that the browserlist is always used.

Autoprefixer works when using gatsby-plugin-postcss-sass -- which makes sense, however there are some issues with gatsby-plugin-postcss-sass that I'm still investigating.

[KyleAMathews]

Is this still an issue?

[kriim]

Using Gatsby 1.9.149 and gatsby-plugin-sass 1.0.14 this was still an issue for me.

I managed to fix it by modifying the Webpack config like proposed in #318.

[KyleAMathews]

@kriim would you like to put together a PR for the sass plugin so it works out of the box?

[kriim]

So would you be fine if gatsby-plugin-sass always applied vendor prefixes using postcss and added sourcemaps for the develop stage by default? That would be at least my preferred default behavior.

The point of having gatsby-plugin-postcss-sass is to have the ability to pass in additional postcss plugins I guess?

[KyleAMathews]

@kriim that'd make sense to me.

@scottyeck that was the original reason right for gatsby-plugin-postcss-sass? Any reason not to just move that functionality into core?

[kriim]

Moving that into the default plugin would make sense to me too. It was a little confusing for me in the first place that there are two plugins.

[kripod]

Are there any updates regarding this issue? What should be done until a proper fix is available?

[m-allanson]

@kripod It sounds like this is the suggested workaround for now: https://github.com/gatsbyjs/gatsby/issues/318#issuecomment-357272207. Those changes would go in your local gatsby-node.js file, the docs on custom webpack configs have some more info on that.

[kripod]

@KyleAMathews I think it would definitely make sense to autoprefix every flavor of CSS in Gatsby v2.

[KyleAMathews]

@kripod yeah agreed. @m-allanson mentioned he wanted to take a hard look at all our CSS setup and fix things up.

[kripod]

I tried gatsby-plugin-postcss-sass, but enabling it caused weird errors (which I cannot detail right now).

Is there any chance that autoprefixing SCSS will be effortless in the near future?

[dustinhorton]

This is also an issue in gatsby-plugin-postcss-sass, see my issue @ https://github.com/gatsbyjs/gatsby/issues/4535 for a repro repo.

[Chuloo]

Looked through this with @m-allanson and the issue has been resolved in v2.

Closing this now, please make sure to update to the latest Gatsby version and check if that solves the issue. 👍 Here's the migration doc from v1 to v2 if that helps. 😄