Component included in production build when using named imports even though it's not included

[adriaanmeuris]

I'n using relativeCSSInjection to build a UI library with 2 components Comp1 and Comp2. This works fine and generates different entries for consuming the library:

• lib.js: contains all components with embedded css
• Comp1.js: contains component 1 with embedded css
• Comp2.js: contains component 2 with embedded css

When consuming this library, I'd like to use named imports like this:

import { Comp1 } from 'lib.js'; // Component 2 is included in bundle

Even though I'm not using Comp2, it will be included in the bundle:

When consuming this library with a direct import like this:

import Comp1 from 'Comp1.js'; // Component 2 is not included in bundle = desired behaviour)

In this case, Comp2 won't be included in the bundle (= desired behaviour):

You can find a reproduction repository here: https://github.com/adriaanmeuris/css-injected-by-js-issue

I did some research and I think this might be caused by vitejs/vite#4389.

Can you confirm this is the cause of this behaviour, and if not: how can I use named imports without having other components being included in the final bundle?

[marco-prontera]

Hi @adriaanmeuris I tried your repository with and without this plugin but the behaviour seems is the same, this plugin only takes the CSS and add it through the JS, the relativeCSSInjection option is experimental because we are not sure if it's usable in every case.
The behaviour you have is a little bit strange because you are using only one component at time so the three shaking must "delete" the unused export, but this is not related to that plugin I'm sorry, if you find some problem with this plugin please open an issue, I will close this issue for the moment