feat: add option to import css manually

package.json

@@ -34,6 +34,11 @@
       "types": "./lib/vue-sonner.d.ts",
       "import": "./lib/vue-sonner.js",
       "require": "./lib/vue-sonner.cjs"
+    },
+     "./manual": {
+      "types": "./lib/vue-sonner.d.ts",
+      "import": "./lib/vue-sonner.manual.js",
+      "require": "./lib/vue-sonner.manual.cjs"
     },
     "./nuxt": {
       "import": {
@@ -44,7 +49,8 @@
         "types": "./lib/nuxt/types.d.ts",
         "default": "./lib/nuxt/module.cjs"
       }
-    }
+    },
+    "./style.css": "./lib/style.css"
   },
   "sideEffects": [
     "**/*.css"

vite.config.ts

@@ -35,25 +35,35 @@ export default defineConfig(({ command, mode }) => {
   if (mode === 'lib') {
     userConfig.build = {
       lib: {
-        entry: resolve(__dirname, 'src/packages/index.ts'),
-        name: 'VueSonner',
-        fileName: 'vue-sonner'
+        entry: {
+          'vue-sonner': resolve(__dirname, 'src/packages/index.ts'),
+          'manual-css': resolve(__dirname, 'src/packages/index.ts')
+        },
+        fileName: (format, entryName) => {
+          if (entryName === 'vue-sonner') {
+            return `vue-sonner.${format === 'es' ? 'js' : format}`
+          }
+          if (entryName === 'manual-css') {
+            return `vue-sonner.manual.${format === 'es' ? 'js' : format}`
+          }
+        },
+        formats: ['es', 'cjs']
       },
       outDir: 'lib',
       emptyOutDir: true,
-      cssCodeSplit: false,
+      cssCodeSplit: true,
       sourcemap: true,
       rollupOptions: {
         external: ['vue'],
         output: [
           {
             format: 'cjs',
-            entryFileNames: `vue-sonner.cjs`
+            assetFileNames: 'style.css'
           },
           {
             format: 'es',
-            entryFileNames: `vue-sonner.js`,
-            preserveModules: false
+            preserveModules: false,
+            assetFileNames: 'style.css'
           }
         ]
       }
@@ -62,42 +72,52 @@ export default defineConfig(({ command, mode }) => {
       ...commonPlugins,
       {
         name: 'inline-css',
+        buildStart() {
+          cssCodeStr = ''
+        },
         transform(code, id) {
           const isCSS = (path: string) => /\.css$/.test(path)
           if (!isCSS(id)) return
 
-          const cssCode = minify(code)
-          cssCodeStr = cssCode
+          const minifiedCss = minify(code)
+          cssCodeStr += minifiedCss
           return {
-            code: '',
+            code: minifiedCss,
             map: { mappings: '' }
           }
         },
-        renderChunk(code, { isEntry }) {
-          if (!isEntry) return
+        renderChunk(code, chunk) {
+          if (!chunk.isEntry) return null
 
+          if (chunk.name === 'vue-sonner') {
+            return {
+              code: `\
+              function __insertCSSVueSonner(code) {
+                if (!code || typeof document == 'undefined') return
+
+                function insertCSS() {
+
+                  let head = document.head || document.getElementsByTagName('head')[0]
+                  if (!head) return
+                  let style = document.createElement('style')
+                  style.type = 'text/css'
+                  head.appendChild(style)
+                  style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+                }
+
+                if (document.readyState === 'loading') {
+                  document.addEventListener('DOMContentLoaded', insertCSS)
+                } else {
+                  insertCSS()
+                }
+              }\n
+              __insertCSSVueSonner(${JSON.stringify(cssCodeStr)})
+              \n ${code}`,
+              map: { mappings: '' }
+            }
+          }
           return {
-            code: `\
-            function __insertCSSVueSonner(code) {
-              if (!code || typeof document == 'undefined') return
-
-              function insertCSS() {
-                let head = document.head || document.getElementsByTagName('head')[0]
-                if (!head) return
-                let style = document.createElement('style')
-                style.type = 'text/css'
-                head.appendChild(style)
-                style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
-              }
-
-              if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', insertCSS)
-              } else {
-                insertCSS()
-              }
-            }\n
-            __insertCSSVueSonner(${JSON.stringify(cssCodeStr)})
-            \n ${code}`,
+            code,
             map: { mappings: '' }
           }
         }