feat(css): remove auto-inject css

because of strict CSP issues, inejcted styles cannot be applied on some environments (see #332)

BREAKING CHANGE: when migrating, ensure to import vue3-select-component/style into your project, where you are using the component

Author: TotomInc

package-lock.json

@@ -19,6 +19,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
+    },
+    "./styles": {
+      "import": "./dist/styles.css",
+      "require": "./dist/styles.css"
     }
   },
   "main": "dist/index.umd.js",
@@ -66,7 +70,6 @@
     "postcss": "8.5.6",
     "typescript": "5.9.2",
     "vite": "7.1.12",
-    "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-vue-devtools": "8.0.3",
     "vitepress": "1.6.4",

package.json

@@ -4,7 +4,6 @@ import { resolve as pathResolve } from "node:path";
 import { fileURLToPath, URL } from "node:url";
 import vue from "@vitejs/plugin-vue";
 import { defineConfig } from "vite";
-import cssInject from "vite-plugin-css-injected-by-js";
 import dts from "vite-plugin-dts";
 import vueDevtools from "vite-plugin-vue-devtools";
 
@@ -29,7 +28,6 @@ export default defineConfig((configEnv) => {
 
       plugins: [
         ...config.plugins!,
-        cssInject(),
         dts({ tsconfigPath: "tsconfig.build.json", cleanVueFileName: true }),
       ],
 
@@ -45,7 +43,17 @@ export default defineConfig((configEnv) => {
         },
         rollupOptions: {
           external: ["vue"],
-          output: { globals: { vue: "Vue" } },
+          output: {
+            globals: { vue: "Vue" },
+            // Change default name of the .css file built.
+            assetFileNames: (assetInfo) => {
+              if (assetInfo.names.includes("vue3-select-component.css")) {
+                return "styles.css";
+              }
+
+              return assetInfo.names[0];
+            },
+          },
         },
       },
     };