vite-plugin-theme-css 0.2.0 → 0.4.0

package/README.md

@@ -161,6 +161,12 @@ getTheme() // 'dark'
 
 `setTheme` 默认在主题名为 `dark` 时同步给 `<html>` 加上 `dark` class（可用 `syncHtmlDark: false` 关闭）。
 
+TypeScript 需引入虚拟模块声明（在 `env.d.ts` / `vite-env.d.ts` 中）：
+
+```ts
+/// <reference types="vite-plugin-theme-css/client" />
+```
+
 ## 插件选项
 
 ```ts

package/client.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 用户侧虚拟模块的 ambient 声明。
+ * 在项目 env.d.ts / vite-env.d.ts 中引用：
+ *
+ *   /// <reference types="vite-plugin-theme-css/client" />
+ */
+
+declare module '@scope/theme-css' {
+    export function theme(...keys: string[]): string
+    export function common(...keys: string[]): string
+    export function setTheme(name: string): void
+    export function getTheme(): string
+}
+
+declare module 'virtual:theme-css/css' {}

package/dist/index.cjs

@@ -36,8 +36,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_node_fs = require("fs");
-var import_node_path = __toESM(require("path"), 1);
-var import_node_url = require("url");
+var import_node_path2 = __toESM(require("path"), 1);
 var import_node_module = require("module");
 var import_jiti = require("jiti");
 
@@ -152,6 +151,11 @@ function createVirtualScssImporter(getContent) {
   };
 }
 
+// src/plugin-dir.ts
+var import_node_path = __toESM(require("path"), 1);
+var pluginFilename = __filename;
+var pluginDir = import_node_path.default.dirname(__filename);
+
 // src/defineTheme.ts
 function defineTheme(config) {
   return config;
@@ -195,14 +199,12 @@ function createThemeRuntime(config, options = {}) {
 }
 
 // src/index.ts
-var import_meta = {};
-var require2 = (0, import_node_module.createRequire)(import_meta.url);
+var require2 = (0, import_node_module.createRequire)(pluginFilename);
 var babelTransform = (0, import_node_module.createRequire)(require2.resolve("jiti/package.json"))("./dist/babel.cjs");
 function resolveRuntimeEntryPath() {
-  const here = import_node_path.default.dirname((0, import_node_url.fileURLToPath)(import_meta.url));
-  const distEntry = import_node_path.default.join(here, "runtime-entry.mjs");
+  const distEntry = import_node_path2.default.join(pluginDir, "runtime-entry.mjs");
   if ((0, import_node_fs.existsSync)(distEntry)) return distEntry;
-  return import_node_path.default.join(here, "runtime", "virtual-entry.ts");
+  return import_node_path2.default.join(pluginDir, "runtime", "virtual-entry.ts");
 }
 function themeCss(options = {}) {
   const resolvedOptions = { ...defaultOptions, ...options };
@@ -211,7 +213,7 @@ function themeCss(options = {}) {
   let runtimeDataContent = "";
   const runtimeEntryPath = resolveRuntimeEntryPath();
   async function loadConfigAndGenerate() {
-    const jiti = (0, import_jiti.createJiti)(import_meta.url, {
+    const jiti = (0, import_jiti.createJiti)(pluginFilename, {
       interopDefault: true,
       transform: (opts) => {
         let { source } = opts;
@@ -224,7 +226,7 @@ ${source}`;
         return babelTransform({ ...opts, source });
       }
     });
-    const mod = await jiti.import(import_node_path.default.resolve(configPath));
+    const mod = await jiti.import(import_node_path2.default.resolve(configPath));
     const themeConfig = mod.default;
     cssContent = generateThemeCss(themeConfig);
     runtimeDataContent = generateJs(themeConfig, { syncHtmlDark });
@@ -260,6 +262,18 @@ ${source}`;
           return null;
       }
     },
+    async transformIndexHtml(html) {
+      if (!autoImportCss || html.includes("data-theme-css-vars")) return;
+      if (!cssContent) await loadConfigAndGenerate();
+      return [
+        {
+          tag: "style",
+          attrs: { "data-theme-css-vars": "" },
+          children: cssContent,
+          injectTo: "head-prepend"
+        }
+      ];
+    },
     config(userConfig) {
       const scssOptions = userConfig.css?.preprocessorOptions?.scss ?? {};
       const userAdditionalData = scssOptions.additionalData;
@@ -301,19 +315,8 @@ ${source}`;
         }
       };
     },
