melhorias de css

IA.md

@@ -51,7 +51,8 @@ import { createVuetify } from "vuetify";
 
 // eli-vue
 import EliVue from "eli-vue";
-import "eli-vue/dist/eli-vue.css";
+// eli-vue
+import EliVue from "eli-vue";
 
 const vuetify = createVuetify({});
 
@@ -61,8 +62,8 @@ createApp(App)
   .mount("#app");
 ```
 
-> **IMPORTANTE**: O import do CSS (`import "eli-vue/dist/eli-vue.css";`) é **obrigatório**. 
-> O pacote utiliza **namespacing estático (BEM)** e não estilos scoped, portanto o arquivo CSS contém toda a estilização necessária.
+> **Nota**: O CSS é **injetado automaticamente** no bundle JavaScript. Não é necessário importar arquivos `.css` manualmente.
+
 
 ### 2) Importação direta (quando não quiser plugin)
 
@@ -78,9 +79,6 @@ import {
   EliEntradaParagrafo,
   EliEntradaSelecao,
 } from "eli-vue";
-
-// OBRIGATÓRIO: Importar o CSS global
-import "eli-vue/dist/eli-vue.css";
 ```
 
 ---
@@ -534,17 +532,12 @@ Provável causa: componente não foi registrado.
 
 ### 2) Estilos não aplicam ou componentes "quebrados"
 
-**Causa provável**: O CSS do pacote não foi importado.
+**Causa provável**: O CSS não foi injetado corretamente pelo JavaScript.
 
-O `eli-vue` removeu o uso de `<style scoped>` para evitar problemas de hidratação e compatibilidade entre builds.
-Todo o estilo reside em arquivos CSS estáticos que precisam ser carregados.
+O `eli-vue` injeta o CSS automaticamente via JS. Verifique se o bundle está sendo carregado corretamente e se não há bloqueios de Content Security Policy (CSP) para injeção de estilos `<style>`.
 
-**Solução**:
-Adicione no seu `main.ts` ou componente raiz:
+Anteriormente era necessário importar o CSS manualmente, mas **isso não é mais necessário**.
 
-```ts
-import "eli-vue/dist/eli-vue.css";
-```
 
 ### 3) Erro de tipo em `celulaTabela`
 
@@ -564,8 +557,7 @@ Quando for integrar `eli-vue` num projeto existente:
 
 1) Verifique se **Vue 3**, **Vuetify 3** e **lucide-vue-next** estão instalados.
 2) Prefira usar o **plugin** do `eli-vue` (simplifica registro global).
-3) Garanta o import do CSS do pacote (`eli-vue/dist/eli-vue.css`).
-4) Use `celulaTabela` para construir colunas de tabelas de forma tipada.
+3) Use `celulaTabela` para construir colunas de tabelas de forma tipada.
 5) Ao definir tabelas, use `tipoEliTabelaConsulta<T>` para garantir que colunas e filtros batam com o tipo de dados.
 
 ---

README.md

@@ -118,7 +118,6 @@ import { createVuetify } from "vuetify";
 
 // eli-vue (Design System)
 import EliVue from "eli-vue";
-import "eli-vue/dist/eli-vue.css";
 
 const vuetify = createVuetify({
   // opcional: componentes/directives/tema do seu projeto
@@ -304,7 +303,6 @@ Você provavelmente esqueceu de:
 Confirme que o consumidor importou:
 
 - `vuetify/styles`
-- `eli-vue/dist/eli-vue.css`
 
 ### 3) Ícones não aparecem
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-vue",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "private": false,
   "main": "./dist/eli-vue.umd.js",
   "module": "./dist/eli-vue.es.js",
@@ -10,8 +10,7 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/eli-vue.es.js",
       "require": "./dist/eli-vue.umd.js"
-    },
-    "./dist/eli-vue.css": "./dist/eli-vue.css"
+    }
   },
   "scripts": {
     "prebuild": "npm version patch --no-git-tag-version",
@@ -30,6 +29,7 @@
     "sass": "^1.94.2",
     "typescript": "^5.0.0",
     "vite": "^6.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-vuetify": "^2.1.2",
     "vue": "^3.4.0",
     "vue-tsc": "^3.1.6",

pnpm-lock.yaml

@@ -45,6 +45,9 @@ importers:
       vite:
         specifier: ^6.0.0
         version: 6.4.1(@types/node@24.10.1)(sass@1.94.2)
+      vite-plugin-css-injected-by-js:
+        specifier: ^3.5.2
+        version: 3.5.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))
       vite-plugin-vuetify:
         specifier: ^2.1.2
         version: 2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2)
@@ -687,6 +690,11 @@ packages:
     resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
     hasBin: true
 
+  vite-plugin-css-injected-by-js@3.5.2:
+    resolution: {integrity: sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==}
+    peerDependencies:
+      vite: '>2.0.0-0'
+
   vite-plugin-vuetify@2.1.2:
     resolution: {integrity: sha512-I/wd6QS+DO6lHmuGoi1UTyvvBTQ2KDzQZ9oowJQEJ6OcjWfJnscYXx2ptm6S7fJSASuZT8jGRBL3LV4oS3LpaA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -1311,6 +1319,10 @@ snapshots:
 
   uuid@13.0.0: {}
 
+  vite-plugin-css-injected-by-js@3.5.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2)):
+    dependencies:
+      vite: 6.4.1(@types/node@24.10.1)(sass@1.94.2)
+
   vite-plugin-vuetify@2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2):
     dependencies:
       '@vuetify/loader-shared': 2.1.1(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2)

vite.config.ts

@@ -4,12 +4,14 @@
 import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
 import vuetify from "vite-plugin-vuetify"
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
 import path from "node:path"
 
 export default defineConfig({
   plugins: [
     vue(),
     vuetify({ autoImport: true }),
+    cssInjectedByJsPlugin(),
   ],
   resolve: {
     alias: {