Use css injector - The current state of CSS handling + Solutions

[davidglezz]

Pull request template

We have special needs... tenemos necesidades especiales con respecto al manejo de css,
necesitamos tener el control de donde y cuando se inyecta el css, lo mas basico es:

• soportar que el css se añada al Document
• soportar que el css se añada a uno o varios shadowRoots
• Tree-shaking de css, no tiene sentido empaquetar todo el css de todos los componentes si solo se usan unos pocos.

Actualmente se hace con el plugin de rollup styles, que permite inyectar el css en una variable y añadir código js para decidir que hacer con ello. Esto, ademas, lo hace por cada "import" es decir, el css de cada componente se encuentra en una variable en el js de su componente. Permitiendo que si solo se usan 3 componentes, el bundle solo incluye esos 3 componentes con su css, nada mas.

Se quiere dejar de usar rollup por:

• Plugin de Vue ya no es compatible con rollup.
• Plugin de tailwind es para vite, no para rollup
• Plugin de typescript oficial de rollup no es compatible con plugin de vue.
• Velocidad
• Es un sistema obsoleto

Pero:

• Vite por si solo no puede reemplazar lo que hacíamos con rollup: https://vite.dev/guide/build#css-support
• Vite no hace css splitting en modo librería / no funciona como se espera: https://vite.dev/config/build-options#build-csscodesplit

Esta PR:

• Mejora el injector css (función addStyle...), mas simple.
• Se ha desarrollado un plugin de vite que invoca xCssInjector al cargar cada componente.
  • Para que el css de un componente se compile "inline" como variable js, hay que compilarlo con el flag customElement a true, esto no significa que convierta los componentes a custom element, solo mete el css como parte del componente para que funcione con el uso de defineCustomElement que no usaremos.
• Para el resto de css se usa vite-plugin-css-injected-by-js.