feat: add plugin for bundle css file

Author: kieranwv

docs/examples/say-hello/basic.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { StSayHello } from 'starter-lib-vue3'
-import 'starter-lib-vue3/dist/es/say-hello/SayHello.css'
+import 'starter-lib-vue3/dist/es/say-hello/style.css'
 </script>
 
 <template>

external/vite-plugin-bundle-styles/index.ts

@@ -0,0 +1,57 @@
+import type { Plugin } from 'vite'
+import fs from 'node:fs'
+import path from 'node:path'
+import { cwd } from 'node:process'
+import cssnano from 'cssnano'
+import postcss from 'postcss'
+
+interface PluginOptions {
+  target: string
+  formats?: string[]
+  fileName?: string
+}
+
+function plugin(options: PluginOptions): Plugin {
+  return {
+    name: 'vite-plugin-bundle-styles',
+    enforce: 'post',
+    async generateBundle() {
+      const cssFiles: string[] = []
+      const srcDir = path.resolve(cwd(), options.target)
+      const formats = options.formats || ['css', 'scss', 'sass', 'less']
+
+      function collectCssFiles(dir: string): void {
+        const files = fs.readdirSync(dir)
+        for (const file of files) {
+          const fullPath = path.join(dir, file)
+          const stat = fs.statSync(fullPath)
+          if (stat.isDirectory()) {
+            collectCssFiles(fullPath)
+          }
+          else if (formats.some(ext => file.endsWith(`.${ext}`))) {
+            cssFiles.push(fullPath)
+          }
+        }
+      }
+
+      collectCssFiles(srcDir)
+
+      const combinedCss = cssFiles
+        .map(file => fs.readFileSync(file, 'utf-8'))
+        .join('\n')
+
+      const result = await postcss([cssnano]).process(combinedCss, { from: undefined })
+      const compressedCss = result.css
+
+      const outputFileName = options.fileName || 'styles.css'
+      this.emitFile({
+        type: 'asset',
+        fileName: outputFileName,
+        source: compressedCss,
+      })
+    },
+  }
+}
+
+export default plugin
+export { plugin as vitePluginBundleStyles }

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.5.0",
   "packageManager": "pnpm@9.10.0",
-  "description": "Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and IIFE formats. ",
+  "description": "Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and UMD formats. ",
   "author": "Kieran Wang <kieranwme@gmail.com> (https://github.com/kieranwv/)",
   "license": "MIT",
   "homepage": "https://github.com/starter-collective/starter-lib-vue3#readme",
@@ -34,8 +34,8 @@
   },
   "main": "dist/lib/index.cjs",
   "module": "dist/es/index.js",
-  "unpkg": "dist/iife/index.js",
-  "jsdelivr": "dist/iife/index.js",
+  "unpkg": "dist/umd/index.js",
+  "jsdelivr": "dist/umd/index.js",
   "types": "dist/es/index.d.ts",
   "files": [
     "dist"
@@ -72,11 +72,13 @@
     "@vue/test-utils": "^2.4.6",
     "@vueuse/core": "^13.1.0",
     "bumpp": "^10.1.0",
+    "cssnano": "^7.0.7",
     "eslint": "^9.24.0",
     "jsdom": "^26.0.0",
     "lint-staged": "^15.5.0",
     "markdown-it": "^14.1.0",
     "markdown-it-container": "^4.0.0",
+    "postcss": "^8.5.3",
     "rimraf": "^6.0.1",
     "shiki": "^3.2.2",
     "simple-git-hooks": "^2.12.1",