feat!: lib css inject

examples/vite-project/src/App.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { NSpace } from 'naive-ui'
 import { Switch, SwitchIcon } from 'vue-dark-switch'
-import 'vue-dark-switch/dist/style.css'
 import WorkspacePremiumOutlined from '@vicons/material/es/WorkspacePremiumOutlined'
 import WorkspacePremiumTwotone from '@vicons/material/es/WorkspacePremiumTwotone'
 </script>

examples/vite-project/vite.config.ts

@@ -1,15 +1,15 @@
 import { Layers } from "vite-layers";
-import { HtmlPolyfill } from "vue-dark-switch/vite";
 
 // https://github.com/markthree/vite-layers
 export default Layers({
   normalize(config) {
     delete config.build;
+    // @ts-ignore
+    config.plugins = config.plugins.filter((p) => p.name !== "vite:lib-inject-css");
     return config;
   },
   extends: ["../../"],
   vite: {
     base: "/vue-dark-switch/",
-    plugins: [HtmlPolyfill()],
   },
 });

package.json

@@ -62,6 +62,9 @@
     "email": "1801982702@qq.com",
     "url": "https://github.com/markthree"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "devDependencies": {
     "@iconify-json/line-md": "^1.1.24",
     "@types/node": "^18.16.14",
@@ -78,6 +81,7 @@
     "unocss": "^0.52.3",
     "vite": "^4.3.8",
     "vite-layers": "^0.3.5",
+    "vite-plugin-lib-inject-css": "^1.2.0",
     "vite-plugin-warmup": "^0.1.0",
     "vue": "^3.3.4",
     "vue-tsc": "^1.6.5"

src/components/switch-icon.vue

@@ -1,24 +1,17 @@
 <script setup lang="ts">
 import { NIcon } from 'naive-ui'
-import { mountPresets } from '../composables/mount'
 import { isDark, toggleDark } from '../composables/theme'
 import WbSunnyOutlined from '@vicons/material/es/WbSunnyOutlined'
 import DarkModeOutlined from '@vicons/material/es/DarkModeOutlined'
 
 const props = withDefaults(
 	defineProps<{
 		size?: string
-		unmountPersets?: boolean
 	}>(),
 	{
 		size: '20px',
-		unmountPersets: false
 	}
 )
-
-if (!props.unmountPersets) {
-	mountPresets()
-}
 </script>
 
 <template>

src/components/switch.vue

@@ -1,28 +1,22 @@
 <script setup lang="ts">
 import { NSwitch, NIcon } from 'naive-ui'
 import { isDark } from '../composables/theme'
-import { mountPresets } from '../composables/mount'
 import WbSunnyOutlined from '@vicons/material/es/WbSunnyOutlined'
 import DarkModeOutlined from '@vicons/material/es/DarkModeOutlined'
 
 const props = withDefaults(
 	defineProps<{
 		round?: boolean
-		unmountPersets?: boolean
 		darkBackground?: string
 		lightBackground?: string
 	}>(),
 	{
 		round: false,
-		unmountPersets: false,
 		darkBackground: 'linear-gradient(135deg,#42e695,#3bb2b8)',
 		lightBackground: ''
 	}
 )
 
-if (!props.unmountPersets) {
-	mountPresets()
-}
 
 const railStyle = ({ checked }) => {
 	return {

src/exports.ts

@@ -1,7 +1,8 @@
 import "uno.css";
+import './polyfill/global.css' // default global css
+import './polyfill/global.js' // Must-have for vueuse
 
 export { default as Switch } from "./components/switch.vue";
 export { default as SwitchIcon } from "./components/switch-icon.vue";
 
 export { isDark, naiveTheme, toggleDark } from "./composables/theme";
-export { mountPresets, mountScript, mountStyle } from "./composables/mount";

src/index.ts

@@ -1,8 +1,10 @@
-import App from './App.vue'
-import { createApp } from 'vue'
+import App from "./App.vue";
+import { createApp } from "vue";
 
-import 'uno.css'
+import "uno.css";
+import "./polyfill/global.css"; // default global css
+import "./polyfill/global.js"; // Must-have for vueuse
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.mount('#app')
+app.mount("#app");

vite.config.ts

@@ -1,6 +1,7 @@
 import Unocss from "unocss/vite";
 import { defineConfig } from "vite";
 import Vue from "@vitejs/plugin-vue";
+import { libInjectCss } from "vite-plugin-lib-inject-css"
 import { builtinModules } from "node:module";
 
 const warmup = import("vite-plugin-warmup").then((m) =>
@@ -19,7 +20,7 @@ export default defineConfig({
         const ext = f === "es" ? "mjs" : f;
         return `${e}.${ext}`;
       },
-      entry: ["./src/exports.ts", "./src/vite.ts"],
+      entry: ["./src/exports.ts"],
     },
     rollupOptions: {
       external: [
@@ -33,5 +34,6 @@ export default defineConfig({
     warmup,
     Vue(),
     Unocss(),
+    libInjectCss()
   ],
 });