Incompatible with Vite bundler

[smokku]

Vite does not process files during development. It serves application source using browser built-in support for JavaScript modules.

This leads to style9 failing in runtime:

Uncaught Error: style9.create calls should be compiled away

[johanholmerin]

Can confirm that vite dev mode doesn't work. If i understand correctly it would need its own plugin, based on the existing rollup one, that on code load transforms the file, stores the CSS, and triggers a HMR update of the CSS. If that is correct, it shouldn't be too hard to implement. It's not something I have any plans to add, but a PR would be welcome.

[johanholmerin]

There is an experimental plugin in the vite branch if you want to try it.

[smokku]

I can confirm this plugin works in the basic/example case.

But if I import any real CSS file besides using style9, it fails:

14:26:19 [vite] Internal server error: /home/smoku/dev/frontend/app/src/main.css: Missing semicolon. (1:4)

> 1 | body {
    |     ^
  2 |   margin: 0;
  3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
  4 |     'Droid Sans', 'Helvetica Neue', sans-serif;
  Plugin: style9
  File: /home/smoku/dev/frontend/app/src/main.css
  1  |  body {
     |      ^
  2  |    margin: 0;
  3  |    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',

[johanholmerin]

Does it work if you add exclude: '**/*.css' to the plugin config?

[smokku]

Yes siree, indeed it works!

Thanks. :D

[smokku]

Sheesh… It works fine during dev.

But I cannot make it work during production build. Plugin generates separate file, but does not make it part of assets bundle. This means it is not getting hashed id file and is not attached to generated index.html. I tried attaching it manually, but rollup is removing my link trying to replace it with bundled one.

[johanholmerin]

If you want the file name to be hashed you have to use the name property instead of fileName.

[smokku]

OK. I don't know whether this help me to make the plugin work during production build?