Gatsby: Add information about css-loader version and point to its actual documentation

[SilencerWeb]

Summary

Currently, Gatsby uses [email protected] and when it comes to configuration of this loader, Gatsby's documentation always points on css-loader's documentation which is good except the fact that current css-loader's version is 3.6.0 and it has a lot of breaking changes in their API, including adding and removing some options.

So, basically, Gatsby's documentation says that you can configure this loader like it is documented here but actually, you can't. For example, such options as localsConvention, onlyLocals and esModule are introduced in new css-loader's versions and not available in [email protected]. Such options as localIdentName and camelCase were removed and there is no documentation for them.

Today I spent a lot of time figuring out how to set up css-loader so it would convert my dashed classes into camel-cased but also leave original ones. Apparently, I had to set camelCase: true (in versions of the loader, localsConvention: 'camelCase' is an equivalent for this).

So my proposal is to point in the documentation that Gatsby is using [email protected] and also replace the link that leads to css-loader documentation on this one — https://github.com/webpack-contrib/css-loader/tree/version-1. I'm sure it would save me a lot of time and what is more important — it can save a lot of time for others.

Not sure about places where this needs to be done, but here is one of them — https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass.

[vladar]

Sorry to hear you've wasted some time because of this. The note in docs makes perfect sense to me. Mind opening a PR with suggested changes?

Thanks for caring about the community 💜

[SilencerWeb]

I'll try to open it this weekend. Any suggestions and tips? 🙂

[meandillar]

I have been attempting to configure css-loader use v3 docs for the last couple of hours. Glad I came across this issue.

[graysonhicks]

PR addressing the link in the primary Gatsby docs. https://github.com/gatsbyjs/gatsby/pull/25575

~Will be creating PRs in the appropriate plugins doing the same.~

Updated PR to also update links to point to v1 in READMEs of several maintained plugins:

• gatsby-plugin-postcss
• gatsby-plugin-sass
• gatsby-plugin-less