feat: inject css

components.d.ts

@@ -1,22 +1,19 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
-    'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
-    'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
     CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
     CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default']
     Expand: typeof import('./src/components/Expand.vue')['default']
     Footer: typeof import('./src/components/Footer.vue')['default']
     HeadlessToast: typeof import('./src/components/HeadlessToast.vue')['default']
     Hero: typeof import('./src/components/Hero.vue')['default']
     Installation: typeof import('./src/components/Installation.vue')['default']
-    'Mdi:heart': typeof import('~icons/mdi/heart')['default']
     Others: typeof import('./src/components/Others.vue')['default']
     Position: typeof import('./src/components/Position.vue')['default']
     Styling: typeof import('./src/components/Styling.vue')['default']

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build:docs": "vite build --mode docs",
-    "build:lib": "vue-tsc --noEmit && vite build --mode lib",
+    "build:lib": "vite build --mode lib && vue-tsc -p tsconfig.build.json",
     "preview": "vite preview",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
@@ -19,13 +19,13 @@
     "lib",
     "volar.d.ts"
   ],
-  "main": "./lib/vue-sonner.umd.cjs",
+  "main": "./lib/vue-sonner.cjs",
   "module": "./lib/vue-sonner.js",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/vue-sonner.js",
-      "require": "./lib/vue-sonner.umd.cjs"
+      "require": "./lib/vue-sonner.cjs"
     }
   },
   "sideEffects": [
@@ -34,21 +34,21 @@
   "types": "./lib/index.d.ts",
   "license": "MIT",
   "devDependencies": {
-    "@iconify/json": "^2.1.104",
-    "@types/node": "^18.7.14",
-    "@unocss/reset": "^0.45.18",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "@vueuse/core": "^9.1.1",
-    "@vueuse/head": "^1.1.23",
-    "highlight.js": "^11.6.0",
-    "typescript": "^4.6.4",
-    "unocss": "^0.45.13",
-    "unplugin-icons": "^0.14.9",
-    "unplugin-vue-components": "^0.22.4",
-    "vite": "^4.4.6",
-    "vite-plugin-dts": "^3.3.1",
-    "vite-plugin-lib-inject-css": "^1.0.1",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.6"
+    "@iconify/json": "^2.2.172",
+    "@types/node": "^18.19.8",
+    "@unocss/reset": "^0.58.3",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/tsconfig": "^0.5.1",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/head": "^2.0.0",
+    "clean-css": "^5.3.3",
+    "highlight.js": "^11.9.0",
+    "typescript": "^5.3.3",
+    "unocss": "^0.58.3",
+    "unplugin-icons": "^0.18.2",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.0.12",
+    "vue": "^3.4.15",
+    "vue-tsc": "^1.8.27"
   }
-}
+}

packages/Sonner.vue

@@ -2,12 +2,8 @@
   <div>Sonner</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
+<script lang="ts" setup>
+defineOptions({
   name: 'Sonner'
 })
 </script>
-
-<script lang="ts" setup></script>

packages/Toast.vue

@@ -128,11 +128,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { Component, PropType } from 'vue'
+import './styles.css'
+
+import type { Component } from 'vue'
 import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
-// import './styles.css'
 import Loader from './assets/Loader.vue'
-import { HeightT, Position, PromiseData, ToastT } from './types'
+import type { HeightT, Position, PromiseData, ToastT } from './types'
 import SuccessIcon from './assets/SuccessIcon.vue'
 import InfoIcon from './assets/InfoIcon.vue'
 import WarningIcon from './assets/WarningIcon.vue'
@@ -157,60 +158,21 @@ const emit = defineEmits<{
   (e: 'removeToast', toast: ToastT): void
 }>()
 
