CSS from a common file included in multiple components should be deduplicated

[raihle]

Version

5.1.6

Reproduction link

https://github.com/raihle/vue-rollup-duplicate-css-repro

Steps to reproduce

Run npm ci && npm run build. Build output will be in ./dist/src.

What is expected?

All components refer to the same CSS file, and should continue to do so after the build.

What is actually happening?

Component1 and Component2, which both include the CSS using <style src=...>, have the CSS-to-be-injected "inlined".

Component3 and Component4, which instead import the CSS in their <script> tag, correctly refer to a shared shared-styles.css.js.

---

I am using rollup-plugin-vue@5.1.6. Vue and vue-template-compiler @ 2.6.11.

The shared CSS is:

.shared {
  padding: 1rem;
}

It shows up on line 21 of Component1.vue.js and Component2.vue.js.

I am trying to build a treeshakeable component library.