<style /> Node Replacement Breaks Order in Development

[Erik Erikson]

As I understand from this comment, <style /> nodes are stripped from the SSR version of the page and re-inserted to preserve source maps. However, the order appears to be lost during this replacement—as they are removed from DOM nonsequentially, but added again sequentially—causing a brief initial change in certain styles (especially overrides) that rely on document order.

To be clear, relying on module order as a means of writing CSS is not something I necessarily think this package should support. The problem I think is that when anybody tries to do it (a natural assumption coming from traditional CSS composition), inconsistent results are shown, often creating false positives that lead to larger problems. I'd love to see the order maintained from the server for this purpose.

As it's a server-related issue I'm not sure what a meaningful online example might look like, but I'm happy to provide any further context or information.

[Yama-Tomo]

I think this issue should be fixed.
I faced a problem when using vuetify and nuxt.js.

how to reproduction

• clone the reproduction repo: https://github.com/Yama-Tomo/vue-style-loader-css-order-sandbox
• run yarn && yarn dev (development)
  • -> header color is white
• run yarn build && yarn start (production)
  • -> header color is #37AD70

This problem confuses us.