Stylesheet order and structure leads to poor loading experience

The front page includes these four stylesheets:

  <link rel="stylesheet" href="/assets/application-513578e4.css">
  <link rel="stylesheet" href="/assets/system-system-fd030c9d.css">
  <link rel="stylesheet" href="/assets/tom-select-00e8031d.css" data-turbo-track="reload">
  <link rel="stylesheet" href="/assets/TomSelect_remove_button-4d5c34b9.css" data-turbo-track="reload">

The second one uses @import:

/* system color scheme (system contrast) */

@import url("/assets/light-normal-bf538ff1.css"); /* default */
@import url("/assets/light-high-56dfc432.css") (not (prefers-color-scheme: dark)) and (prefers-contrast: more);
@import url("/assets/dark-normal-b6128952.css") (prefers-color-scheme: dark) and (not (prefers-contrast: more));
@import url("/assets/dark-high-dd12f301.css") (prefers-color-scheme: dark) and (prefers-contrast: more);

This is a problem, bad for performance and/or behaviour.

• In some user agents (e.g. Firefox), @import does not block rendering. Consequently, the page may be rendered without all of the variables defined. In light mode, this makes links appear briefly black before being updated to the correct colour (which bothers me a lot, but probably not most). In dark mode, this is a flash of light background (which everyone will agree to be a very bad thing).
• In other user agents (Chromium looks to be behaving like this, but I’m not certain), @import does block rendering. Consequently, page load is slowed by another round trip—more than 300ms for me in India.

Three of the four are conditional stylesheets (frankly, the first one should be conditional too). People often suppose this (@import url(…) *condition*; or <link rel=stylesheet href=… media=*condition*>) will allow it to skip fetching non-matching stylesheets, but in practice I believe all major user agents fetch all stylesheets, possibly to avoid leaking information; I think they may lower the fetch priority or change render-blockingness of non-matching ones, but I’m not certain.

In light of this, and the fact that the stylesheets are small to begin with (and will compress very well together), I think it is best to inline the imports into system-system-*.css. I further recommend merging it into the application-*.css stylesheet.

(While I’m here, but since I’m feeling lazy: that TomSelect stylesheet is uncompiled SCSS. Either some widget is broken and the stylesheet should be fixed, or it was superfluous and should be removed.)