Split global CSS code into smaller chunks

[Brenosalv]

Contributes to
#455

Tech debt
Currently the global CSS code style.less includes a bunch of non-global classes and other styles. Having a single, large CSS file like style.less with around 5800 lines of code can impact both performance and maintainability.

Expected
Implement code splitting by moving each chunk of CSS to their specific folders where they are used and keep the style.less with only the global CSS code.

Screenshots
It has 5886 lines of code:

commons.css:

[Brenosalv]

Having multiple less css modules is returning these warnings:

It's like webpack does not handle conflicting importing order between the css modules with Gatsby.

Possible solutions:

• Quick 1min read article: https://robertmarshall.dev/blog/fix-warn-chunk-commons-mini-css-extract-plugin-error-in-gatsby-js/
• Issue discussion from Webpack Github: New version 0.4.2 capture lot of warnings webpack-contrib/mini-css-extract-plugin#250

[travjenkins]

I think we are fine with this. We do not use a lot of nesting and specificity in our styling so it should not cause any big issues.

[Brenosalv]

Created an issue for the css order conflicts: #474.

[Brenosalv]

Closed with the PR 480.