vite-plugin-taro 0.2.2 → 0.3.1

package/README.zh.md

@@ -6,20 +6,21 @@
 
 简体中文 | [English](README.md)
 
-使用最新标准化前端技术栈 Vite 8、React 19 和 Tailwind CSS v4 构建微信小程序。
+使用最新标准化前端技术栈 Vite 8、React 19、Taro 4 和 Tailwind CSS v4 构建微信小程序与 Web 应用。
 
-`vite-plugin-taro` 适用于希望使用 Taro 跨平台 React 组件和 API，但更偏好 Vite 而非 Taro webpack 的应用。你只需要这个插件，就能构建完整的微信小程序。
+
+`vite-plugin-taro` 面向希望用 Vite 构建 Taro React 应用的团队：保留 Taro 跨平台组件和 API，告别 Taro webpack，并修复/规避官方 Taro Vite 的常见坑。一个插件即可构建微信小程序与 Web。
 
 在线演示：<https://sep2.github.io/vite-plugin-taro>。如何在本地运行，请参见[示例应用](https://github.com/sep2/vite-plugin-taro/tree/main/packages/loan-genius/README.zh.md)。
 
-- **原生 Vite 构建** 使用标准 Vite 8 配置，无需维护老旧的 webpack 配置，并支持所有 Vite 插件。
-- **热更新** 微信小程序与 H5 都支持开发模式 watch，基于 Vite 8 热更新/快速重建即时预览。
-- **依托成熟 Taro 能力** 复用久经实战检验的 Taro API 和组件，完整使用 Taro 跨端能力。
-- **Tailwind 就绪** 内置 Tailwind CSS v4 支持，微信小程序与 H5 样式开箱即用。
-- **条件编译** 支持 Taro 风格 `#ifdef` / `#ifndef` / `#if`，可按微信 / Web 裁剪代码和样式。
-- **工作区友好** 支持普通项目与 monorepo，兼容 npm、pnpm、Yarn、Bun 等包管理器。
-- **类型友好** 项目全链路支持 TypeScript。
-- **微信 Skyline** 支持微信小程序 Skyline 渲染模式输出。
+- **Vite 8 + React 19** 基于 Vite 生态，一份代码覆盖微信小程序与 Web。
+- **热更新** 基于 Vite 重构的热更新，微信小程序完美支持，页面编辑不再丢失状态。
+- **Tailwind CSS v4 开箱即用** 直接书写工具类，微信与 Web 样式自动适配。
+- **基于 Taro，超越 Taro** 使用 Taro 组件和 API，摆脱旧式 webpack 链路。
+- **Skyline 就绪** 支持微信 Skyline 渲染模式。
+- **条件编译** 用 Taro 风格 `#ifdef` / `#ifndef` 条件块拆分代码和样式。
+- **工作区友好** 支持普通项目与 monorepo，兼容 `npm`、`pnpm`、`Yarn`、`Bun`。
+- **TypeScript 友好** 从配置到应用代码都有类型支持。
 
 ## 快速开始
 
@@ -31,6 +32,9 @@
 # 使用默认模板创建新应用
 npm create vite-taro@latest my-app
 
+# 或使用 pnpm 创建
+pnpm --config.minimum-release-age=0 create vite-taro@latest my-app
+
 # 进入项目并安装依赖
 cd my-app
 npm install
@@ -43,7 +47,7 @@ npm install
 ### 3. 开发模式运行
 
 ```sh
-# 微信小程序：以 watch 模式重新构建 dist/wx
+# 微信小程序：启动 Vite 热更新开发模式
 npm run dev:wx
 
 # 然后在微信开发者工具中打开 dist/wx
@@ -57,7 +61,7 @@ npm run dev:h5
 
 你可以在两个终端中同时运行 `npm run dev:wx` 和 `npm run dev:h5`。
 
-提示：受微信限制，开发者工具热重载有时不会完整生效。建议日常优先使用 H5 的 Vite 热更新快速调试，并定期在微信开发者工具中验证小程序端效果。
+微信开发模式通过 Rolldown 增量模块图和 React Refresh 完整支持 Vite 热更新。JavaScript 修改会保留当前原生页面及 React/输入状态；CSS、资源、public 文件和配置修改会自动重新构建。
 
 ### 4. 构建、预览和类型检查
 
@@ -109,7 +113,7 @@ npm install react react-dom
 npm install -D vite typescript@rc @types/node @types/react @types/react-dom cross-env
 ```
 
