vite-plugin-taro 0.5.12 → 0.5.13

package/dist/node/plugins/wx/resolve/resolver.js

@@ -8,6 +8,8 @@ import { specializePageCapsule } from './specialize-page-capsule.js';
 export function createResolver(options) {
     const normalizedBootstrapPath = normalizeModuleId(bootstrapPath);
     const normalizedPageCapsulePath = normalizeModuleId(pageCapsulePath);
+    // Construct output input and application traversal roots together once so style order cannot drift from route order.
+    const entryGraph = createEntryGraph(options.pages);
     // Provide constant-time route validation and access to each configured Page JSON object.
     const pageByPath = new Map(options.pages.map((page) => [page.path, page]));
     const privateIdResolvers = new Map([
@@ -32,7 +34,7 @@ export function createResolver(options) {
         ]
     ]);
     return {
-        input: createInput(options.pages),
+        ...entryGraph,
         resolveId(id, importer, projectRoot) {
             // Unknown IDs fall through so Vite and other plugins retain normal resolution.
             return privateIdResolvers.get(id)?.(importer, projectRoot);
@@ -53,22 +55,34 @@ export function createResolver(options) {
         }
     };
 }
-/** Declares native shells, infrastructure, and capsules as independent output entries. */
-function createInput(pages) {
-    return Object.fromEntries([
-        ['bootstrap', bootstrapPath],
-        ['transport', transportPath],
-        [appShellFileName, appShellPath],
-        ['app-capsule', appCapsulePath],
-        [componentShellFileName, componentShellPath],
-        ['component-capsule', componentCapsulePath],
-        ...pages.flatMap((page) => {
-            return [
-                [`${page.path}.js`, createRouteModuleId({ moduleId: pageShellPath, pagePath: page.path })],
-                [`${page.path}-capsule`, createRouteModuleId({ moduleId: pageCapsulePath, pagePath: page.path })]
-            ];
-        })
-    ]);
+/** Declares output entries and the ordered application subset that can own user styles. */
+function createEntryGraph(pages) {
+    const pageEntries = pages.map((page) => {
+        return {
+            capsuleId: createRouteModuleId({ moduleId: pageCapsulePath, pagePath: page.path }),
+            capsuleName: `${page.path}-capsule`,
+            shellId: createRouteModuleId({ moduleId: pageShellPath, pagePath: page.path }),
+            shellName: `${page.path}.js`
+        };
+    });
+    return {
+        // The App owns the first global cascade layer; configured Pages follow in their declared route order.
+        applicationEntryIds: [appCapsulePath, ...pageEntries.map((entry) => entry.capsuleId)],
+        input: Object.fromEntries([
+            ['bootstrap', bootstrapPath],
+            ['transport', transportPath],
+            [appShellFileName, appShellPath],
+            ['app-capsule', appCapsulePath],
+            [componentShellFileName, componentShellPath],
+            ['component-capsule', componentCapsulePath],
+            ...pageEntries.flatMap((entry) => {
+                return [
+                    [entry.shellName, entry.shellId],
+                    [entry.capsuleName, entry.capsuleId]
+                ];
+            })
+        ])
+    };
 }
 /** Creates one route-qualified module ID. */
 function createRouteModuleId({ moduleId, pagePath }) {

package/dist/node/plugins/wx/styles/plugins.d.ts

@@ -0,0 +1,3 @@
+import type { PluginOption } from 'vite';
+/** Creates the complete WX Tailwind and global-style pipeline. */
+export declare function createWxStylePlugins(): PluginOption[];

package/dist/node/plugins/wx/styles/plugins.js

@@ -0,0 +1,92 @@
+import { WeappTailwindcss } from 'weapp-tailwindcss/vite';
+import { transformVitePlugin } from '../../../utils/vite.js';
+import { tailwindcssBasedir } from '../../tailwind/tailwind-css.js';
+import { transformWxStyle, wxStyleOptions } from './transform-wx-style.js';
+/*
+ * WX style output order:
+ *
+ *   weapp-tailwindcss output hooks
+ *       → vpt:wx-style-finalizer
+ *       → vpt:wx native companion emission
+ *
+ * All three generateBundle hooks retain hook-level `order: 'post'` and therefore execute in registration order. The
+ * upstream plugin normally also uses plugin-level `enforce: 'post'`, which would move it behind both VPT plugins and
+ * break this sequence. `alignGenerateBundleOrder` removes only that broader phase from upstream output hooks.
+ */
+/** Creates the complete WX Tailwind and global-style pipeline. */
+export function createWxStylePlugins() {
+    const tailwindPlugins = WeappTailwindcss({
+        // VPT is a custom Vite compiler.
+        // Using Taro's adapter would import Taro-specific CSS ownership rules which we don't need.
+        appType: 'weapp-vite',
+        // WX generation rewrites Tailwind's split package imports before Vite tries to resolve them in the app.
+        // Without this, strict workspaces fail on imports such as `tailwindcss/theme.css`.
+        rewriteCssImports: true,
+        platform: 'weapp',
+        tailwindcssBasedir,
+        generator: {
+            target: 'weapp'
+        },
+        cssOptions: wxStyleOptions,
+        logLevel: 'warn'
+    }) ?? [];
+    return [transformVitePlugin(tailwindPlugins, alignGenerateBundleOrder), createWxStyleFinalizer(transformWxStyle)];
+}
+/**
+ * Finalizes the one global stylesheet after upstream Tailwind generation.
+ *
+ * `cssCodeSplit: false` makes the compiler style global, but upstream can name it `.css` or `.wxss` depending on build
+ * mode. This hook converts its complete final contents once and renames that compiler asset to `assets/global.wxss`. An
+ * application without styles receives an empty global asset at the same stable path. Running earlier loses CSS from
+ * dynamic chunks; running after native companion emission would also see Page and native-component WXSS files that must
+ * remain opaque.
+ */
+function createWxStyleFinalizer(transformStyle) {
+    return {
+        name: 'vpt:wx-style-finalizer',
+        generateBundle: {
+            order: 'post',
+            async handler(_, bundle) {
+                const styles = Object.values(bundle).filter(isStyleAsset);
+                // Multiple compiler styles mean cssCodeSplit was re-enabled. Choosing one would silently lose CSS.
+                if (styles.length > 1) {
+                    throw new Error('WX builds support at most one compiler-emitted stylesheet');
+                }
+                if (styles.length === 0) {
+                    this.emitFile({ type: 'asset', fileName: 'assets/global.wxss', source: '' });
+                    return;
+                }
+                const [style] = styles;
+                const source = typeof style.source === 'string' ? style.source : new TextDecoder().decode(style.source);
+                const transformedResult = await transformStyle(source);
+                // Preserve the compiler stylesheet as the real global asset so its bundle metadata and ownership remain
+                // intact. Only its finalized contents and stable WXSS identity change.
+                style.source = transformedResult.css;
+                style.fileName = 'assets/global.wxss';
+            }
+        }
+    };
+}
+/**
+ * Adapts upstream plugin descriptors without mutating `weapp-tailwindcss` or patching node_modules.
+ *
+ * Vite first groups whole plugins by `enforce`, then orders individual hooks. Upstream's output plugins specify both
+ * `enforce: 'post'` and `generateBundle.order: 'post'`. The plugin-level phase overrides their earlier registration and
+ * places them after VPT's normal plugins, so VPT observes incomplete CSS. Making all of VPT post-enforced would fix that
+ * one hook while unnecessarily reordering resolution and transforms.
+ *
+ * For upstream plugins that actually own generateBundle, clone the descriptor without plugin-level enforcement. Keep
+ * hook-level `order: 'post'`: it still waits for ordinary bundle generation, while registration order becomes the sole
+ * tie-breaker between upstream generation, VPT finalization and native output.
+ */
+function alignGenerateBundleOrder(plugin) {
+    if (plugin.enforce !== 'post' || plugin.generateBundle === undefined) {
+        return plugin;
+    }
+    // Clone rather than mutate: upstream may retain or reuse the descriptor returned by its factory.
+    return { ...plugin, enforce: undefined };
+}
+/** Selects only the compiler stylesheet; native WXSS assets are emitted by the later WX hook. */
+function isStyleAsset(output) {
+    return output.type === 'asset' && /\.(?:css|wxss)$/.test(output.fileName);
+}

package/dist/node/plugins/wx/styles/transform-wx-style.d.ts

@@ -0,0 +1,8 @@
+export declare const wxStyleOptions: {
+    readonly cssCalc: false;
+    readonly autoprefixer: false;
+    readonly rem2rpx: true;
+    readonly px2rpx: true;
+};
+/** Shared finalization policy for complete builds and host-owned style HMR. */
+export declare const transformWxStyle: import("@weapp-tailwindcss/postcss").StyleHandler;

package/dist/node/plugins/wx/styles/transform-wx-style.js

@@ -0,0 +1,9 @@
+import { createStyleHandler } from '@weapp-tailwindcss/postcss';
+export const wxStyleOptions = {
+    cssCalc: false,
+    autoprefixer: false,
+    rem2rpx: true,
+    px2rpx: true
+};
+/** Shared finalization policy for complete builds and host-owned style HMR. */
+export const transformWxStyle = createStyleHandler(wxStyleOptions);

package/dist/node/plugins/wx/styles/utils.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Creates an auxiliary style request without replacing the physical Rolldown graph module.
+ *
+ * `weapp-vite-sidecar` is an upstream protocol marker, not a cache-busting nonce. `weapp-tailwindcss` detects the query
+ * key, strips the complete query when resolving the physical CSS pipeline file, and excludes this synthetic request from
+ * transformed-source candidate collection. That lets the request use the latest candidate state without feeding generated
+ * CSS back into Tailwind's source memory. The descriptive `style` value is stable; upstream treats the presence of the key
+ * as the protocol contract.
+ */
+export declare function createTailwindSidecarId(rootId: string): string;
+/** Selects imported style modules whose Vite development output owns a runtime CSS payload. */
+export declare function isGlobalStyleRequest(id: string): boolean;
+/**
+ * Creates the ordered style plan for one completed HMR transaction.
+ *
+ * `entryIds` carries semantic cascade ownership from the WX resolver: the App capsule first, followed by Page capsules in
+ * configured route order. Each entry is traversed depth-first. Static imports retain source order and precede dynamic imports;
+ * dynamic branches are included because WX cannot inject lazy CSS at browser runtime. A style follows its dependencies,
+ * matching evaluation order.
+ *
+ * Graph IDs may contain queries while `hasStyle` reads physical IDs. Normalization lets aliases share one captured style.
+ * JavaScript and non-runtime CSS requests remain traversal nodes but do not enter the plan. All mutable traversal state is
+ * transaction-local, so import additions and removals need no invalidation bookkeeping. Complexity is O(modules + edges),
+ * with O(modules + styles) temporary memory.
+ */
+export declare function createGraphStylePlan(entryIds: readonly string[], getModuleInfo: (moduleId: string) => Readonly<{
+    importedIds: readonly string[];
+    dynamicallyImportedIds: readonly string[];
+}> | null, hasStyle: (styleId: string) => boolean): readonly string[];
+/** Renders one immutable graph plan after any Tailwind roots in that same plan have been refreshed. */
+export declare function composeGraphStyleCss(styleIds: readonly string[], getStyleCss: (styleId: string) => string): string;
+/**
+ * Extracts Vite's final CSS payload from the development module without evaluating its browser HMR code.
+ *
+ * Remove this parser when either Vite exposes a supported plugin-container API that returns final CSS directly, or
+ * `weapp-tailwindcss` exposes generated root CSS after candidate updates. Until then the sidecar receives Vite's JavaScript
+ * style module, so this function isolates the version-specific `__vite__css` serialization contract.
+ */
+export declare function extractViteCss(moduleCode: string, rootId: string): string;

package/dist/node/plugins/wx/styles/utils.js

@@ -0,0 +1,95 @@
+import { isCSSRequest } from 'vite';
+import { normalizeModuleId } from '../../../utils/modules.js';
+const nonRuntimeStyleQueries = ['direct', 'inline', 'inline-css', 'raw', 'style-attr', 'transform-only', 'url'];
+/**
+ * Creates an auxiliary style request without replacing the physical Rolldown graph module.
+ *
+ * `weapp-vite-sidecar` is an upstream protocol marker, not a cache-busting nonce. `weapp-tailwindcss` detects the query
+ * key, strips the complete query when resolving the physical CSS pipeline file, and excludes this synthetic request from
+ * transformed-source candidate collection. That lets the request use the latest candidate state without feeding generated
+ * CSS back into Tailwind's source memory. The descriptive `style` value is stable; upstream treats the presence of the key
+ * as the protocol contract.
+ */
+export function createTailwindSidecarId(rootId) {
+    return `${rootId}?weapp-vite-sidecar=style`;
+}
+/** Selects imported style modules whose Vite development output owns a runtime CSS payload. */
+export function isGlobalStyleRequest(id) {
+    if (!isCSSRequest(id)) {
+        return false;
+    }
+    const queryStart = id.indexOf('?');
+    if (queryStart < 0) {
+        return true;
+    }
+    const fragmentStart = id.indexOf('#', queryStart);
+    const query = id.slice(queryStart + 1, fragmentStart < 0 ? undefined : fragmentStart);
+    const parameters = new URLSearchParams(query);
+    return (!parameters.has('weapp-vite-sidecar') && nonRuntimeStyleQueries.every((parameter) => !parameters.has(parameter)));
+}
+/**
+ * Creates the ordered style plan for one completed HMR transaction.
+ *
+ * `entryIds` carries semantic cascade ownership from the WX resolver: the App capsule first, followed by Page capsules in
+ * configured route order. Each entry is traversed depth-first. Static imports retain source order and precede dynamic imports;
+ * dynamic branches are included because WX cannot inject lazy CSS at browser runtime. A style follows its dependencies,
+ * matching evaluation order.
+ *
+ * Graph IDs may contain queries while `hasStyle` reads physical IDs. Normalization lets aliases share one captured style.
+ * JavaScript and non-runtime CSS requests remain traversal nodes but do not enter the plan. All mutable traversal state is
+ * transaction-local, so import additions and removals need no invalidation bookkeeping. Complexity is O(modules + edges),
+ * with O(modules + styles) temporary memory.
+ */
+export function createGraphStylePlan(entryIds, getModuleInfo, hasStyle) {
+    // These local collections collapse cycles, shared modules, and aliases without retaining derived topology between batches.
+    const visitedModuleIds = new Set();
+    const visitedStyleIds = new Set();
+    const styleIds = [];
+    const visit = (moduleId) => {
+        if (visitedModuleIds.has(moduleId)) {
+            return;
+        }
+        visitedModuleIds.add(moduleId);
+        const moduleInfo = getModuleInfo(moduleId);
+        if (!moduleInfo) {
+            return;
+        }
+        moduleInfo.importedIds.forEach(visit);
+        moduleInfo.dynamicallyImportedIds.forEach(visit);
+        const styleId = normalizeModuleId(moduleId);
+        if (hasStyle(styleId) && !visitedStyleIds.has(styleId)) {
+            visitedStyleIds.add(styleId);
+            styleIds.push(styleId);
+        }
+    };
+    entryIds.forEach(visit);
+    return styleIds;
+}
+/** Renders one immutable graph plan after any Tailwind roots in that same plan have been refreshed. */
+export function composeGraphStyleCss(styleIds, getStyleCss) {
+    return styleIds.map(getStyleCss).join('\n');
+}
+/**
+ * Extracts Vite's final CSS payload from the development module without evaluating its browser HMR code.
+ *
+ * Remove this parser when either Vite exposes a supported plugin-container API that returns final CSS directly, or
+ * `weapp-tailwindcss` exposes generated root CSS after candidate updates. Until then the sidecar receives Vite's JavaScript
+ * style module, so this function isolates the version-specific `__vite__css` serialization contract.
+ */
+export function extractViteCss(moduleCode, rootId) {
+    const assignmentPrefix = 'const __vite__css = ';
+    const assignmentStart = moduleCode.indexOf(assignmentPrefix);
+    if (assignmentStart < 0) {
+        throw new Error(`Vite CSS transform for ${rootId} did not expose __vite__css`);
+    }
+    // Vite serializes the payload with JSON.stringify on one assignment line. Parse that literal so quotes, escapes, and
+    // embedded CSS newlines are decoded by JSON rather than by a second, subtly different unescaping implementation.
+    const valueStart = assignmentStart + assignmentPrefix.length;
+    const lineEnd = moduleCode.indexOf('\n', valueStart);
+    const serializedCss = moduleCode.slice(valueStart, lineEnd < 0 ? moduleCode.length : lineEnd);
+    const css = JSON.parse(serializedCss);
+    if (typeof css !== 'string') {
+        throw new Error(`Vite CSS transform for ${rootId} exposed a non-string __vite__css value`);
+    }
+    return css;
+}

package/dist/node/utils/vite.d.ts

@@ -0,0 +1,17 @@
+import type { HookHandler, Plugin, PluginOption } from 'vite';
+type TransformHook = HookHandler<NonNullable<Plugin['transform']>>;
+export type TransformHookResult = Awaited<ReturnType<TransformHook>>;
+export type AsyncTransformHook = (this: ThisParameterType<TransformHook>, ...args: Parameters<TransformHook>) => Promise<TransformHookResult>;
+export type TransformHookWrapper = (transform: AsyncTransformHook) => AsyncTransformHook;
+export type PluginMapper = (plugin: Plugin) => Plugin;
+/** Transforms every concrete plugin while preserving nested arrays, falsy options, and promised options. */
+export declare function transformVitePlugin(pluginOptions: PluginOption[], mapPlugin: PluginMapper): PluginOption[];
+/**
+ * Clones a Vite transform hook with middleware that controls execution of the original handler.
+ *
+ * Function and object hook forms retain their original plugin context. Object metadata such as `order` and `filter` is copied
+ * unchanged, and the input descriptor is never mutated. The wrapper receives the normalized asynchronous transform with its
+ * complete plugin context, code, ID, and metadata signature, and returns the handler that continues Vite's plugin pipeline.
+ */
+export declare function wrapPluginTransform(plugin: Plugin, wrapper: TransformHookWrapper): Plugin;
+export {};

package/dist/node/utils/vite.js

@@ -0,0 +1,43 @@
+/** Transforms every concrete plugin while preserving nested arrays, falsy options, and promised options. */
+export function transformVitePlugin(pluginOptions, mapPlugin) {
+    return pluginOptions.map((option) => transformPluginOption(option, mapPlugin));
+}
+function transformPluginOption(option, mapPlugin) {
+    if (option instanceof Promise) {
+        return option.then((resolvedOption) => transformPluginOption(resolvedOption, mapPlugin));
+    }
+    if (Array.isArray(option)) {
+        return transformVitePlugin(option, mapPlugin);
+    }
+    return isPlugin(option) ? mapPlugin(option) : option;
+}
+function isPlugin(option) {
+    return (option !== null &&
+        option !== false &&
+        option !== undefined &&
+        typeof option === 'object' &&
+        !Array.isArray(option) &&
+        'name' in option);
+}
+/**
+ * Clones a Vite transform hook with middleware that controls execution of the original handler.
+ *
+ * Function and object hook forms retain their original plugin context. Object metadata such as `order` and `filter` is copied
+ * unchanged, and the input descriptor is never mutated. The wrapper receives the normalized asynchronous transform with its
+ * complete plugin context, code, ID, and metadata signature, and returns the handler that continues Vite's plugin pipeline.
+ */
+export function wrapPluginTransform(plugin, wrapper) {
+    const { transform } = plugin;
+    if (!transform) {
+        throw new Error(`${plugin.name} must expose a transform hook`);
+    }
+    const isTransformFunction = typeof transform === 'function';
+    const handler = isTransformFunction ? transform : transform.handler;
+    const wrappedHandler = wrapper(async function (code, id, meta) {
+        return handler.call(this, code, id, meta);
+    });
+    return {
+        ...plugin,
+        transform: isTransformFunction ? wrappedHandler : { ...transform, handler: wrappedHandler }
+    };
+}

package/dist/node/vite-plugin.js

@@ -1,7 +1,6 @@
 import react from '@vitejs/plugin-react';
 import { createClientTaroPlugin } from './plugins/client/client-taro.js';
 import { createConditionalDirectivePlugin } from './plugins/conditional/conditional-directives.js';
-import { createCssPlugins } from './plugins/css/plugins.js';
 import { createH5TargetPlugins } from './plugins/h5/plugins.js';
 import { createWxTargetPlugins } from './plugins/wx/plugins.js';
 /** Creates the Vite plugins for one Taro target. */
@@ -9,7 +8,6 @@ export default function vitePluginTaro(options) {
     return [
         createConditionalDirectivePlugin(options.target),
         createClientTaroPlugin(options.target),
-        ...createCssPlugins(options.target),
         ...react(),
         ...(options.target === 'wx' ? createWxTargetPlugins(options) : []),
         ...(options.target === 'h5' ? createH5TargetPlugins(options) : [])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-taro",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "author": "sep2",
   "description": "Vite 8 plugin for building one React/Taro codebase for WeChat Mini Program and H5 targets.",
   "type": "module",
@@ -75,8 +75,8 @@
     "rolldown": "1.2.3",
     "tailwindcss": "^4.3.3",
     "weapp-tailwindcss": "^5.2.11",
-    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.5.12",
-    "@tarojs/react": "npm:vite-plugin-taro-react@0.5.12"
+    "@tarojs/plugin-framework-react": "npm:vite-plugin-taro-plugin-framework-react@0.5.13",
+    "@tarojs/react": "npm:vite-plugin-taro-react@0.5.13"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/node/plugins/h5/plugins.ts

@@ -1,17 +1,38 @@
 import babel, { defineRolldownBabelPreset } from '@rolldown/plugin-babel'
 import type { HtmlTagDescriptor, Plugin, PluginOption } from 'vite'
+import { WeappTailwindcss } from 'weapp-tailwindcss/vite'
 import type { VitePluginTaroOptions } from '../../../options.ts'
 import { esTarget } from '../../utils/constant.ts'
 import { toViteFileImportPath } from '../../utils/modules.ts'
 import { packageRequire } from '../../utils/packages.ts'
 import { clientTaroApiId } from '../client/client-taro.ts'
+import { tailwindcssBasedir } from '../tailwind/tailwind-css.ts'
 import { h5AppPath } from './constant.ts'
 import { createStencilClientAdapter } from './create-stencil-client-adapter.ts'
 import { createModuleResolver } from './resolver/module-resolver.ts'
 
 /** Creates the plugins that own the H5 target. */
 export function createH5TargetPlugins(options: VitePluginTaroOptions): PluginOption[] {
-    return [...createH5SupportPlugins(), createH5TargetPlugin(options)]
+    return [
+        WeappTailwindcss({
+            appType: 'weapp-vite',
+            rewriteCssImports: false,
+            platform: 'web',
+            tailwindcssBasedir,
+            generator: {
+                target: 'web'
+            },
+            cssOptions: {
+                cssCalc: false,
+                autoprefixer: true,
+                rem2rpx: true,
+                px2rpx: true
+            },
+            logLevel: 'warn'
+        }),
+        ...createH5SupportPlugins(),
+        createH5TargetPlugin(options)
+    ]
 }
 
 /** Configures H5 resolution and supplies the specialized physical application entry. */

package/src/node/plugins/tailwind/tailwind-css.ts

@@ -0,0 +1,4 @@
+import path from 'node:path'
+import { packageRequire } from '../../utils/packages.ts'
+
+export const tailwindcssBasedir = path.dirname(packageRequire.resolve('tailwindcss/package.json'))

package/src/node/plugins/wx/dev/dev-host.ts

@@ -1,21 +1,28 @@
+import { readFile } from 'node:fs/promises'
 import type { ServerResponse } from 'node:http'
 import path from 'node:path'
 import colors from 'picocolors'
+import type { GetModuleInfo } from 'rolldown'
 import { type DevEngine, type DevOptions, dev } from 'rolldown/experimental'
-import type { Connect, ViteDevServer } from 'vite'
+import { type Connect, isCSSRequest, type ViteDevServer } from 'vite'
 import type { VitePluginTaroOptions } from '../../../../options.ts'
 import { SerializedTaskQueue } from '../../../utils/serialized-task-queue.ts'
+import { createGraphStylePlan, isGlobalStyleRequest } from '../styles/utils.ts'
 import {
+    developmentAppWxssFileName,
     type HmrInfo,
     hmrControlPath,
     hmrInfoFileName,
     hmrPatchesFileName,
     type PatchUpdate,
+    renderDevelopmentAppWxss,
     renderHmrInfo,
     renderInitialHmrPatches,
     writeHmrFile
 } from './hmr-files.ts'
 import { PatchPublisher } from './patch-publisher.ts'
+import { createStyleCapturePlugin, type ProcessedStyle } from './styles/create-style-capture-plugin.ts'
+import { globalWxssFileName, publishStyleHmr, refreshTailwindStyles } from './styles/publish-style-hmr.ts'
 import { type BundledDev, installWxDevOptions, requireSingleOutput } from './wx-dev-options.ts'
 
 export type WxDevHost = Readonly<{
@@ -45,15 +52,41 @@ type DevOutputResult = Parameters<NonNullable<DevOptions['onOutput']>>[0]
  * with dev(...)) and the patch publisher, and replaces Vite's bundledDev.listen so the
  * engine writes directly to the Mini Program output directory instead of serving browser
  * HMR over HTTP.
+ *
+ * `applicationEntryIds` is the resolver's immutable cascade policy, not a second graph: it selects the App capsule followed
+ * by configured Page capsules from Rolldown's larger entry set. Rolldown remains the authority for every live import edge.
  */
 export async function createWxDevHost({
     server,
-    options
+    options,
+    applicationEntryIds
 }: {
     server: ViteDevServer
     options: VitePluginTaroOptions
+    applicationEntryIds: readonly string[]
 }): Promise<WxDevHost> {
     const bundledDev = getBundledDev(server)
+    // This is the host's mutable style projection: CSS absent from Rolldown, the live graph capability rebound by each
+    // complete build, and the last durable WXSS bytes used only to suppress identical filesystem publications. Style capture
+    // remains O(1); derived order and reachability stay local to each HMR transaction.
+    const styleState: {
+        getModuleInfo: GetModuleInfo | undefined
+        processedStyles: Map<string, ProcessedStyle>
+        publishedWxss: string | undefined
+    } = {
+        getModuleInfo: undefined,
+        processedStyles: new Map(),
+        publishedWxss: undefined
+    }
+    const styleCapturePlugin = createStyleCapturePlugin({
+        captureGraph(reader) {
+            styleState.getModuleInfo = reader
+        },
+        captureStyle(id, style) {
+            styleState.processedStyles.set(id, style)
+        }
+    })
+
     // Rolldown invokes output callbacks without awaiting their promises. This queue is the single owner of mutable HMR host
     // state and physical metadata writes, preventing a later patch or build identity from being overwritten by older work.
     const hostTasks = new SerializedTaskQueue((operation, error) => logWxError(server.config.logger, operation, error))
@@ -64,7 +97,7 @@ export async function createWxDevHost({
 
     // DevEngine does not reject run() after an initial plugin failure. The options layer owns a first-build buildEnd barrier
     // and exposes only its result; later build errors continue independently through onOutput and onHmrUpdates.
-    const initialBuild = installWxDevOptions({ bundledDev, server, options })
+    const initialBuild = installWxDevOptions({ bundledDev, server, options, hostPlugins: [styleCapturePlugin] })
     const engine: DevEngine = await createEngine()
 
     // The wx dev host owns the only DevEngine. Vite's default listen() would create a second
@@ -198,6 +231,12 @@ export async function createWxDevHost({
             return
         }
 
+        // `onHmrUpdates` is the transaction boundary after every affected transform has updated graph and candidate state.
+        // Every non-CSS edit may alter imports or Tailwind classes; rendering broadly and comparing finalized bytes avoids
+        // source scanning while preventing unrelated JavaScript edits from notifying DevTools through an identical rename.
+        await publishChangedStyles(batch)
+
+        // Publish global.wxss before the matching JavaScript patch so DevTools observes a coherent HMR transaction.
         // The physical file must exist before Rolldown advances: once committed, later patches may be generated relative to
         // this batch even if DevTools has not observed its file event yet. PatchPublisher keeps the unapplied range cumulative,
         // so any later file generation still carries every factory needed to bridge the runtime's older application frontier.
@@ -206,6 +245,37 @@ export async function createWxDevHost({
         await commitPublishedBatch(batch)
     }
 
+    /** Publishes the style projection for one completed patch transaction when its source or topology may have changed. */
+    async function publishChangedStyles(batch: readonly PatchUpdate[]): Promise<void> {
+        const changedIds = batch.flatMap((patch) => patch.changedIds)
+        const styleChanged = changedIds.some(isGlobalStyleRequest)
+        const candidatesChanged = changedIds.some((id) => !isCSSRequest(id))
+        if (!styleChanged && !candidatesChanged) {
+            return
+        }
+
+        // buildStart installs this reader before Rolldown can produce either a complete output or an incremental batch.
+        const getModuleInfo = styleState.getModuleInfo
+        if (!getModuleInfo) {
+            throw new Error('WX style graph is unavailable before HMR publication')
+        }
+        // Traverse topology exactly once; root refresh and final rendering consume this immutable transaction plan.
+        const styleIds = createGraphStylePlan(applicationEntryIds, getModuleInfo, (styleId) =>
+            styleState.processedStyles.has(styleId)
+        )
+        if (candidatesChanged) {
+            await refreshTailwindStyles(styleIds, styleState.processedStyles, async (rootId, requestId) =>
+                server.environments.client.pluginContainer.transform(await readFile(rootId, 'utf8'), requestId)
+            )
+        }
+        styleState.publishedWxss = await publishStyleHmr({
+            styleIds: styleIds,
+            outDir: server.config.build.outDir,
+            processedStyles: styleState.processedStyles,
+            publishedWxss: styleState.publishedWxss
+        })
+    }
+
     /**
      * Advances Rolldown's published frontier in the same sequence order materialized in the cumulative physical file.
      *
@@ -228,7 +298,13 @@ export async function createWxDevHost({
             logWxError(server.config.logger, 'wx dev build failed', result)
             return
         }
-        hostTasks.enqueue('wx dev build finalization failed', rotateBuildSession)
+        hostTasks.enqueue('wx dev build finalization failed', finalizeDevOutput)
+    }
+
+    /** Rebinds the byte frontier after a complete build replaces the physical stylesheet outside HMR publication. */
+    async function finalizeDevOutput(): Promise<void> {
+        styleState.publishedWxss = await readFile(path.join(server.config.build.outDir, globalWxssFileName), 'utf8')
+        await rotateBuildSession()
     }
 }
 
@@ -245,7 +321,7 @@ function boundPort(server: ViteDevServer): number | undefined {
     return address.port
 }
 
-/** Resets physical patches before exposing the matching immutable build identity to a new App heap. */
+/** Resets physical patches and then exposes one coherent build identity to a freshly compiled App heap. */
 async function publishBuildMetadata(server: ViteDevServer, buildId: string, port: number): Promise<void> {
     const info: HmrInfo = {
         buildId,
@@ -254,6 +330,12 @@ async function publishBuildMetadata(server: ViteDevServer, buildId: string, port
 
     await writeHmrFile(server.config.build.outDir, hmrPatchesFileName, renderInitialHmrPatches())
     await writeHmrFile(server.config.build.outDir, hmrInfoFileName, renderHmrInfo(info))
+    // `removeDevelopmentAppWxss` kept the previous physical wrapper in place while the complete output was written. Replace
+    // it only now, after the empty patch frontier and matching identity are durable. DevTools treats `app.wxss` as an App root,
+    // so this write intentionally causes the one full refresh allowed at a complete-build boundary; the refreshed App reads
+    // the new info above. Incremental updates must never write this file because an App refresh could destroy the heap while
+    // its JavaScript patch is being acknowledged. They publish only the imported `assets/global.wxss` stylesheet instead.
+    await writeHmrFile(server.config.build.outDir, developmentAppWxssFileName, renderDevelopmentAppWxss(buildId))
 }
 
 /** Replaces browser server URLs with the physical project directory consumed by WeChat DevTools. */