Out of Ordering Styling Between Dev and Build

[jordan-erisman]

• [ x ] I have tried upgrading by running bundle update vite_ruby.
• [ x ] I have read the troubleshooting section before opening an issue.

Description 📖

When there are multiple Vue (might happen in other frameworks) entrypoints that depend on the same child component, which causes a separate chunk, the shared component's css file gets loaded in different orders in dev and build mode.

Reproduction 🐞

Repro

Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 3.2.14
vite_rails: 3.0.13
rails: 7.0.4
node: v16.13.1
npm: 9.2.0
yarn: 1.22.11
pnpm: 7.9.3
ruby: ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin20]

installed packages:
vite-rails-test@ /Users/jerisman/Development/vite-rails-test
├─┬ @vitejs/plugin-vue@4.0.0
│ └── vite@4.0.4 deduped
├─┬ vite-plugin-ruby@3.1.3
│ └── vite@4.0.4 deduped
└── vite@4.0.4

Screenshots 📷

Dev:

Build:

Would changing this line to be imports + entries instead of entries + imports resolve the issue? What would be the drawbacks of doing so?

[ElMassimo]

Would changing this line to be imports + entries instead of entries + imports resolve the issue? What would be the drawbacks of doing so?

In short, no.

---

This problem is related to how code is bundled vs how code is loaded during development, and is something that I've observed for years (using Webpack).

It boils down to CSS specificity, and usually comes up when you have CSS rules with the same specificity in different components. In your example, if the bundler puts SharedComponent before Entry, the .parent rule wins, and viceversa.

For example, the order could change if the bundler moves SharedComponent to a separate chunk.

---

Unfortunately, this kind of problem is hard to spot (unless you are doing visual regression testing).

A few ways to prevent it:

• Use CSS rules with higher specificity when "overriding" component styles
• Use props to control styling, letting the component handle variants