Philomena recently migrated from Webpack to a newer frontend module bundler named Vite, which aims to make the process of working on frontend features much faster. This is mostly due to it not taking almost 10 seconds to recompile assets on save.

However, the way Vite expects you to load stylesheet files for hot reload support is… ridiculous:

import '../css/themes/default.scss';
import '../css/themes/dark.scss';
import '../css/themes/red.scss';

I know this has been around for a while, and was even a thing you could do in Webpack, but it still shocks me every time I see it. It's terrible for performance, too, because it makes the stylesheet load have to wait for the script.

I understand the reasoning this exists, which is attaching stylesheets to React components at the point of use, but how did anyone think this was a good idea, compared to just having some way to bundle stylesheet targets in your vite.config.ts?