feat(select): auto-inject css with js, don't need to import separately the css file

Author: TotomInc

README.md

@@ -47,8 +47,6 @@ Use it in your Vue 3 app:
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 
-import "vue3-select-component/dist/style.css";
-
 const option = ref("");
 </script>
 
@@ -77,8 +75,6 @@ It also leverages the power of generics to provide types for additional properti
 import { ref } from "vue";
 import VueSelect, { type Option } from "vue3-select-component";
 
-import "vue3-select-component/dist/style.css";
-
 type UserOption = Option<number> & { username: string };
 
 const selectedUser = ref<number>();

docs/demo/custom-option-slot.md

@@ -74,8 +74,6 @@ const selected = ref("");
 
 ```vue
 <script setup lang="ts">
-import "vue3-select-component/dist/style.css";
-
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/demo/multiple-select.md

@@ -34,8 +34,6 @@ Selected value(s): **{{ selected.length ? selected.join(", ") : "none" }}**
 
 ```vue
 <script setup lang="ts">
-import "vue3-select-component/dist/style.css";
-
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/demo/pre-selected-values.md

@@ -47,9 +47,7 @@ const multiSelected = ref(["option_3", "option_5"]);
 ## Demo source-code
 
 ```vue
-<script setup>
-import "vue3-select-component/dist/style.css";
-
+<script setup lang="ts">
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/demo/single-select.md

@@ -29,8 +29,6 @@ Selected value: **{{ selected || "none" }}**
 
 ```vue
 <script setup lang="ts">
-import "vue3-select-component/dist/style.css";
-
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/demo/with-complex-menu-filter.md

@@ -67,8 +67,6 @@ function switchFilter() {
 
 ```vue
 <script setup lang="ts">
-import "vue3-select-component/dist/style.css";
-
 import { computed, ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/demo/with-menu-header.md

@@ -51,8 +51,6 @@ const selected = ref("");
 
 ```vue
 <script setup>
-import "vue3-select-component/dist/style.css";
-
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/getting-started.md

@@ -36,8 +36,6 @@ Import the component with the styling, and use it in your Vue 3 application:
 
 ```vue
 <script setup lang="ts">
-import "vue3-select-component/dist/style.css";
-
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 
@@ -70,8 +68,6 @@ To enable the multiselect feature, all you need to do is:
 
 ```vue
 <script setup>
-import "vue3-select-component/dist/style.css";
-
 import { ref } from "vue";
 import VueSelect from "vue3-select-component";
 

docs/styling.md

@@ -6,6 +6,10 @@ title: 'Styling'
 
 Vue 3 Select Component provides 2 types of customization available in the component.
 
+::: tip
+The default component styling is already included with the VueSelect component, you don't need to import any CSS file to make it work.
+:::
+
 ## CSS variables
 
 CSS variables is the easiest way to customize the component style but provides less flexibility over your design. When importing the component, you will notice that CSS variables are injected into the `:root` scope and are prefixed with `--vs-select-[...]`.

package-lock.json

@@ -19,11 +19,6 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
-    },
-    "./dist/style.css": {
-      "types": "./dist/style.css",
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
     }
   },
   "main": "dist/index.umd.js",
@@ -65,6 +60,7 @@
     "sass": "1.77.6",
     "typescript": "5.5.2",
     "vite": "5.3.2",
+    "vite-plugin-css-injected-by-js": "3.5.1",
     "vite-plugin-dts": "3.9.1",
     "vite-plugin-vue-devtools": "7.3.5",
     "vitepress": "1.2.3",

package.json

@@ -5,17 +5,16 @@ import { type UserConfig, defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueDevtools from "vite-plugin-vue-devtools";
 import dts from "vite-plugin-dts";
+import cssInject from "vite-plugin-css-injected-by-js";
 
 const resolve = (path: string) => fileURLToPath(new URL(path, import.meta.url));
 
 // https://vitejs.dev/config/
 export default defineConfig((configEnv) => {
-  // Default shared config by all modes.
+  // Default config shared config by all modes.
   const config: UserConfig = {
     plugins: [vue()],
-    resolve: {
-      alias: { "@": resolve("./src") },
-    },
+    resolve: { alias: { "@": resolve("./src") } },
   };
 
   // When running vitest, add the test config.
@@ -36,6 +35,7 @@ export default defineConfig((configEnv) => {
 
       plugins: [
         ...config.plugins!,
+        cssInject(),
         dts({ tsconfigPath: "tsconfig.build.json", cleanVueFileName: true }),
       ],