[dev-mode, webpack] style-loader approach to injection results in css transitions triggering

[runspired]

Given:

• a style rule that contains a transition: e.g.

body {
  background-color: var(--main-bg-color);
  transition: background-color 1s ease-out;
}

• a browser evaluation criteria that needs to be made on initial load: e.g.

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: var(--dark-grey);
  }
}

The style-loader approach used in development will result in the css transition triggering when it should not because of the dynamic insertion of the stylesheet.

In production, a static link is used which will not result in the transition triggering.

Since this is dev-mode only and the reason for using style-loader is dev performance, likely there's nothing to change here, but I felt this quirk should be documented for anyone else that stumbles upon it.