silx-kit / h5web

React components for data visualization and exploration
https://h5web.panosc.eu/
MIT License
165 stars 17 forks source link

Fix style ordering issues caused by composing from imported CSS modules #1589

Closed axelboc closed 3 months ago

axelboc commented 3 months ago

Vite has a new plugin that fixes composition of CSS Modules by treating them as JS modules. It is planned to be integrated into Vite core but it may take a while.

There's one case that is not "fixed" by the plugin, which is when composing from a module that is itself imported from a React component. It's all explained here: https://github.com/privatenumber/vite-css-modules/issues/7. To address this, I decided to refactor the code to never compose from a module that is also imported. I've explained and documented this in the CONTRIBUTING guide.

The plugin, in addition to the refactoring above, allow us to remove all of our !important workarounds and bring much needed explanations and reassurance that there is indeed a way to use CSS Modules safely.