feat(gatsby-plugin-less): add support for overriding the default options of css-loader

[yeskunall]

Yay! 💖

---

Closes #9142.

[pieh]

Some docs updated in README of the package would be great

[pieh]

Code itself looks good to me! :)

[yeskunall]

@pieh I was gonna update the docs, but I noticed that the feature request was made for css-loader and as I understand, you can chain css-loader with less-loader. I haven't looked into this much, but I am curious as to how this works.

I feel like if I understand this it'll help me update the docs appropriately. Thanks for understanding 😅

[pieh]

Way the webpack loaders works is that you can chain them together.

Important thing to know is that loaders run from bottom up - so here:

• we run less loader which will convert less to css
• next we run postcss which will apply some transformations on css
• next up we run css loader which will do couple of things:
  • it will handle @import and url inside css so files referenced by those functions/directives are handled by webpack and bundled in our output
  • if we are using css modules (kind of "less modules" here ;) ) - it will extract class names so you can use them in your js ( see https://github.com/css-modules/css-modules )

In the issue, example that was presented was overriding camelCase option, and this option tell css-loader how to handle css class names with dashes:

.with-dash {
  color: red;
}

import classNames from "./styles.module.css"

// styles will always be an object that maps class name in css to generated css module class name (so you can use same class name in multiple css modules, because generated classname will prevent collisions)

// depending on `camelCase` option it can be one of the following (just don't remember which setting produce what output):
classNames = {
  "with-dash": "some-weird-name-with-hashes"
}

classNames = {
  withDash: "some-weird-name-with-hashes"
}

classNames = {
  withDash: "some-weird-name-with-hashes",
  "with-dash": "some-weird-name-with-hashes",
}

[yeskunall]

Holy! That's an in-depth explanation. Still reading it, but just wanted to say I really appreciate it! 🤯

[yeskunall]

Thanks for being patient @pieh. I think it's okay to merge now 😅sorry for all the trouble!

Thanks 💖

[pieh]

Thanks for being patient @pieh. I think it's okay to merge now 😅sorry for all the trouble!

Don't worry about it - it's all good :)
Now we just need to wait for github to start working correctly again :)

[pieh]

Thanks @yeskunall!