Support for dev server

[bytestream]

🚀 Feature Request

Is your feature request related to a problem? Please describe.

I would like to append css to the shadow dom - a feature which is currently unsupported by Vite (vitejs/vite#11855). This plugin currently works great on vibe build, but does not run at all on vite (development server). My understanding that this is by design - https://github.com/marco-prontera/vite-plugin-css-injected-by-js/blob/main/src/index.ts#L40.

---

Describe the solution you'd like

• I would like the plugin to run on the vite command (development server) as well as vite build

---

Describe alternatives you've considered

• I currently have environment specific code which ensures the shadow dom is only used in production. But it is not ideal to have two different code paths.

---

Additional context

[marco-prontera]

Hi, I'll check if it's possible this week. Thank you for opening the issue

[marco-prontera]

@bytestream Could you give me a sample repository so I can do some testing directly?

[htuomola]

@bytestream so did you get it working in build step & shadow dom - injecting styles to the shadow root? Did you have to do anything special for that? I'm trying to achieve the same thing.

[bytestream]

@marco-prontera sure, see https://github.com/bytestream/vite-plugin-css-injected-by-js-demo

[felixpaq]

Good morning @marco-prontera! Did you have the chance to take a look into this?

[marco-prontera]

Hi @felixpaq, I'm working on it ;)

[marco-prontera]

Hi the v3.4.0-beta.0 that contains the code to support dev server is live, to use the plugin also in dev mode you need to configure some params: https://github.com/marco-prontera/vite-plugin-css-injected-by-js/tree/v3.4.0-beta.0?tab=readme-ov-file#dev-object

Note:
The dev environment isn't equally to the build phase. What happen in the dev environment can't be the same as in the build phase, so for that reason some parameter can't be used and some others doesn't make sense to run in the dev environment.
The injectCode or the injectCodeFunction are called multiple times in the dev environment since in dev it can't "bundle" the whole css code as in the build phase.

If some of you have a solution you can open a PR or share the information.

I'd love to hear your feedback, thanks guys!

[marco-prontera]

@bytestream have you tried?

[bytestream]

@marco-prontera it works a treat 👀 Thanks very much for your efforts!

[marco-prontera]

Available in v3.4.0, thank you!