enhance: plugin api add: css

LincZero · LincZero · commit 00491a024ef6 · 2026-03-19T22:07:50.000+08:00
diff --git a/README.md b/README.md
@@ -100,4 +100,5 @@ $ npm install -D typescript vite
 # 当然，如果你使用 js 来编写则不需要这一步，直接仿照官方的 js 示例插件来编写就可以了
 
 # (2) 创建和编写 src/ 文件夹内的内容 (主要程序代码和样式文件)
+# 特殊：这里使用的特殊的方式将 css 文件转为字符串附加到 js 上，这样能方便你更好地利用代码着色功能编辑 js 文件
 ```
diff --git a/package.json b/package.json
@@ -1,9 +1,11 @@
 {
-  "name": "anymenu-plugin-simple",
+  "name": "any-menu-plugin-simple",
   "version": "1.0.0",
   "description": "AnyMenu simple plugin example",
   "keywords": [
-    "anymenu"
+    "any-menu",
+    "anymenu",
+    "plugin"
   ],
   "license": "MIT",
   "author": "",
diff --git a/src/index.ts b/src/index.ts
@@ -5,7 +5,14 @@
  * Implements PluginInterface with TypeScript class syntax.
  */
 
-import './style.css';
+// 插件自定义样式
+// 
+// 另一个做法不太推荐，但也说一下。
+// 使用库: import cssInjectedByJs from 'vite-plugin-css-injected-by-js';
+// 使用: 放到 defineConfig plugins 中
+// 功能: 可以将 CSS 内联到 JS 中，插件只需分发单个 .js 文件
+import cssText from './style.css?inline';
+
 import type { PluginInterface, PluginInterfaceCtx } from '../types/any-menu';
 
 export default class HelloWorldPlugin implements PluginInterface {
@@ -17,6 +24,7 @@ export default class HelloWorldPlugin implements PluginInterface {
     author: 'your-name',
     description: 'A minimal AnyMenu plugin template that prints Hello World.',
     icon: 'lucide-hand-wave',
+    css: cssText,
   };
 
   onLoad(): void {
diff --git a/types/any-menu.d.ts b/types/any-menu.d.ts
@@ -26,6 +26,10 @@ export interface PluginMetadata {
    * - 不填则用名字自动生成
    */
   icon?: string;
+  /** CSS 字符串，插件加载时自动注入到 <head>，卸载时自动移除
+   * 若使用 TypeScript 模板仓库开发，build 工具会自动将 .css 文件内容填入此字段
+   */
+  css?: string;
 }
 
 export interface PluginInterfaceCtx {
diff --git a/types/vite-env.d.ts b/types/vite-env.d.ts
@@ -0,0 +1,8 @@
+// <reference types="vite/client" />
+
+// Vite 原生支持
+// 但还是要让 TypeScript 认识 `?inline` 后缀的 CSS 导入，类型为 string
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}
diff --git a/vite.config.js b/vite.config.js
@@ -1,10 +1,5 @@
 import { defineConfig } from 'vite';
 
-// 备用。目前弃用，转而使用新的 PluginInterface css 接口。简化对插件的开发，不需要插件开发者管理 css
-// import cssInjectedByJs from 'vite-plugin-css-injected-by-js';
-// 使用: 放到 defineConfig plugins 中
-// 功能: 可以将 CSS 内联到 JS 中，插件只需分发单个 .js 文件
-
 export default defineConfig({
   build: {
     lib: { // Library 模式：输出单个 ES 模块文件
@@ -15,6 +10,10 @@ export default defineConfig({
     rollupOptions: {
       external: [],
     },
+    output: {
+      inlineDynamicImports: true, // 确保产物是单文件，不拆分 chunk
+    },
+    cssCodeSplit: false, // 不单独输出 .css 文件，这里采用的 ?inline 字符串嵌入方案
     outDir: 'dist',
     minify: false,
   },