-    transformIndexHtml(html) {
-      if (!autoImportCss || html.includes(VIRTUAL_CSS_ID)) return;
-      return [
-        {
-          tag: "script",
-          attrs: { type: "module" },
-          children: `import ${JSON.stringify(VIRTUAL_CSS_ID)};`,
-          injectTo: "head-prepend"
-        }
-      ];
-    },
     async handleHotUpdate(ctx) {
-      const configAbsPath = import_node_path.default.resolve(configPath);
+      const configAbsPath = import_node_path2.default.resolve(configPath);
       if (ctx.file === configAbsPath) {
         await loadConfigAndGenerate();
         const moduleGraph = ctx.server.moduleGraph;

package/dist/index.mjs

@@ -1,7 +1,6 @@
 // src/index.ts
 import { existsSync } from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import path2 from "path";
 import { createRequire } from "module";
 import { createJiti } from "jiti";
 
@@ -116,6 +115,12 @@ function createVirtualScssImporter(getContent) {
   };
 }
 
+// src/plugin-dir.ts
+import path from "path";
+import { fileURLToPath } from "url";
+var pluginFilename = fileURLToPath(import.meta.url);
+var pluginDir = path.dirname(pluginFilename);
+
 // src/defineTheme.ts
 function defineTheme(config) {
   return config;
@@ -159,13 +164,12 @@ function createThemeRuntime(config, options = {}) {
 }
 
 // src/index.ts
-var require2 = createRequire(import.meta.url);
+var require2 = createRequire(pluginFilename);
 var babelTransform = createRequire(require2.resolve("jiti/package.json"))("./dist/babel.cjs");
 function resolveRuntimeEntryPath() {
-  const here = path.dirname(fileURLToPath(import.meta.url));
-  const distEntry = path.join(here, "runtime-entry.mjs");
+  const distEntry = path2.join(pluginDir, "runtime-entry.mjs");
   if (existsSync(distEntry)) return distEntry;
-  return path.join(here, "runtime", "virtual-entry.ts");
+  return path2.join(pluginDir, "runtime", "virtual-entry.ts");
 }
 function themeCss(options = {}) {
   const resolvedOptions = { ...defaultOptions, ...options };
@@ -174,7 +178,7 @@ function themeCss(options = {}) {
   let runtimeDataContent = "";
   const runtimeEntryPath = resolveRuntimeEntryPath();
   async function loadConfigAndGenerate() {
-    const jiti = createJiti(import.meta.url, {
+    const jiti = createJiti(pluginFilename, {
       interopDefault: true,
       transform: (opts) => {
         let { source } = opts;
@@ -187,7 +191,7 @@ ${source}`;
         return babelTransform({ ...opts, source });
       }
     });
-    const mod = await jiti.import(path.resolve(configPath));
+    const mod = await jiti.import(path2.resolve(configPath));
     const themeConfig = mod.default;
     cssContent = generateThemeCss(themeConfig);
     runtimeDataContent = generateJs(themeConfig, { syncHtmlDark });
@@ -223,6 +227,18 @@ ${source}`;
           return null;
       }
     },
+    async transformIndexHtml(html) {
+      if (!autoImportCss || html.includes("data-theme-css-vars")) return;
+      if (!cssContent) await loadConfigAndGenerate();
+      return [
+        {
+          tag: "style",
+          attrs: { "data-theme-css-vars": "" },
+          children: cssContent,
+          injectTo: "head-prepend"
+        }
+      ];
+    },
     config(userConfig) {
       const scssOptions = userConfig.css?.preprocessorOptions?.scss ?? {};
       const userAdditionalData = scssOptions.additionalData;
@@ -264,19 +280,8 @@ ${source}`;
         }
       };
     },
-    transformIndexHtml(html) {
-      if (!autoImportCss || html.includes(VIRTUAL_CSS_ID)) return;
-      return [
-        {
-          tag: "script",
-          attrs: { type: "module" },
-          children: `import ${JSON.stringify(VIRTUAL_CSS_ID)};`,
-          injectTo: "head-prepend"
-        }
-      ];
-    },
     async handleHotUpdate(ctx) {
-      const configAbsPath = path.resolve(configPath);
+      const configAbsPath = path2.resolve(configPath);
       if (ctx.file === configAbsPath) {
         await loadConfigAndGenerate();
         const moduleGraph = ctx.server.moduleGraph;

package/dist/plugin-dir.d.ts

@@ -0,0 +1,3 @@
+/** 插件包根目录（须与 index.ts 同级，dev 与 dist 均能正确定位 runtime-entry） */
+export declare const pluginFilename: string;
+export declare const pluginDir: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-theme-css",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Vite 插件：用一份主题配置生成 CSS 变量、SCSS helper 与 JS 运行时，支持多主题切换与热更新",
   "author": "yuzinan <1589937631@qq.com>",
   "license": "MIT",
@@ -40,10 +40,14 @@
       "types": "./dist/runtime.d.ts",
       "import": "./dist/runtime.mjs",
       "require": "./dist/runtime.cjs"
+    },
+    "./client": {
+      "types": "./client.d.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "client.d.ts"
   ],
   "dependencies": {
     "jiti": "^2.7.0"