Update postcss related plugins

[szimek]

The current versions of postcss related plugins are pretty outdated, i.e.:

package	used by gatsby	latest
postcss-cssnext	^2.8.0	3.0.2
postcss-import	^8.2.0	11.0.0
postcss-loader	^0.13.0	2.0.8
postcss-reporter	^1.4.1	5.0.0

The main reason why I looked into it, is that postcss-reporter version used by gatsby has a small issue where it prints out undefined [undefined] for every @import ... in *.module.css files when building the app, e.g.:

...

info bootstrap finished - 5.501 s

src/components/footer.module.css
undefined [undefined]

src/components/navbar.module.css
undefined [undefined]

src/layouts/index.css
undefined [undefined]
undefined [undefined]
undefined [undefined]

...

It doesn't really break anything - it's just an issue with logging messages (postcss/postcss-import#277 (comment)).

It looks like neither of these plugins introduced a serious breaking changes for end users, so updating them shouldn't cause any bigger issues.

I tried to create a PR, but I can't figure out how to use version of gatsby with updated dependencies in my own project - yarn was either overwriting the linked version or it kept the old dependencies...

[KyleAMathews]

On creating a PR — check out gatsbyjs.org/docs/how-to-contribute/

[szimek]

@KyleAMathews I did - that's how I found the issue with build:cli task missing in npm run watch ;)

I had an issue when running gatsby-dev that while it did copy everything to my repo, my yarn.lock file was still listing old postcss dependencies and I wasn't sure which version of postcss plugins were used when I ran gatsby develop. When I ran yarn install in my repo to let yarn know that gatsby has updated dependencies, it overwrote the whole gatsby package copied by gatsby-dev. I tried using yarn link for `gatsby as well, but I also had some issues with it. I'll try it again :)

[KyleAMathews]

yeah, whenever you run yarn, you have to restart gatsby-dev cause yarn overwrites everything.

[szimek]

@KyleAMathews I read it all again and I still don't get how to try out gatsby with updated dependencies... If I run gatsby-dev in my project it will copy gatsby package, but it won't copy its updated dependencies. If I run yarn now, to install these dependencies from copied version of gatsby package.json file, it will overwrite gatsby package...

I tried using yarn link, but after I run yarn link gatsby in my repo, when I try to reinstall all dependencies, I'm getting:

$ yarn
yarn install v1.2.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-helmet@5.2.0" has unmet peer dependency "react@>=15.0.0".
error An unexpected error occurred: "ENOENT: no such file or directory, lstat '/Users/.../my_repo/node_modules/gatsby/node_modules/hoek/.travis.yml'".

For now, I added postcss-reporter@5.0.0 as a dependency to my repo and copied it to node_modules/gatsby/node_modules and it seems like it these undefined [undefined] messages are gone, but it's pretty far from correct solution, because I haven't copied dependencies of postcss-reporter@5.0.0 :/

Any tips? :)

[KyleAMathews]

Hmm yeah updated dependencies like this are hard to test. I am wary of doing major updates on large dependencies though.

V2 is coming out soon. Could you look over the v2 branch and see if things look good?

#2641

[szimek]

Sure, I can prepare this PR for the v2 branch. It looks like some postcss plugins were updated there, but e.g. postcss-reporter is still at the same 1.4.1 version, that causes this undefined [undefined] issue.

[ahstro]

Any progress on this? Seems like an easy enough fix

[jlengstorf]

I tried to update the postcss-* dependencies locally and things broke. I don't have time to really dig into it, but this is going to require more than just bumping versions.

[ahstro]

That's a bummer.. Thanks for the effort though :)

[szimek]

With #6217 to be released soon, it's no longer needed.