Address the unstable CSS order in the web application production bundle: Tracking issue

[valerybugakov]

Problem to solve

The CSS rules order in the production environment is different from what we have in the development env. We can choose only one thing with the current build configuration:

1. Consistent CSS rules order in production.
2. Tree shaking powered by sideEffects: false.

See this comment on the unresolved issue:

In addition to that, mini-css-plugin makes no strong guarantee about the order of independent CSS files. It tries its best to keep the importing order, but there are some cases where this is not followed, e. g. because modules are split into multiple css bundles.
I would recommend to not rely on CSS order between multiple files in general.

See the Slack thread and the initial issue that triggered this investigation.

Measure of success

• We have a consistent order of CSS rules in the production and development of web application bundles.
• We use the production bundle for visual regression testing to ensure such issues are captured early.
• The CSS tree-shaking works without changes.

Solution Summary

• Restructure exports in packages with CSS modules to enable tree-shaking without relying on the sideEffects property.
  • Restructure exports in the wildcard package to enable tree-shaking without relying on the sideEffects property. #42218
  • Restructure exports in the search-ui package to enable tree-shaking without relying on the sideEffects property. #42219
• Remove sideEffects: false from packages with CSS modules #42220
• Use production build for frontend integration tests #22831
• Document the shortcomings of the mini-css-plugin related to CSS rules order. #42221
• Document guidelines for new packages with CSS modules. #42222

What specific customers are we iterating on the problem and solution with?

Internal Sourcegraph developers

Delivery plan

Tracked issues

@unassigned

• Restructure exports in the wildcard package to enable tree-shaking without relying on the sideEffects property. #42218
• Restructure exports in the search-ui package to enable tree-shaking without relying on the sideEffects property. #42219
• Remove sideEffects: false from packages with CSS modules #42220
• Document the shortcomings of the mini-css-plugin related to CSS rules order. #42221
• Document guidelines for new packages with CSS modules. #42222

Completed

• (🏁 905 days ago) WIP: Frontend Platform :: Refresh Prep Tracking issue #19555
• (🏁 587 days ago) Wildcard V2: <FileBreadcrumbs /> Tracking issue #27714
• (🏁 587 days ago) Wildcard V2: <NavMenu /> Tracking issue #27702
• (🏁 587 days ago) Wildcard V2: <MonacoInput /> Tracking issue #27682
• (🏁 561 days ago) Wildcard V2: Migration preparation tracking issue #27354

Legend

• 👩 Customer issue
• 🐛 Bug
• 🧶 Technical debt
• 🎩 Quality of life
• 🛠️ Roadmap
• 🕵️ Spike
• 🔒 Security issue
• 🙆 Stretch goal

/cc @taylorsperry @muratsu