-你不应再直接依赖任何 `@tarojs/*` 包。如果已经依赖，请将它们移除。
+请从 `dependencies` 和 `devDependencies` 中移除所有 `@tarojs/*` 包。
 
 下面的步骤会创建如下源码结构：
 
@@ -172,19 +176,9 @@ export default defineConfig(({ mode }) => {
             vitePluginTaro({
                 target,
                 app: 'src/app.ts',
-                pages: [
-                    {
-                        path: 'pages/index/index',
-                        config: {
-                            navigationBarTitleText: 'Home'
-                        }
-                    }
-                ],
+                pages: [{ path: 'pages/index/index', config: { navigationBarTitleText: 'Home' } }],
                 appJson: {
-                    window: {
-                        navigationBarTitleText: 'Demo',
-                        navigationBarBackgroundColor: '#ffffff'
-                    }
+                    window: { navigationBarTitleText: 'Demo' }
                 },
                 projectConfigJson: {
                     appid: env.VITE_PLUGIN_TARO_WECHAT_APP_ID || 'touristappid',
@@ -206,6 +200,7 @@ export default defineConfig(({ mode }) => {
 - `app` 是 React 根应用组件模块，应默认导出应用组件。
 - 每个 `pages[].path` 都会映射到 `src/${path}.tsx` 文件。例如，`pages/index/index` 需要 `src/pages/index/index.tsx`。
 - `appJson.pages` 会根据 `pages` 自动生成；你在 `appJson` 中传入的任何 `pages` 字段都会被覆盖。
+- 如果应用使用 Skyline，请添加相关的 `appJson` 和 `projectConfigJson` 配置。
 - 插件不会读取 Taro CLI 配置文件，例如 `config/index.ts`、`app.config.ts` 或页面 `config.ts` 文件。请通过插件选项传入应用和页面配置。
 
 ### 3. 创建应用组件
@@ -213,75 +208,62 @@ export default defineConfig(({ mode }) => {
 `src/app.ts` 是共享应用包装组件。它会通过 `children` 接收当前页面。
 
 ```tsx
-import Taro from 'virtual:taro/api'
 import type { PropsWithChildren } from 'react'
 import './app.css'
 
-function App({ children }: PropsWithChildren) {
-    Taro.useLaunch(() => {
-        console.log('App launched')
-    })
-
+export default function App({ children }: PropsWithChildren) {
     return children
 }
+```
+
+请在应用组件中导入全局样式。下一步会创建 `src/app.css`。
+
+### 4. 创建全局样式
+
+`src/app.css` 可以使用普通 CSS，也可以配合组件内 CSS Modules 和 Tailwind CSS v4。插件会自动注入 Taro H5 组件样式；默认全局样式会为两个目标启用 Tailwind CSS v4：
+
+```css
+@import "tailwindcss/theme.css";
+@import "tailwindcss/preflight.css";
+@import "tailwindcss/utilities.css";
 
-export default App
+@source "./";
 ```
 
-请在应用组件中导入全局样式。微信构建会将它们收集到 `app.wxss`，H5 输出也会包含它们。
+请保留 `@source "./";`，让 Tailwind 扫描源码目录。
 
-### 4. 创建页面组件
+### 5. 创建页面组件
 
 `src/pages/index/index.tsx` 是 `pages/index/index` 对应的 React 页面组件。
 
 ```tsx
-import Taro from 'virtual:taro/api'
-import { Button, Text, View } from 'virtual:taro/components'
+import { Text, View } from 'virtual:taro/components'
 
 export default function IndexPage() {
-    const windowInfo = Taro.getWindowInfo()
-
     return (
         <View className="p-4">
-            <Text>Viewport width: {windowInfo.windowWidth}</Text>
-            <Button
-                onClick={() => {
-                    Taro.showToast({ title: 'Hello from Taro' })
-                }}
-            >
-                Show toast
-            </Button>
+            <Text>Hello Taro</Text>
         </View>
     )
 }
 ```
 
-### 5. 添加 H5 HTML 外壳
+### 6. 添加 H5 HTML 外壳
 
 对于 H5，请保留一个普通的 Vite `index.html`，并包含 `#app` 挂载节点。插件会自动注入生成的 Taro H5 入口，因此你不需要普通 Vite 的 `src/main.tsx` 脚本。
 
 ```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Taro Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
+<div id="app"></div>
 ```
 
-### 6. 添加脚本
+### 7. 添加脚本
 
 使用与 `create-vite-taro` 生成项目一致的脚本：
 
 ```json
 {
     "scripts": {
-        "dev:wx": "cross-env NODE_ENV=development VITE_PLUGIN_TARO_TARGET=wx vite build --watch",
+        "dev:wx": "cross-env NODE_ENV=development VITE_PLUGIN_TARO_TARGET=wx vite",
         "dev:h5": "cross-env NODE_ENV=development VITE_PLUGIN_TARO_TARGET=h5 vite",
         "build:wx": "cross-env NODE_ENV=production VITE_PLUGIN_TARO_TARGET=wx vite build",
         "build:h5": "cross-env NODE_ENV=production VITE_PLUGIN_TARO_TARGET=h5 vite build",
@@ -291,11 +273,11 @@ export default function IndexPage() {
 }
 ```
 
-### 7. 运行每个目标
+### 8. 运行每个目标
 
 ```sh
-npm run dev:wx       # 以 watch 模式重新构建 dist/wx
-npm run dev:h5       # 启动 H5 开发服务器
+npm run dev:wx       # 启动微信小程序热更新开发模式
+npm run dev:h5       # 启动 Web 开发服务器
 npm run build:wx     # 构建 dist/wx
 npm run build:h5     # 构建 dist/h5
 npm run preview:h5   # 预览 dist/h5
@@ -304,6 +286,8 @@ npm run typecheck    # 使用 tsc 进行类型检查
 
 在微信开发者工具中打开生成的 `dist/wx` 目录。
 
+微信开发模式会在 Vite 报告就绪前，预先完整构建 App 和所有已配置页面。JavaScript 和 TypeScript 组件修改通过 React Refresh 更新，并保留兼容的 React 状态、当前 Taro 页面以及原生输入状态。每次代码更新都会重置模块内部状态。修改 CSS、资源或应用配置时，会有意执行完整构建并让开发者工具重新加载。插件会自动为生成的开发项目启用微信的 `compileHotReLoad` 设置。
+
 | 目标 | 含义 | 输出目录 |
 | --- | --- | --- |
 | `wx` | 开发/生产模式下的微信小程序。 | `dist/wx` |
@@ -333,29 +317,13 @@ type VitePluginTaroOptions = {
 | --- | --- |
 | `target` | 本次 Vite 调用的活动目标。微信小程序使用 `wx`，Web 使用 `h5`。 |
 | `app` | 默认导出根 React 应用组件的源码文件，例如 `src/app.ts` 或 `src/app.tsx`。 |
-| `pages` | 有序页面列表。该顺序会成为 `app.json.pages` 和 H5 路由顺序。 |
+| `pages` | 有序页面列表。该顺序会成为 `app.json.pages` 和 Web 路由顺序。 |
 | `pages[].path` | 不带扩展名的 Taro 风格路由和输出路径，例如 `pages/index/index`。页面组件必须存在于 `src/${path}.tsx`。 |
-| `pages[].config` | 合并到生成的微信页面 JSON 和 H5 路由配置中的页面配置。 |
-| `appJson` | 基础应用配置。插件会用 `options.pages` 覆盖其中的 `pages` 字段。 |
+| `pages[].config` | 合并到生成的微信页面 JSON 和 Web 路由配置中的页面配置。 |
+| `appJson` | 两个目标共享的基础应用配置。插件会用 `options.pages` 覆盖其中的 `pages` 字段。 |
 | `projectConfigJson` | `wx` 构建时输出的微信 `project.config.json` 内容。即使当前目标是 `h5`，选项类型也要求提供它。 |
 | `sitemapJson` | `wx` 构建时输出的微信 `sitemap.json` 内容。即使当前目标是 `h5`，选项类型也要求提供它。 |
 
-## 样式
-
-你可以使用普通 CSS、CSS Modules 或 Tailwind CSS v4。
-
-对于 Tailwind CSS v4，请从全局 CSS 文件（例如 `src/app.css`）导入 Tailwind：
-
-```css
-@import "tailwindcss/theme.css";
-@import "tailwindcss/preflight.css";
-@import "tailwindcss/utilities.css";
-
-@source "./";
-```
-
-插件会为 `wx` 构建注册 `weapp-tailwindcss`，并为 `h5` 构建注册 `@tailwindcss/vite`。对于 `wx`，Vite 输出的 CSS 会被收集到 `app.wxss`，并为每个页面生成配套的 `.wxss` 文件。
-
 ## 条件编译
 
 插件会在 Vite 解析源码前移除未激活的 Taro 风格条件注释块。它适用于 `node_modules` 之外的 TypeScript、JavaScript、JSX/TSX、CSS、Sass、Less 和 Stylus 文件。
@@ -369,16 +337,14 @@ console.log('WeChat only')
 console.log('H5 only')
 // #endif
 
-// #if wx && !h5
-console.log('WeChat expression')
-// #elif h5
-console.log('H5 expression')
+// #ifndef h5
+console.log('非 H5')
 // #else
-console.log('fallback')
+console.log('H5 fallback')
 // #endif
 ```
 
-支持的指令包括 `#ifdef`、`#ifndef`、`#if`、`#elif`、`#else` 和 `#endif`。条件使用插件目标标记 `wx` 和 `h5`；`#if` 表达式支持 `!`、`&&` 和 `||`。
+支持的指令包括 `#ifdef`、`#ifndef`、`#else` 和 `#endif`。条件使用插件目标标记 `wx` 和 `h5`。
 
 ## 按目标输出
 
@@ -405,9 +371,9 @@ dist/wx/
 
 请使用微信开发者工具打开 `dist/wx`；不要打开源码项目目录。
 
-### H5
+### H5 / Web
 
-对于 `target: 'h5'`，插件会向 `index.html` 注入生成模块，导入 Taro 的 H5 组件样式，根据 `pages` 构建路由记录，并使用 Taro 的 hash-history 路由挂载应用。路由使用配置中的页面路径，例如 `#/pages/index/index`。
+对于 `target: 'h5'`，插件会向 `index.html` 注入生成模块，在应用之前导入 Taro H5 组件样式，根据 `pages` 构建路由记录，并使用 Taro 的 hash-history 路由挂载应用。路由使用配置中的页面路径，例如 `#/pages/index/index`。
 
 ## 从 Taro 迁移
 
@@ -420,7 +386,9 @@ dist/wx/
 3. 在 `pages` 中注册每个页面。每个页面路径都必须匹配 `src/${path}.tsx`。
 4. 将 Taro 脚本替换为设置 `VITE_PLUGIN_TARO_TARGET=wx` 或 `VITE_PLUGIN_TARO_TARGET=h5` 的 Vite 脚本。
 5. 对于 H5，添加普通 Vite `index.html`，其中包含 `<div id="app"></div>`，且不要添加单独的 `src/main.tsx` 入口。
-6. 将应用代码中的 `@tarojs/*` 导入替换为插件虚拟模块。
+6. 将全局样式迁移到 `src/app.css`，在 app 入口保留 `import './app.css'`，并按下方示例添加 Taro/Tailwind 导入。
+7. 从 `dependencies` 和 `devDependencies` 中移除所有 `@tarojs/*` 包。
+8. 将应用代码中的 `@tarojs/*` 导入替换为插件虚拟模块。
 
 迁移前：
 
@@ -436,7 +404,17 @@ import Taro from 'virtual:taro/api'
 import { Text, View } from 'virtual:taro/components'
 ```
 
-应用代码中禁止直接导入 `@tarojs/*`。请让插件负责 Taro 运行时解析，使微信和 H5 构建都获得正确的目标特定别名。
+样式迁移：
+
+```css
+@import "tailwindcss/theme.css";
+@import "tailwindcss/preflight.css";
+@import "tailwindcss/utilities.css";
+
+@source "./";
+```
+
+移除所有 `@tarojs/*` 包，并且不要在应用代码中直接导入它们。请让插件负责 Taro 运行时解析。
 
 ## 示例应用
 
@@ -455,17 +433,17 @@ pnpm prepare:taro
 pnpm build:plugin
 
 # 运行微信示例应用
-pnpm dev:sample:wx
+pnpm dev:loan-genius:wx
 
 # 将示例应用构建为微信输出
-pnpm build:sample:wx
+pnpm build:loan-genius:wx
 
 # 以开发模式运行 H5 示例应用
-pnpm dev:sample:h5
+pnpm dev:loan-genius:h5
 
 # 将示例应用构建为 H5 输出并预览
-pnpm build:sample:h5
-pnpm preview:sample:h5
+pnpm build:loan-genius:h5
+pnpm preview:loan-genius:h5
 ```
 
 使用微信开发者工具打开 `packages/loan-genius/dist/wx`，以测试小程序输出。
@@ -488,11 +466,11 @@ pnpm typecheck
 | `pnpm typecheck` | 使用 `tsc` 对插件和示例应用进行类型检查。 |
 | `pnpm lint` | 运行 Biome 检查。 |
 | `pnpm format` | 应用 Biome 格式化。 |
-| `pnpm dev:sample:wx` | 以 watch 模式构建微信小程序示例。请先构建插件。 |
-| `pnpm dev:sample:h5` | 以 Vite 开发模式启动 H5 示例应用。请先构建插件。 |
-| `pnpm build:sample:wx` | 将微信小程序示例构建到 `packages/loan-genius/dist/wx`。 |
-| `pnpm build:sample:h5` | 将 H5 示例应用构建到 `packages/loan-genius/dist/h5`。 |
-| `pnpm preview:sample:h5` | 预览构建后的 H5 示例。 |
+| `pnpm dev:loan-genius:wx` | 启动支持热更新的微信小程序示例。请先构建插件。 |
+| `pnpm dev:loan-genius:h5` | 以 Vite 开发模式启动 H5 示例应用。请先构建插件。 |
+| `pnpm build:loan-genius:wx` | 将微信小程序示例构建到 `packages/loan-genius/dist/wx`。 |
+| `pnpm build:loan-genius:h5` | 将 H5 示例应用构建到 `packages/loan-genius/dist/h5`。 |
+| `pnpm preview:loan-genius:h5` | 预览构建后的 H5 示例。 |
 | `pnpm changelog` | 从 git release tag 重新生成 `CHANGELOG.md`。 |
 | `pnpm publish:dry` | 干运行包校验和发布流程。 |
 | `pnpm release <version\|bump>` | 验证发布、更新版本、更新 changelog、创建 release commit 和 tag，并推送触发 CI 发布。 |
@@ -500,6 +478,7 @@ pnpm typecheck
 
 ## 限制
 
+- 目前只支持 React 应用。
 - 目前只生成 `wx` 和 `h5` 目标。
 - 应用代码不能直接导入 `@tarojs/*` 包。
 
@@ -513,8 +492,8 @@ pnpm typecheck
 | 微信开发者工具无法打开应用 | 打开生成的 `dist/wx` 文件夹，并检查 `projectConfigJson.appid`。 |
 | H5 显示空白页 | 确保 `index.html` 中保留 `<div id="app"></div>`，已注册插件，并避免添加单独的默认 Vite `main.tsx` 入口。 |
 | Taro API 缺失或行为不同 | 移除应用代码中直接导入的 `@tarojs/*`，并从 `virtual:taro/api` 导入 Taro。 |
-| 组件在 H5 上渲染时缺少预期样式 | 从 `virtual:taro/components` 导入组件，并确保 `h5` 目标启用了插件。 |
-| Tailwind 类没有生效 | 确保全局 CSS 导入 Tailwind，并包含覆盖源码文件的 `@source` 路径。 |
+| 组件在 H5 上渲染时缺少预期样式 | 确保 app 入口导入了 `./app.css`，并且生成的 H5 入口已注入到 `index.html`。 |
+| Tailwind 类没有生效 | 确保 `src/app.css` 导入了 Tailwind CSS 文件，保留 `@source "./";`，并且类名可以被静态扫描到。移动文件后请重启开发服务。 |
 
 ## 发布流程
 

package/dist/node/build-context.d.ts

@@ -0,0 +1,25 @@
+import type { ConfigEnv, ResolvedConfig } from 'vite';
+import type { JsonObject, VitePluginTaroOptions, VitePluginTaroPageOption, VitePluginTaroTarget } from '../options.ts';
+import { CssPipeline } from './css/css-pipeline.ts';
+type ProjectContext = Readonly<{
+    target: VitePluginTaroTarget;
+    appComponentFile: string;
+    pages: readonly VitePluginTaroPageOption[];
+    appConfig: JsonObject;
+    projectConfigJson: JsonObject;
+    projectPrivateConfigJson?: JsonObject;
+    sitemapJson: JsonObject;
+}>;
+/** Owns the shared project, Vite lifecycle state, and cross-target services for one build. */
+export declare class BuildContext {
+    readonly project: ProjectContext;
+    readonly css: CssPipeline;
+    private developmentMode;
+    private resolvedViteConfig;
+    constructor(options: VitePluginTaroOptions);
+    configure(environment: ConfigEnv): void;
+    resolve(config: ResolvedConfig): void;
+    get development(): boolean;
+    get vite(): ResolvedConfig;
+}
+export {};

package/dist/node/build-context.js

@@ -0,0 +1,48 @@
+import path from 'node:path';
+import { CssPipeline } from './css/css-pipeline.js';
+/** Owns the shared project, Vite lifecycle state, and cross-target services for one build. */
+export class BuildContext {
+    project;
+    css;
+    developmentMode;
+    resolvedViteConfig;
+    constructor(options) {
+        this.project = {
+            target: options.target,
+            appComponentFile: path.resolve(options.app),
+            pages: options.pages,
+            appConfig: {
+                ...options.appJson,
+                pages: options.pages.map((page) => page.path)
+            },
+            projectConfigJson: options.projectConfigJson,
+            projectPrivateConfigJson: options.projectPrivateConfigJson,
+            sitemapJson: options.sitemapJson
+        };
+        this.css = new CssPipeline(options.target);
+    }
+    configure(environment) {
+        if (this.developmentMode !== undefined)
+            throw new Error('vite-plugin-taro build context was already configured.');
+        this.developmentMode = environment.command === 'serve';
+    }
+    resolve(config) {
+        if (this.developmentMode === undefined) {
+            throw new Error('vite-plugin-taro build context resolved before it was configured.');
+        }
+        if (this.resolvedViteConfig)
+            throw new Error('vite-plugin-taro build context was already resolved.');
+        this.resolvedViteConfig = config;
+        this.css.resolve(config.root);
+    }
+    get development() {
+        if (this.developmentMode === undefined)
+            throw new Error('vite-plugin-taro build context is not configured.');
+        return this.developmentMode;
+    }
+    get vite() {
+        if (!this.resolvedViteConfig)
+            throw new Error('vite-plugin-taro build context is not resolved.');
+        return this.resolvedViteConfig;
+    }
+}

package/dist/node/css/css-pipeline.d.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vite';
+import type { VitePluginTaroTarget } from '../../options.ts';
+type CssTransformResult = {
+    code: string;
+    map: null;
+};
+/** Owns CSS generation and the class-name state shared by normal chunks and literal WX patches. */
+export declare class CssPipeline {
+    readonly plugin: Plugin;
+    private readonly target;
+    private readonly runtimeClassSet;
+    private projectRoot;
+    private wxContext;
+    constructor(target: VitePluginTaroTarget);
+    resolve(projectRoot: string): void;
+    transformWxClassNames(code: string, filename: string): Promise<CssTransformResult>;
+    private createPlugin;
+    private getProjectRoot;
+    private getWxContext;
+}
+export {};

package/dist/node/css/css-pipeline.js

@@ -0,0 +1,129 @@
+import path from 'node:path';
+import { createContext } from 'weapp-tailwindcss/core';
+import { createWeappTailwindcssGenerator, resolveTailwindV4Source } from 'weapp-tailwindcss/generator';
+import { normalizeModuleId } from '../utils/modules.js';
+const wxStyleOptions = {
+    cssCalc: false,
+    autoprefixer: false,
+    rem2rpx: true,
+    px2rpx: true
+};
+/** Owns CSS generation and the class-name state shared by normal chunks and literal WX patches. */
+export class CssPipeline {
+    plugin;
+    target;
+    runtimeClassSet = new Set();
+    projectRoot;
+    wxContext;
+    constructor(target) {
+        this.target = target;
+        this.plugin = this.createPlugin();
+    }
+    resolve(projectRoot) {
+        if (this.projectRoot)
+            throw new Error('vite-plugin-taro CSS pipeline was already resolved.');
+        this.projectRoot = projectRoot;
+        this.wxContext = this.target === 'wx' ? createWxCssContext(projectRoot) : undefined;
+    }
+    async transformWxClassNames(code, filename) {
+        if (!this.wxContext || this.runtimeClassSet.size === 0)
+            return { code, map: null };
+        const result = await this.wxContext.transformJs(code, {
+            runtimeSet: this.runtimeClassSet,
+            filename,
+            generateMap: false
+        });
+        return { code: result.code, map: null };
+    }
+    createPlugin() {
+        const pipeline = this;
+        return {
+            name: 'vite-plugin-taro:css',
+            enforce: 'pre',
+            buildStart() {
+                pipeline.runtimeClassSet.clear();
+            },
+            async transform(code, id) {
+                if (!isCssModuleId(id) || !shouldGenerateTailwindCss(code))
+                    return;
+                const projectRoot = pipeline.getProjectRoot();
+                const cssFile = resolveCssFile(id, projectRoot);
+                const cssBase = path.dirname(cssFile);
+                const source = await resolveTailwindV4Source({
+                    projectRoot,
+                    cwd: projectRoot,
+                    base: cssBase,
+                    css: code,
+                    cssSources: [{ file: cssFile, base: cssBase, css: code, dependencies: [cssFile] }]
+                });
+                const generator = createWeappTailwindcssGenerator(source);
+                const generated = await generator.generate({
+                    target: pipeline.target === 'wx' ? 'weapp' : 'web',
+                    scanSources: true,
+                    candidates: [],
+                    styleOptions: pipeline.target === 'wx' ? wxStyleOptions : undefined
+                });
+                for (const className of generated.classSet)
+                    pipeline.runtimeClassSet.add(className);
+                for (const dependency of generated.dependencies)
+                    this.addWatchFile(dependency);
+                return generated.css;
+            },
+            async renderChunk(code, chunk) {
+                if (pipeline.target !== 'wx')
+                    return;
+                return await pipeline.transformWxClassNames(code, chunk.fileName);
+            },
+            async generateBundle(_, bundle) {
+                if (pipeline.target !== 'wx')
+                    return;
+                const core = pipeline.getWxContext();
+                await Promise.all(Object.entries(bundle).map(async ([fileName, item]) => {
+                    if (item.type === 'asset' && fileName.endsWith('.css')) {
+                        await transformWxssAsset(core, item);
+                    }
+                }));
+            }
+        };
+    }
+    getProjectRoot() {
+        if (!this.projectRoot)
+            throw new Error('vite-plugin-taro CSS pipeline was used before configuration resolved.');
+        return this.projectRoot;
+    }
+    getWxContext() {
+        if (!this.wxContext)
+            throw new Error('vite-plugin-taro expected a resolved WeChat CSS pipeline.');
+        return this.wxContext;
+    }
+}
+function createWxCssContext(projectRoot) {
+    return createContext({
+        appType: 'taro',
+        tailwindcssBasedir: projectRoot,
+        generator: { target: 'weapp' },
+        ...wxStyleOptions,
+        logLevel: 'silent'
+    });
+}
+async function transformWxssAsset(core, item) {
+    const result = await core.transformWxss(getAssetSource(item), { isMainChunk: true });
+    item.source = result.css;
+}
+function shouldGenerateTailwindCss(code) {
+    const tailwindEntryImportPattern = /@(import|reference)\s+(?:url\(\s*)?(?:["'])tailwindcss(?:\/(?:theme|preflight|utilities)(?:\.css)?)?(?:["'])/;
+    return code.includes('tailwindcss') && tailwindEntryImportPattern.test(code);
+}
+function isCssModuleId(id) {
+    return /\.(?:css|scss|sass|less|styl|stylus)(?:$|[?#])/.test(id);
+}
+function getAssetSource(item) {
+    if (typeof item.source === 'string')
+        return item.source;
+    return item.source ? new TextDecoder().decode(item.source) : '';
+}
+function resolveCssFile(id, root) {
+    const normalizedId = normalizeModuleId(id);
+    const cleanId = normalizedId.startsWith('/@fs/') ? normalizedId.slice('/@fs'.length) : normalizedId;
+    return path.isAbsolute(cleanId) ? cleanId : path.resolve(root, cleanId);
+}

package/dist/node/plugins/conditional-directives.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../build-context.ts';
+export declare function createConditionalDirectivePlugin(context: BuildContext): Plugin;

package/dist/node/plugins/conditional-directives.js

@@ -0,0 +1,62 @@
+import { normalizeModuleId } from '../utils/modules.js';
+export function createConditionalDirectivePlugin(context) {
+    return {
+        name: 'vite-plugin-taro:conditional-directives',
+        enforce: 'pre',
+        transform(code, id) {
+            if (!isConditionalDirectiveSource(id) || !code.includes('#if'))
+                return;
+            return { code: transformConditionalDirectives(code, context.project.target), map: null };
+        }
+    };
+}
+function isConditionalDirectiveSource(id) {
+    const normalizedId = normalizeModuleId(id);
+    return !normalizedId.includes('/node_modules/') && /\.(?:[cm]?[jt]sx?|css|s[ac]ss|less|styl)$/.test(normalizedId);
+}
+function transformConditionalDirectives(code, target) {
+    const lines = code.match(/[^\n]*(?:\n|$)/g) ?? [];
+    const frames = [];
+    let transformed = '';
+    for (const line of lines) {
+        if (!line)
+            continue;
+        const directive = parseDirective(line);
+        const lineEnding = line.match(/\r?\n$/)?.[0] ?? '';
+        if (!directive) {
+            transformed += frames.every((frame) => frame.active) ? line : lineEnding;
+            continue;
+        }
+        if (directive.name === 'ifdef' || directive.name === 'ifndef') {
+            const parentActive = frames.every((frame) => frame.active);
+            const targetMatched = directive.target.toLowerCase() === target;
+            const matched = directive.name === 'ifdef' ? targetMatched : !targetMatched;
+            frames.push({ parentActive, matched, active: parentActive && matched });
+        }
+        else if (directive.name === 'else') {
+            const frame = frames.at(-1);
+            if (frame)
+                frame.active = frame.parentActive && !frame.matched;
+        }
+        else {
+            frames.pop();
+        }
+        transformed += lineEnding;
+    }
+    return transformed;
+}
+function parseDirective(line) {
+    const match = line.match(/^\s*(?:(?:\/\/)|(?:\/\*))\s*#(ifdef|ifndef|if|elif|else|endif)\b([^*\r\n]*)/);
+    if (!match)
+        return;
+    const name = match[1];
+    if (name === 'if' || name === 'elif') {
+        throw new Error(`vite-plugin-taro no longer supports #${name}; use #ifdef, #ifndef, or #else.`);
+    }
+    if (name !== 'ifdef' && name !== 'ifndef' && name !== 'else' && name !== 'endif')
+        return;
+    return {
+        name,
+        target: match[2]?.replace(/\*\/$/, '').trim() ?? ''
+    };
+}