-const props = defineProps({
-  toast: {
-    type: Object as PropType<ToastT>,
-    required: true
-  },
-  toasts: {
-    type: Array as PropType<ToastT[]>,
-    required: true
-  },
-  index: {
-    type: Number,
-    required: true
-  },
-  expanded: {
-    type: Boolean,
-    required: true
-  },
-  invert: {
-    type: Boolean,
-    required: true
-  },
-  heights: {
-    type: Array as PropType<HeightT[]>,
-    required: true
-  },
-  position: {
-    type: String as PropType<Position>,
-    required: true
-  },
-  visibleToasts: {
-    type: Number,
-    required: true
-  },
-  expandByDefault: {
-    type: Boolean,
-    required: true
-  },
-  closeButton: {
-    type: Boolean,
-    required: true
-  },
-  interacting: {
-    type: Boolean,
-    required: true
-  },
-  duration: {
-    type: Number,
-    required: false
-  },
-  descriptionClass: {
-    type: String,
-    required: false
-  }
-})
+const props = defineProps<{
+  toast: ToastT
+  toasts: ToastT[]
+  index: number
+  expanded: boolean
+  invert: boolean
+  heights: HeightT[]
+  position: Position
+  visibleToasts: number
+  expandByDefault: boolean
+  closeButton: boolean
+  interacting: boolean
+  duration?: number
+  descriptionClass?: string
+}>()
 
 const mounted = ref(false)
 const removed = ref(false)
@@ -365,7 +327,7 @@ watchEffect((onInvalidate) => {
     props.toast.duration === Infinity
   )
     return
-  let timeoutId: NodeJS.Timeout
+  let timeoutId: ReturnType<typeof setTimeout>
 
   // Pause the timer on each hover
   const pauseTimer = () => {
@@ -426,7 +388,3 @@ watchEffect(() => {
   }
 })
 </script>
-
-<style>
-@import url('./styles.css');
-</style>

packages/Toaster.vue

@@ -57,34 +57,7 @@
   </section>
 </template>
 
-<script lang="ts" setup>
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch,
-  watchEffect,
-  useAttrs,
-  CSSProperties,
-  nextTick
-} from 'vue'
-import {
-  HeightT,
-  Position,
-  Theme,
-  ToastOptions,
-  ToastT,
-  ToastToDismiss
-} from './types'
-import { ToastState } from './state'
-import Toast from './Toast.vue'
-
-defineOptions({
-  name: 'Toaster',
-  inheritAttrs: false
-})
-
+<script lang="ts">
 export interface ToasterProps {
   invert?: boolean
   theme?: Theme
@@ -118,6 +91,37 @@ const TOAST_WIDTH = 356
 // Default gap between toasts
 const GAP = 14
 
+const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
+</script>
+
+<script lang="ts" setup>
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  watchEffect,
+  useAttrs,
+  type CSSProperties,
+  nextTick
+} from 'vue'
+import type {
+  HeightT,
+  Position,
+  Theme,
+  ToastOptions,
+  ToastT,
+  ToastToDismiss
+} from './types'
+import { ToastState } from './state'
+import Toast from './Toast.vue'
+
+defineOptions({
+  name: 'Toaster',
+  inheritAttrs: false
+})
+
 const props = withDefaults(defineProps<ToasterProps>(), {
   invert: false,
   position: 'bottom-right',
@@ -264,6 +268,8 @@ watchEffect((onInvalidate) => {
     }
   }
 
+  if(!isClient) return
+
   document.addEventListener('keydown', handleKeyDown)
 
   onInvalidate(() => {

packages/index.ts

@@ -3,7 +3,7 @@ import { Toaster } from './component'
 import type { ToasterProps } from './component'
 import { toast } from './state'
 
-export { Toaster, toast, ToasterProps }
+export { Toaster, toast, type ToasterProps }
 
 const plugin: Plugin = {
   install(app) {

packages/state.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'vue'
-import {
+import type {
   ExternalToast,
   ToastT,
   PromiseData,

packages/types.ts

@@ -1,4 +1,4 @@
-import { Component, CSSProperties } from 'vue'
+import type { Component, CSSProperties } from 'vue'
 
 export type ToastTypes =
   | 'normal'