vite-plugin-taro 0.0.3 → 0.0.5

package/dist/vite/{taro.js → vite-plugin-taro.js}

@@ -1,18 +1,19 @@
-import { createTaroConditionalDirectivePlugin } from './plugins.js';
+import { createVitePluginTaroConditionalDirectivePlugin } from './plugins.js';
+import { createTailwindcssPlugins } from './tailwindcss.js';
 import { createH5SupportPlugins, createH5ViteConfig, createWebIndexHtmlTags, isH5VirtualModuleId, loadH5VirtualModule } from './targets/h5.js';
 import { createWxViteConfig, emitWechatAssets, emitWechatImplicitChunksForVirtualApp, isWxVirtualModuleId, loadWxVirtualModule } from './targets/wx.js';
 import { stripVirtualPrefix, toImportPath } from './utils.js';
-import { isPublicVirtualModuleId, loadPublicVirtualModule } from './virtual.js';
 /**
  * Creates the Vite/Rolldown plugin that emits either WeChat Mini Program files
  * or a Taro Web app using the official Taro runtime packages.
  */
-export default function taro(options) {
-    const context = createTaroBuildContext(options);
+export default function vitePluginTaro(options) {
+    const context = createVitePluginTaroBuildContext(options);
     return [
-        createTaroConditionalDirectivePlugin(context),
+        createVitePluginTaroConditionalDirectivePlugin(context),
         ...createTargetSupportPlugins(context),
-        createTaroPlugin(context)
+        ...createTailwindcssPlugins(context),
+        createVitePluginTaroPlugin(context)
     ];
 }
 function createTargetSupportPlugins(context) {
@@ -26,7 +27,7 @@ function createTargetSupportPlugins(context) {
 /**
  * Creates the vite-plugin-taro plugin that emits H5 or Wx outputs.
  */
-function createTaroPlugin(context) {
+function createVitePluginTaroPlugin(context) {
     return {
         name: 'vite-plugin-taro',
         enforce: 'post',
@@ -39,16 +40,14 @@ function createTaroPlugin(context) {
         },
         /** Marks generated app/page/component entries as virtual modules. */
         resolveId(id) {
-            if (isPublicVirtualModuleId(id) || isWxVirtualModuleId(id) || isH5VirtualModuleId(id))
+            if (isWxVirtualModuleId(id) || isH5VirtualModuleId(id))
                 return `\0${id}`;
         },
         /** Supplies source code for each virtual entry module. */
         load(id) {
             const cleanId = stripVirtualPrefix(id);
             emitWechatImplicitChunksForVirtualApp(this, context, cleanId);
-            return (loadPublicVirtualModule(cleanId, context) ??
-                loadWxVirtualModule(cleanId, context) ??
-                loadH5VirtualModule(cleanId, context));
+            return loadWxVirtualModule(cleanId, context) ?? loadH5VirtualModule(cleanId, context);
         },
         /** Injects the generated Web entry into the app shell before Vite scans HTML imports. */
         transformIndexHtml: {
@@ -66,7 +65,7 @@ function createTaroPlugin(context) {
 /**
  * Normalizes user options into the shared data used by both target builders.
  */
-function createTaroBuildContext(options) {
+function createVitePluginTaroBuildContext(options) {
     return {
         target: options.target,
         appComponentImport: toImportPath(options.app),

package/dist/vite.js

@@ -1 +1 @@
-export { default } from './vite/taro.js';
+export { default } from './vite/vite-plugin-taro.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-taro",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
   "repository": {
@@ -16,29 +16,40 @@
   "module": "./dist/vite.js",
   "exports": {
     ".": {
+      "types": "./src/vite.ts",
       "import": "./dist/vite.js",
       "default": "./dist/vite.js"
     },
-    "./vite": {
-      "import": "./dist/vite.js",
-      "default": "./dist/vite.js"
+    "./components": {
+      "types": "./src/public/components.ts",
+      "import": "./dist/public/components.js",
+      "default": "./dist/public/components.js"
     },
-    "./client": {
-      "types": "./client.d.ts"
+    "./taro": {
+      "types": "./src/public/taro.d.ts",
+      "import": "./dist/public/taro.js",
+      "default": "./dist/public/taro.js"
     },
     "./shim/h5": {
+      "types": "./src/shim/h5.ts",
       "import": "./dist/shim/h5.js",
       "default": "./dist/shim/h5.js"
     },
     "./shim/wx": {
+      "types": "./src/shim/wx.ts",
       "import": "./dist/shim/wx.js",
       "default": "./dist/shim/wx.js"
     },
+    "./vite": {
+      "types": "./src/vite.ts",
+      "import": "./dist/vite.js",
+      "default": "./dist/vite.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist",
-    "client.d.ts",
+    "src",
     "LICENSE",
     "README.md"
   ],
@@ -59,7 +70,9 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "dependencies": {
+    "@babel/core": "^7.29.7",
     "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.3.1",
     "@tarojs/components": "^4.2.0",
     "@tarojs/helper": "^4.2.0",
     "@tarojs/plugin-platform-h5": "^4.2.0",
@@ -69,8 +82,10 @@
     "@tarojs/taro": "^4.2.0",
     "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-transform-taroapi": "^4.2.0",
-    "@tarojs/react": "npm:vite-plugin-taro-react@4.2.0-react19.2",
-    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@4.2.0-react19.2"
+    "tailwindcss": "^4.3.1",
+    "weapp-tailwindcss": "^5.0.13",
+    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@4.2.0-react19.4",
+    "@tarojs/react": "npm:vite-plugin-taro-react@4.2.0-react19.4"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -78,14 +93,13 @@
     "vite": "^8.0.0"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^26.0.0",
     "@typescript/native-preview": "latest",
     "vite": "^8.0.16"
   },
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "pnpm -w prepare:taro && pnpm clean && tsgo --project tsconfig.json",
-    "typecheck": "pnpm -w prepare:taro && tsgo --project tsconfig.json --noEmit",
-    "pack:dry": "pnpm pack --dry-run"
+    "build": "rm -rf dist && tsgo --project tsconfig.json",
+    "typecheck": "tsgo --project tsconfig.json --noEmit"
   }
 }

package/src/public/components.ts

@@ -0,0 +1 @@
+export * from '@tarojs/components'

package/src/public/taro.d.ts

@@ -0,0 +1,3 @@
+import Taro = require('@tarojs/taro')
+export = Taro
+export default Taro

package/src/public/taro.ts

@@ -0,0 +1,10 @@
+import { hooks } from '@tarojs/runtime'
+import Taro from '@tarojs/taro'
+
+if (hooks.isExist('initNativeApi')) {
+    hooks.call('initNativeApi', Taro)
+}
+
+// @ts-expect-error @tarojs/taro declares export= types, but vite-plugin-taro target aliases expose runtime named exports.
+export * from '@tarojs/taro'
+export default Taro

package/src/shim/h5.ts

@@ -0,0 +1,6 @@
+import '@tarojs/plugin-platform-h5/dist/runtime'
+
+// @ts-expect-error Taro exposes createReactApp from this runtime-only deep entry without types.
+export { createReactApp } from '@tarojs/plugin-framework-react/dist/runtime'
+export { createBrowserHistory, createHashHistory, createRouter, handleAppMount } from '@tarojs/router'
+export { window } from '@tarojs/runtime'

package/src/shim/wx.ts

@@ -0,0 +1,6 @@
+import '@tarojs/plugin-platform-weapp/dist/runtime.js'
+
+// @ts-expect-error Taro exposes createReactApp from this runtime-only deep entry without types.
+export { createReactApp } from '@tarojs/plugin-framework-react/dist/runtime'
+export { default as ReactDOM } from '@tarojs/react'
+export { createPageConfig, createRecursiveComponentConfig } from '@tarojs/runtime'

package/src/vite/constants.ts

@@ -0,0 +1,5 @@
+import { createRequire } from 'node:module'
+
+export const isProd = process.env.NODE_ENV === 'production'
+
+export const nodeRequire = createRequire(import.meta.url)

package/src/vite/plugins.ts

@@ -0,0 +1,218 @@
+import type { Plugin } from 'vite'
+import type { VitePluginTaroBuildContext, VitePluginTaroTarget } from './types.ts'
+import { normalizeModuleId } from './utils.ts'
+
+/**
+ * Applies Taro-style conditional compilation comments before Vite parses source files.
+ *
+ * Mirrors Taro's CSS #ifdef/#ifndef handling, generalized before Vite parses code.
+ */
+export function createVitePluginTaroConditionalDirectivePlugin(context: VitePluginTaroBuildContext): Plugin {
+    const target = context.target
+    return {
+        name: 'vite-plugin-taro-conditional-directives',
+        enforce: 'pre',
+        transform(code, id) {
+            if (!isConditionalDirectiveSource(id) || !code.includes('#if')) return
+            return { code: transformConditionalDirectives(code, target), map: null }
+        }
+    }
+}
+
+/**
+ * Filters files where Taro's conditional comments are meaningful.
+ *
+ * Plugin-only: source filter for generalized conditional-directive transform.
+ */
+function isConditionalDirectiveSource(id: string): boolean {
+    const normalizedId = normalizeModuleId(id)
+    if (normalizedId.includes('/node_modules/')) return false
+    return /\.(?:[cm]?[jt]sx?|css|s[ac]ss|less|styl)(?:\?|$)/.test(normalizedId)
+}
+
+type ConditionalDirectiveName = 'ifdef' | 'ifndef' | 'if' | 'elif' | 'else' | 'endif'
+
+type ConditionalDirective = {
+    name: ConditionalDirectiveName
+    expression: string
+}
+
+type ConditionalDirectiveFrame = {
+    parentActive: boolean
+    active: boolean
+    matched: boolean
+}
+
+/**
+ * Removes inactive blocks guarded by Taro conditional comments.
+ *
+ * Mirrors Taro's CSS #ifdef/#ifndef handling.
+ */
+function transformConditionalDirectives(code: string, target: VitePluginTaroTarget): string {
+    const lines = code.match(/[^\n]*(?:\n|$)/g) ?? []
+    const frames: ConditionalDirectiveFrame[] = []
+    let transformed = ''
+
+    for (const line of lines) {
+        if (!line) continue
+        const directive = parseConditionalDirective(line)
+        const lineEnding = getLineEnding(line)
+        if (directive) {
+            updateConditionalDirectiveFrames(frames, directive, target)
+            transformed += lineEnding
+            continue
+        }
+        transformed += isDirectiveStackActive(frames) ? line : lineEnding
+    }
+
+    return transformed
+}
+
+/**
+ * Parses one Taro conditional compilation directive from a comment-only line.
+ *
+ * Mirrors Taro's CSS comment-token handling.
+ */
+function parseConditionalDirective(line: string): ConditionalDirective | undefined {
+    const match = line.match(/^\s*(?:(?:\/\/)|(?:\/\*))\s*#(ifdef|ifndef|if|elif|else|endif)\b([^*\r\n]*)/)
+    if (!match) return
+    const name = toConditionalDirectiveName(match[1])
+    if (!name) return
+    return {
+        name,
+        expression: match[2]?.replace(/\*\/$/, '').trim() ?? ''
+    }
+}
+
+/**
+ * Converts a regex capture into a supported directive name.
+ *
+ * Mirrors Taro's CSS #ifdef/#ifndef/#endif token handling.
+ */
+function toConditionalDirectiveName(value: string): ConditionalDirectiveName | undefined {
+    if (
+        value === 'ifdef' ||
+        value === 'ifndef' ||
+        value === 'if' ||
+        value === 'elif' ||
+        value === 'else' ||
+        value === 'endif'
+    ) {
+        return value
+    }
+}
+
+/**
+ * Updates the active conditional stack using Taro-style #ifdef/#ifndef/#else/#endif semantics.
+ *
+ * Plugin-only: stack-based #if/#elif/#else support has no Taro webpack counterpart.
+ */
+function updateConditionalDirectiveFrames(
+    frames: ConditionalDirectiveFrame[],
+    directive: ConditionalDirective,
+    target: VitePluginTaroTarget
+): void {
+    if (directive.name === 'ifdef' || directive.name === 'ifndef' || directive.name === 'if') {
+        const conditionMatched = evaluateConditionalDirective(directive, target)
+        const parentActive = isDirectiveStackActive(frames)
+        frames.push({ parentActive, active: parentActive && conditionMatched, matched: conditionMatched })
+        return
+    }
+
+    const currentFrame = frames.at(-1)
+    if (!currentFrame) return
+
+    if (directive.name === 'elif') {
+        if (currentFrame.matched) {
+            currentFrame.active = false
+            return
+        }
+        const conditionMatched = evaluateConditionalDirective(directive, target)
+        currentFrame.active = currentFrame.parentActive && conditionMatched
+        currentFrame.matched = conditionMatched
+        return
+    }
+
+    if (directive.name === 'else') {
+        currentFrame.active = currentFrame.parentActive && !currentFrame.matched
+        currentFrame.matched = true
+        return
+    }
+
+    if (directive.name === 'endif') frames.pop()
+}
+
+/**
+ * Evaluates the small expression subset used by Taro conditional comments.
+ *
+ * Mirrors Taro's simple CSS platform membership checks.
+ */
+function evaluateConditionalDirective(directive: ConditionalDirective, target: VitePluginTaroTarget): boolean {
+    if (directive.name === 'ifndef') return !matchesDirectiveTarget(directive.expression, target)
+    if (directive.name === 'ifdef') return matchesDirectiveTarget(directive.expression, target)
+    return evaluateConditionalExpression(directive.expression, target)
+}
+
+/**
+ * Supports simple #if expressions with !, &&, and || over the configured target token.
+ *
+ * Plugin-only: #if expressions with && and || have no Taro webpack counterpart.
+ */
+function evaluateConditionalExpression(expression: string, target: VitePluginTaroTarget): boolean {
+    const orTerms = expression.split('||')
+    return orTerms.some((term) =>
+        term
+            .split('&&')
+            .map((factor) => factor.trim())
+            .filter(Boolean)
+            .every((factor) => evaluateConditionalFactor(factor, target))
+    )
+}
+
+/**
+ * Evaluates one target token, optionally negated.
+ *
+ * Plugin-only: negated #if factors have no Taro webpack counterpart.
+ */
+function evaluateConditionalFactor(factor: string, target: VitePluginTaroTarget): boolean {
+    let token = factor.replace(/[()]/g, '').trim()
+    let negated = false
+    while (token.startsWith('!')) {
+        negated = !negated
+        token = token.slice(1).trim()
+    }
+    const matched = matchesDirectiveTarget(token, target)
+    return negated ? !matched : matched
+}
+
+/**
+ * Checks whether a directive target list includes the current target.
+ *
+ * Mirrors Taro's simple CSS platform membership checks.
+ */
+function matchesDirectiveTarget(expression: string, target: VitePluginTaroTarget): boolean {
+    const tokens = expression
+        .split(/[\s,|&()!]+/)
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean)
+    return tokens.includes(target)
+}
+
+/**
+ * Preserves source line counts when conditional blocks are stripped.
+ *
+ * Plugin-only: preserves Vite source-map line counts while stripping conditional blocks.
+ */
+function getLineEnding(line: string): string {
+    const match = line.match(/\r?\n$/)
+    return match?.[0] ?? ''
+}
+
+/**
+ * Returns whether all active nested conditional frames include the current line.
+ *
+ * Plugin-only: stack activity helper for generalized conditional directives.
+ */
+function isDirectiveStackActive(frames: ConditionalDirectiveFrame[]): boolean {
+    return frames.every((frame) => frame.active)
+}

package/src/vite/tailwindcss.ts

@@ -0,0 +1,41 @@
+import tailwindcss from '@tailwindcss/vite'
+import type { PluginOption } from 'vite'
+import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
+import type { VitePluginTaroBuildContext } from './types.ts'
+
+export function createTailwindcssPlugins(context: VitePluginTaroBuildContext): PluginOption[] {
+    if (context.target === 'h5') return [tailwindcss()]
+
+    const plugins = WeappTailwindcss({
+        appType: 'taro',
+        generator: {
+            target: 'weapp'
+        },
+        tailwindcss: {
+            version: 4,
+            packageName: 'tailwindcss'
+        },
+        cssCalc: false,
+        // skyline does not support -webkit prefix.
+        autoprefixer: false,
+        postcssOptions: {
+            // Tailwind v4 prod mode emits legacy :before/:after selectors; skyline requires ::before/::after.
+            plugins: [createWechatPseudoElementPlugin()]
+        },
+        rem2rpx: true,
+        px2rpx: true
+    })
+
+    return plugins ?? []
+}
+
+function createWechatPseudoElementPlugin() {
+    const legacyPseudoElementPattern = /(?<!:):(before|after)\b/g
+
+    return {
+        postcssPlugin: 'vite-plugin-taro-wechat-pseudo-elements',
+        Rule(rule: { selector: string }) {
+            rule.selector = rule.selector.replace(legacyPseudoElementPattern, '::$1')
+        }
+    }
+}