Split global CSS code into smaller chunks

estuary / marketing-site

0 stars 5 forks source link

Split global CSS code into smaller chunks #429

Closed Brenosalv closed 3 days ago

Brenosalv commented 1 month ago

Contributes to https://github.com/estuary/marketing-site/issues/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 commented 1 month ago

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: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/250

travjenkins commented 3 weeks ago

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 commented 1 week ago

Created an issue for the css order conflicts: https://github.com/estuary/marketing-site/issues/474.

Brenosalv commented 3 days ago

Closed with the PR 480.