Feature Request: make Postcss plugins configurable, update dependancies and add to documentation

[01ivr3]

There seems quite a lot of issues related to configuring Postcss plugins and the gatsby-plugin-postcss-sass plugin.

Here are some:
#2776, [gatsby-plugin-postcss-sass] Separate PostCSS and Sass
#2462, Update postcss related plugins
#2823, Ignored custom PostCSS config when building site
#3208, Tailwind CSS (postcss plugin) does not work via gatsby-plugin-postcss-sass <= mine
#2188, RuckSack-CSS unhandled rejection
#2106, Would love to see an uncss plugin
#2328, [gatsby-source-wordpress] UNHANDLED REJECTION during gatsby build or develop
#1347, [1.0] When using gatsby-plugin-sass final output CSS isn't run through autoprefixer

It would great to be able to easily configure Gatsby's Postcss plugins, and have this support documented. As well as update the current postcss dependancies. The later I'd guess is coming in the next major rev of Gatsby with the latest version of webpack.

Here are two solid examples of other webpack static site generators that also include Postcss and cssnext by default, and natively expose this in both their configuration and documentation.

Nuxt.js

How to add PostCSS plugins?
Customize PostCSS Loader plugins

Spike

FAQ: Adding a postcss plugin

A robust search solution, like Algolia or equivalent, integrated into Gatsby's docs would also likely be quite helpful.

[m-allanson]

I'm not sure on the specifics, but I think there are changes afoot for Gatsby's PostCSS setup in version 2.

Docs search can be tracked in #3097

[KyleAMathews]

@01ivr3 completely agree! My personal problem is I don't use PostCSS and never have (css-in-js ftw :-)) so I scrapped together the solution by copy/pasting config from around the internet :-)

We're working on Gatsby v2 #2641 Would you like to lead an effort to improve how we expose PostCSS & add great documentation? I'd really love to see great support for PostCSS as I know it's widely used and really valuable.

[markpinero]

@KyleAMathews I’ve been working with PostCSS in my personal projects lately and would love to try my hand at this.

[KyleAMathews]

I'm working on actively on v2 of Gatsby — would love some help with improving PostCSS support in v2! There's a v2 branch we're pushing PRs to and I'll start releasing alphas next week.

[fk]

@01ivr3 Docsearch is live since a few days now thanks to @m-allanson and his work in #3097. ✌️

[jonmilner]

@KyleAMathews As someone who's moved on from Sass, but still prefers writing CSS in .css files, I'm glad to hear there's interest in improving PostCSS support.

I'd love to be able to drop a postcss.config.js into the project root, install the dependencies, and have Gatsby handle the rest.

FWIW, this is my go-to PostCSS config (all the benefits of Sass, with none of the features I don't want) - https://github.com/jonmilner/postcss-config/blob/master/postcss.config.js

[madeleineostoja]

Yep agree with @jonmilner - would be great it Gatsby didn't do anything beyond reading a postcss.config.js in the root and left all processing up to the user. Seems oddly opinionated to include destructive css transforms like cssnext (breaks native css vars, for example). That's how postcss-loader works out of the box, so should be easy to implement.

As a workaround for anyone that wants the default behaviour back now, just force postcss-loader to ^v2 in your npm deps and nuke Gatbsy's default postcss config

exports.modifyWebpackConfig = ({ config }) => {
  config.merge({
    postcss() {}
  });

  return config;
};

[harrisjose]

I'm with @jonmilner here too, Gatsby should probably leave this up to users to configure for themselves. Although I'm kinda new to Gatsby, I'd like to help with this if possible.

[m-allanson]

For Gatsby v2 the default PostCSS config is much more minimal - there's no cssnext by default.

For v2 ideally there'd be a gatsby-plugin-postcss, which would:

• Use Gatsby's default browserslist config or load it from package.json
• Read in a PostCSS config file from the project root
• Apply PostCSS settings to Gatsby's webpack config

There's an old PR that does some of this at #4428. It'd be great if someone wanted to take that work and start creating gatsby-plugin-postcss from it.

[madeleineostoja]

Read through that PR - just want to say (as a heavy postcss user) that yep that sounds like a good solution. TBH it strikes me as odd that Gatsby does any post/pre processing of CSS/SCSS/less/etc out of the box, feels like all of that belongs in userland. Like, as a user I wouldn't expect gatbsy to autoprefix my CSS without me doing anything. But I'm not familiar with Gatsby's innards so I'm sure there's a reason.

Re: plugin, I'm super new to Gatsby so I might not be the person for it, but if nobody else is up for it as v2 gets closer to launch I'll take a crack.

[rossthedevigner]

@seaneking In your suggestion about nuking Gatsby's postcss config, what does one need to use a custom one like the one posted by @jonmilner?

[madeleineostoja]

Add a postcss.config.js to the root of your project. You can see more in the docs for postcss-loader

[harrisjose]

I was taking a look at getting the postcss-plugin done for v2 along with @m-allanson and I was wondering if any of you had any opinions about the following.

Right now, in v2, the default setup includes a postcss-loader with 2 plugins (autoprefixer and flexbugs). However, removing all this in favour of making the default setup simpler, seems to be the better and more straightforward approach.

Everything postcss related will then need to be configured via the plugin, and by extension, a postcss.config.js in your project root. This would also mean that certain plugins that depend on the internally included postcss loader (like gatsby-plugin-sass and gatsby-plugin-less) would need to separately include a version of the loader.

If there is enough demand for the setup in gatsby v1, we could either add that as the default config in the plugin (which I dont think is a good idea considering it breaks stuff for a lot of us) or extract it into plugin like gatsby-plugin-postcss-compat. Folk moving from v1 to v2 can just add that to their gatsby-config and keep things working like it used to.

I think this would be a good approach to go ahead with, unless anyone has any other opinions or ideas.

[ooloth]

Removing any default postcss setup would be ideal.

Since some cases require carefully controlling the order in which the postcss plugins run, it would be cleaner to start from scratch than to have to override or merge with a default postcss config.

[madeleineostoja]

Agree with @ooloth - Gatsby shouldn't do any Postcss processing itself.

I wouldn't expect it to autoprefix my CSS out of the box, and it's common for devs to include autoprefixer and other plugins themselves via a postcss.config.js. So, not a big ask for a cleaner and more straightforward setup.

Re: v1 compat, IMO the value isn't there to make a dedicated plugin for it, and making it the defualt setup seems an unnecessary footgun for the future. Why not just add a note in the migration guide with a snippet of v1's config for users to add to a postcss.config.js file?

[m-allanson]

Hey folks, a new plugin gatsby-plugin-postcss for use with Gatsby v2 was published over in #6217.

Please give it a spin and report back here with any problems.

[m-allanson]

Actually I'm going to close this and ask you to create new issues for problems that you find 🙏