vite-plugin-taro 0.5.1 → 0.5.4

package/README.en.md

@@ -8,7 +8,15 @@
 
 Build WeChat Mini Program and Web apps with Vite 8, React 19, Taro 4, and Tailwind CSS v4.
 
-Documentation website: <https://vite-plugin-taro.netlify.app>
+Website: <https://vpt.js.org>
+
+## Quick Start
+
+```sh
+npm create vite-taro@latest my-app
+```
+
+Continue with the [Quick Start guide](https://vpt.js.org/guides/quick-start/).
 
 ### React Hot Reload in WeChat DevTools
 
@@ -21,23 +29,15 @@ Documentation website: <https://vite-plugin-taro.netlify.app>
 - **Built on Taro, beyond Taro** Use Taro components and APIs without the old webpack pipeline.
 - **Skyline ready** Use WeChat Skyline rendering globally or per page.
 
-## Create an app
-
-```sh
-npm create vite-taro@latest my-app
-```
-
-Continue with the [Quick Start guide](https://vite-plugin-taro.netlify.app/guides/quick-start/).
-
 ## Documentation
 
-- [Automatic subpackages](https://vite-plugin-taro.netlify.app/guides/automatic-subpackages/)
-- [Native WeChat components](https://vite-plugin-taro.netlify.app/guides/native-components/)
-- [Hot module replacement](https://vite-plugin-taro.netlify.app/guides/hot-module-replacement/)
-- [Skyline mode](https://vite-plugin-taro.netlify.app/guides/skyline-mode/)
-- [Migrate from Taro CLI](https://vite-plugin-taro.netlify.app/guides/migrate-from-taro/)
-- [Configuration reference](https://vite-plugin-taro.netlify.app/references/configuration/)
-- [Repository management](https://vite-plugin-taro.netlify.app/references/repository-management/)
+- [Automatic subpackages](https://vpt.js.org/guides/automatic-subpackages/)
+- [Native WeChat components](https://vpt.js.org/guides/native-components/)
+- [Hot module replacement](https://vpt.js.org/guides/hot-module-replacement/)
+- [Skyline mode](https://vpt.js.org/guides/skyline-mode/)
+- [Migrate from Taro CLI](https://vpt.js.org/guides/migrate-from-taro/)
+- [Configuration reference](https://vpt.js.org/references/configuration/)
+- [Repository management](https://vpt.js.org/references/repository-management/)
 
 ## License
 

package/README.md

@@ -8,7 +8,16 @@
 
 使用 Vite 8、React 19、Taro 4 和 Tailwind CSS v4 构建微信小程序与 Web 应用。
 
-文档网站：<https://vite-plugin-taro.netlify.app>
+官网：<https://vpt.js.org>
+
+## 快速开始
+
+```sh
+npm create vite-taro@latest my-app
+```
+
+接下来阅读[快速开始](https://vpt.js.org/guides/quick-start/)。
+
 
 ### 已支持微信开发者工具的 React 热更新
 
@@ -21,23 +30,15 @@
 - **基于 Taro，超越 Taro** 使用 Taro 组件和 API，摆脱旧式 webpack 链路。
 - **Skyline 就绪** 支持全局或按页面启用微信 Skyline 渲染模式。
 
-## 创建应用
-
-```sh
-npm create vite-taro@latest my-app
-```
-
-接下来阅读[快速开始](https://vite-plugin-taro.netlify.app/guides/quick-start/)。
-
 ## 文档
 
-- [全自动分包](https://vite-plugin-taro.netlify.app/guides/automatic-subpackages/)
-- [微信原生组件](https://vite-plugin-taro.netlify.app/guides/native-components/)
-- [开发者工具热更新](https://vite-plugin-taro.netlify.app/guides/hot-module-replacement/)
-- [Skyline 模式](https://vite-plugin-taro.netlify.app/guides/skyline-mode/)
-- [从 Taro CLI 迁移](https://vite-plugin-taro.netlify.app/guides/migrate-from-taro/)
-- [配置参考](https://vite-plugin-taro.netlify.app/references/configuration/)
-- [仓库维护](https://vite-plugin-taro.netlify.app/references/repository-management/)
+- [全自动分包](https://vpt.js.org/guides/automatic-subpackages/)
+- [微信原生组件](https://vpt.js.org/guides/native-components/)
+- [开发者工具热更新](https://vpt.js.org/guides/hot-module-replacement/)
+- [Skyline 模式](https://vpt.js.org/guides/skyline-mode/)
+- [从 Taro CLI 迁移](https://vpt.js.org/guides/migrate-from-taro/)
+- [配置参考](https://vpt.js.org/references/configuration/)
+- [仓库维护](https://vpt.js.org/references/repository-management/)
 
 ## 许可证
 

package/dist/node/plugins/client/client-taro.d.ts

@@ -1,4 +1,6 @@
 import type { Plugin } from 'vite';
+import type { VitePluginTaroTarget } from '../../../options.ts';
+/** Public facade used by transformed application API imports. */
 export declare const clientTaroApiId = "virtual:taro/api";
-/** Creates the target-neutral Taro facade plugin. */
-export declare function createClientTaroPlugin(): Plugin;
+/** Creates the shared Taro facade backed by the selected target's API implementation. */
+export declare function createClientTaroPlugin(target: VitePluginTaroTarget): Plugin;

package/dist/node/plugins/client/client-taro.js

@@ -1,19 +1,58 @@
+import { normalizeModuleId } from '../../utils/modules.js';
 import { resolvePackageFile } from '../../utils/packages.js';
 import { clientTaroNativeId } from './constant.js';
+import { injectTaroFrameworkApis } from './inject-taro-framework-apis.js';
+/*
+ * Taro API resolution uses one public facade while avoiding a recursive `@tarojs/taro` import:
+ *
+ * 1. Application imports of `virtual:taro/api` or `@tarojs/taro` resolve to the physical `api.js` facade.
+ * 2. The facade itself imports `@tarojs/taro`; its importer identifies that request as the platform implementation.
+ * 3. H5 receives `@tarojs/plugin-platform-h5` APIs, while WX receives the generic `@tarojs/taro` implementation.
+ * 4. React's framework API loader transforms the facade, assigning lifecycle hooks such as `useLaunch` to the same
+ *    platform object and exposing them as named exports.
+ *
+ * The importer-sensitive second step removes the need for another public-looking virtual module while retaining one
+ * facade object for platform APIs and framework lifecycles.
+ */
+/** Public facade used by transformed application API imports. */
 export const clientTaroApiId = 'virtual:taro/api';
+const clientTaroApiPath = resolvePackageFile('dist/runtime/client/taro/api.js');
+const normalizedClientTaroApiPath = normalizeModuleId(clientTaroApiPath);
 const clientTaroComponentId = 'virtual:taro/components';
 const clientTaroModules = new Map([
-    [clientTaroApiId, resolvePackageFile('dist/runtime/client/taro/api.js')],
+    [clientTaroApiId, clientTaroApiPath],
     [clientTaroComponentId, resolvePackageFile('dist/runtime/client/taro/component.js')],
     [clientTaroNativeId, resolvePackageFile('dist/runtime/client/taro/define-native-component.js')]
 ]);
-/** Creates the target-neutral Taro facade plugin. */
-export function createClientTaroPlugin() {
+/** Creates the shared Taro facade backed by the selected target's API implementation. */
+export function createClientTaroPlugin(target) {
+    const platformTaroId = resolvePlatformTaroId(target);
     return {
         name: 'vpt:client-taro',
         enforce: 'pre',
-        resolveId(id) {
+        async resolveId(id, importer) {
+            if (id === '@tarojs/taro') {
+                if (!isClientTaroFacade(importer)) {
+                    return clientTaroApiPath;
+                }
+                // Delegate the platform backend to Vite instead of returning an absolute dependency path. H5 marks this
+                // backend as an optimization root, so delegation lets Vite substitute its prebundled facade. Removing it
+                // bypasses CommonJS interop and exposes backend details such as base64-js directly to the browser.
+                return this.resolve(platformTaroId, importer, { skipSelf: true });
+            }
             return clientTaroModules.get(id);
+        },
+        // Taro's framework loader transforms source code, so apply it only to the shared physical facade.
+        transform(code, id) {
+            if (normalizeModuleId(id) === normalizedClientTaroApiPath) {
+                return injectTaroFrameworkApis(code);
+            }
         }
     };
 }
+function resolvePlatformTaroId(target) {
+    return target === 'h5' ? '@tarojs/plugin-platform-h5/dist/runtime/apis' : '@tarojs/taro';
+}
+function isClientTaroFacade(importer) {
+    return importer !== undefined && normalizeModuleId(importer) === normalizedClientTaroApiPath;
+}

package/dist/node/plugins/client/inject-taro-framework-apis.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Applies Taro React's standard source-to-source API loader. It imports the framework lifecycle hooks, assigns them to
+ * the facade's `taro` object, and emits matching named exports; keeping the hook inventory owned by Taro avoids drift.
+ */
+export declare function injectTaroFrameworkApis(source: string): string;

package/dist/node/plugins/client/inject-taro-framework-apis.js

@@ -0,0 +1,9 @@
+import { packageRequire } from '../../utils/packages.js';
+const apiLoader = packageRequire('@tarojs/plugin-framework-react/dist/api-loader');
+/**
+ * Applies Taro React's standard source-to-source API loader. It imports the framework lifecycle hooks, assigns them to
+ * the facade's `taro` object, and emits matching named exports; keeping the hook inventory owned by Taro avoids drift.
+ */
+export function injectTaroFrameworkApis(source) {
+    return apiLoader(source);
+}

package/dist/node/plugins/css/plugins.d.ts

@@ -1,6 +1,4 @@
 import type { PluginOption } from 'vite';
 import type { VitePluginTaroTarget } from '../../../options.ts';
-/** Completes the final compatibility pass required by generated WXSS. */
-export declare function adaptWxss(source: string): Promise<string>;
-/** Creates the target-aware Tailwind CSS plugins. */
+/** Creates the target-aware Tailwind pipeline. */
 export declare function createCssPlugins(target: VitePluginTaroTarget): PluginOption[];

package/dist/node/plugins/css/plugins.js

@@ -2,85 +2,118 @@ import path from 'node:path';
 import { createStyleHandler } from '@weapp-tailwindcss/postcss';
 import { WeappTailwindcss } from 'weapp-tailwindcss/vite';
 import { packageRequire } from '../../utils/packages.js';
-// Keep the Vite plugin and the compatibility finalizer on identical WX conversion settings. A difference here can
-// make the second pass preserve browser units or apply a transformation that the first pass did not expect.
+/*
+ * CSS output order for WX:
+ *
+ *   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. `alignWxGenerateBundleOrder` removes only that broader phase from upstream output hooks.
+ */
+// Tailwind belongs to VPT, not necessarily to the application. Resolving from VPT keeps strict package managers and
+// bundled development from looking for Tailwind in the application's node_modules.
 const tailwindcssBasedir = path.dirname(packageRequire.resolve('tailwindcss/package.json'));
+// Both upstream generation and VPT's final whole-file pass use one conversion policy. If these options diverge, the
+// second pass can preserve browser units or reinterpret syntax that the first pass generated.
 const wxStyleOptions = {
     cssCalc: false,
     autoprefixer: false,
     rem2rpx: true,
     px2rpx: true
 };
-const transformWxss = createStyleHandler(wxStyleOptions);
-/** Completes the final compatibility pass required by generated WXSS. */
-export async function adaptWxss(source) {
-    return (await transformWxss(source)).css;
-}
-/** Creates the target-aware Tailwind CSS plugins. */
+// The handler is immutable and reusable across builds; only each emitted asset's source is replaced.
+const transformWxStyle = createStyleHandler(wxStyleOptions);
+/** Creates the target-aware Tailwind pipeline. */
 export function createCssPlugins(target) {
     const wx = target === 'wx';
+    const tailwindPlugins = WeappTailwindcss({
+        // VPT is a custom Vite compiler. Using Taro's adapter would import Taro-specific CSS ownership rules.
+        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: wx,
+        platform: wx ? 'weapp' : 'web',
+        tailwindcssBasedir,
+        generator: {
+            target: wx ? 'weapp' : 'web'
+        },
+        cssOptions: {
+            ...wxStyleOptions,
+            // Browser output still needs vendor prefixes; WXSS does not support or need that browser pass.
+            autoprefixer: !wx
+        },
+        logLevel: 'warn'
+    }) ?? [];
     return [
-        ...(WeappTailwindcss({
-            appType: 'weapp-vite',
-            // WX must enable this for split Tailwind imports such as `tailwindcss/theme.css`. Otherwise Vite's
-            // PostCSS resolver tries to resolve those imports from the application and fails when Tailwind is owned
-            // by vpt. The web generator consumes the imports before that resolver runs, so H5 keeps the
-            // upstream default.
-            rewriteCssImports: wx,
-            // Tailwind is a plugin dependency, not an application dependency. Give weapp-tailwindcss the owning package
-            // directory explicitly so bundled development and strict package managers resolve split CSS imports equally.
-            tailwindcssBasedir,
-            generator: {
-                target: wx ? 'weapp' : 'web'
-                // webCompat: {
-                //     preset: 'legacy-web'
-                // }
-            },
-            cssOptions: {
-                ...wxStyleOptions,
-                autoprefixer: !wx
-            },
-            logLevel: 'warn'
-        }) ?? []),
-        wx ? createWxssCompatibilityFinalizer() : undefined
+        ...(wx ? tailwindPlugins.map(alignWxGenerateBundleOrder) : tailwindPlugins),
+        wx ? createWxStyleFinalizer() : undefined
     ];
 }
 /**
- * Completes WXSS adaptation that weapp-tailwindcss leaves pending after rewriting split Tailwind imports.
+ * Finalizes the one global stylesheet after upstream Tailwind generation.
  *
- * `rewriteCssImports: true` makes the early Vite transform generate the Tailwind CSS, but the non-web generator
- * also defers CSS adaptation. The generated asset is consequently browser-shaped
- * CSS containing values and syntax such as `rem`, escaped class selectors, and `@property`. It is then recorded as a
- * processed Vite asset, so the upstream output finalizer does not perform the missing complete WXSS adaptation.
- *
- * This plugin runs after the upstream finalizer, repeats only the compatibility transform, and restores the captured
- * global asset to WeChat's required `app.wxss` path. Exact path correlation leaves Page WXSS companions untouched.
- * Remove it when upstream both completes adaptation and preserves the bundler-selected filename.
+ * `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 gives it the root `app.wxss` identity required by
+ * WeChat. 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 createWxssCompatibilityFinalizer() {
+function createWxStyleFinalizer() {
     return {
-        name: 'vpt:wxss-compatibility-finalizer',
-        enforce: 'post',
+        name: 'vpt:wx-style-finalizer',
         generateBundle: {
             order: 'post',
             async handler(_, bundle) {
-                // With cssCodeSplit: false the global style is the only asset with a logical
-                // .css source name, even when an earlier hook already changed its final suffix.
-                const globalStyleAsset = Object.values(bundle).find((output) => output.type === 'asset' &&
-                    (output.fileName.replaceAll('\\', '/').endsWith('.css') ||
-                        output.names.some((name) => name.replaceAll('\\', '/').endsWith('.css'))));
-                if (!globalStyleAsset)
-                    return;
-                // Both finalizers use a post-ordered generateBundle hook. Array order places this hook after the
-                // upstream finalizer, where the single Vite global style asset has its final contents and filename.
-                const source = typeof globalStyleAsset.source === 'string'
-                    ? globalStyleAsset.source
-                    : new TextDecoder().decode(globalStyleAsset.source);
-                if (source.length > 0) {
-                    globalStyleAsset.source = await adaptWxss(source);
+                const styles = Object.values(bundle).filter(isStyleAsset);
+                // More than one compiler style means cssCodeSplit was re-enabled. Choosing one would silently lose CSS.
+                if (styles.length > 1) {
+                    throw new Error('WX builds require one global compiler-emitted stylesheet');
                 }
-                globalStyleAsset.fileName = 'app.wxss';
+                // CSS is optional; applications without styles do not need an empty app.wxss.
+                if (styles.length === 0)
+                    return;
+                const [style] = styles;
+                const source = typeof style.source === 'string' ? style.source : new TextDecoder().decode(style.source);
+                // generateBundle exposes the final asset as mutable so conversion and native placement remain atomic.
+                // Without the compatibility pass, browser-only selectors, escaped classes, rem and @property can reach
+                // WeChat. Without the rename, bundled development writes paths such as src/app.wxss, which WeChat does
+                // not load as the application's global stylesheet.
+                style.source = (await transformWxStyle(source)).css;
+                style.fileName = 'app.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. H5 descriptors remain untouched.
+ */
+function alignWxGenerateBundleOrder(pluginOption) {
+    // PluginOption permits nested arrays. Preserve their shape while adapting every concrete plugin recursively.
+    if (Array.isArray(pluginOption))
+        return pluginOption.map(alignWxGenerateBundleOrder);
+    if (!pluginOption ||
+        typeof pluginOption !== 'object' ||
+        !('enforce' in pluginOption) ||
+        pluginOption.enforce !== 'post' ||
+        !('generateBundle' in pluginOption) ||
+        pluginOption.generateBundle === undefined) {
+        return pluginOption;
+    }
+    // Clone rather than mutate: upstream may retain or reuse the descriptor returned by its factory.
+    return { ...pluginOption, 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/h5/create-stencil-client-adapter.d.ts

@@ -0,0 +1,24 @@
+import type { Plugin } from 'vite';
+/**
+ * Creates the compiler-owned adaptation of Stencil's client style insertion.
+ *
+ * Taro components inject their styles through this internal client. Its default insertion point places those styles
+ * after application CSS, allowing component defaults to override application rules. The adapter is registered in both
+ * Vite's application pipeline and the independent dependency-optimization build: removing either registration leaves
+ * production or development with an unadapted client. This explicit dual registration removes the former optimization
+ * exclusion while keeping one transformation implementation.
+ */
+export declare function createStencilClientAdapter(): Plugin;
+/** Applies the shared Stencil adaptation in either the application or dependency-optimization pipeline. */
+export declare function adaptStencilClient(code: string, id: string): Promise<{
+    code: string;
+    map: {
+        version: number;
+        sources: string[];
+        names: string[];
+        sourceRoot?: string | undefined;
+        sourcesContent?: string[] | undefined;
+        mappings: string;
+        file: string;
+    } | null | undefined;
+} | undefined>;

package/dist/node/plugins/h5/create-stencil-client-adapter.js

@@ -0,0 +1,80 @@
+import { transformAsync, types } from '@babel/core';
+import { normalizeModuleId } from '../../utils/modules.js';
+import { packageRequire } from '../../utils/packages.js';
+const stencilClientPath = packageRequire.resolve('@stencil/core/internal/client', {
+    paths: [packageRequire.resolve('@tarojs/components/package.json')]
+});
+const normalizedStencilClientPath = normalizeModuleId(stencilClientPath);
+/**
+ * Creates the compiler-owned adaptation of Stencil's client style insertion.
+ *
+ * Taro components inject their styles through this internal client. Its default insertion point places those styles
+ * after application CSS, allowing component defaults to override application rules. The adapter is registered in both
+ * Vite's application pipeline and the independent dependency-optimization build: removing either registration leaves
+ * production or development with an unadapted client. This explicit dual registration removes the former optimization
+ * exclusion while keeping one transformation implementation.
+ */
+export function createStencilClientAdapter() {
+    return {
+        name: 'vpt:h5-stencil-client',
+        transform: adaptStencilClient
+    };
+}
+/** Applies the shared Stencil adaptation in either the application or dependency-optimization pipeline. */
+export async function adaptStencilClient(code, id) {
+    if (normalizeModuleId(id) !== normalizedStencilClientPath) {
+        return;
+    }
+    const transformed = await transformAsync(code, {
+        babelrc: false,
+        configFile: false,
+        filename: stencilClientPath,
+        plugins: [rewriteStencilStyleInsertion],
+        sourceFileName: stencilClientPath,
+        sourceMaps: true
+    });
+    if (transformed?.code === undefined || transformed.code === null) {
+        throw new Error(`Failed to adapt Stencil client: ${stencilClientPath}`);
+    }
+    return {
+        code: transformed.code,
+        map: transformed.map
+    };
+}
+/** Keeps Stencil-injected Taro component styles before application stylesheets. */
+function rewriteStencilStyleInsertion() {
+    return {
+        name: 'vpt:rewrite-stencil-style-insertion',
+        visitor: {
+            CallExpression(callPath) {
+                if (!isStencilStyleInsertBeforeCall(callPath)) {
+                    return;
+                }
+                callPath
+                    .get('arguments.1')
+                    .replaceWith(types.conditionalExpression(types.callExpression(types.memberExpression(types.identifier('scopeId'), types.identifier('startsWith')), [types.stringLiteral('sc-taro-')]), createStyleQuery('style,link[rel="stylesheet"]'), createStyleQuery('link')));
+            }
+        }
+    };
+}
+/** Identifies Stencil's default component-style insertion call. */
+function isStencilStyleInsertBeforeCall(callPath) {
+    const { callee, arguments: callArguments } = callPath.node;
+    return (types.isMemberExpression(callee) &&
+        types.isIdentifier(callee.object, { name: 'styleContainerNode' }) &&
+        types.isIdentifier(callee.property, { name: 'insertBefore' }) &&
+        types.isIdentifier(callArguments[0], { name: 'styleElm' }) &&
+        isStyleQuery(callArguments[1], 'link'));
+}
+/** Identifies one style-container querySelector call. */
+function isStyleQuery(node, selector) {
+    return (types.isCallExpression(node) &&
+        types.isMemberExpression(node.callee) &&
+        types.isIdentifier(node.callee.object, { name: 'styleContainerNode' }) &&
+        types.isIdentifier(node.callee.property, { name: 'querySelector' }) &&
+        types.isStringLiteral(node.arguments[0], { value: selector }));
+}
+/** Creates one style-container querySelector call. */
+function createStyleQuery(selector) {
+    return types.callExpression(types.memberExpression(types.identifier('styleContainerNode'), types.identifier('querySelector')), [types.stringLiteral(selector)]);
+}

package/dist/node/plugins/h5/plugins.js

@@ -1,10 +1,10 @@
-import { types } from '@babel/core';
 import babel from '@rolldown/plugin-babel';
 import { esTarget } from '../../utils/constant.js';
 import { toViteFileImportPath } from '../../utils/modules.js';
 import { packageRequire } from '../../utils/packages.js';
 import { clientTaroApiId } from '../client/client-taro.js';
 import { h5AppPath } from './constant.js';
+import { createStencilClientAdapter } from './create-stencil-client-adapter.js';
 import { createModuleResolver } from './resolver/module-resolver.js';
 /** Creates the plugins that own the H5 target. */
 export function createH5TargetPlugins(options) {
@@ -21,12 +21,6 @@ function createH5TargetPlugin(options) {
                 resolve: {
                     mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'jsnext'],
                     alias: [
-                        {
-                            find: /^@stencil\/core\/internal\/client$/,
-                            replacement: packageRequire.resolve('@stencil/core/internal/client', {
-                                paths: [packageRequire.resolve('@tarojs/components/package.json')]
-                            })
-                        },
                         {
                             find: /^@tarojs\/components$/,
                             replacement: packageRequire.resolve('@tarojs/components/lib/react')
@@ -34,15 +28,19 @@ function createH5TargetPlugin(options) {
                         {
                             find: /^@tarojs\/components\/dist\/components$/,
                             replacement: packageRequire.resolve('@tarojs/components/dist/components')
-                        },
-                        {
-                            find: /^@tarojs\/taro$/,
-                            replacement: packageRequire.resolve('@tarojs/plugin-platform-h5/dist/runtime/apis')
                         }
                     ]
                 },
                 optimizeDeps: {
-                    exclude: ['@stencil/core/internal/client']
+                    // The compiler-owned H5 app and Taro facade are injected after Vite's initial HTML scan. Prebundle
+                    // the facade's platform backend as one boundary so its CommonJS implementation details receive
+                    // interop without duplicating their package list. ReactDOM needs the same treatment for the H5 app.
+                    include: ['@tarojs/plugin-platform-h5/dist/runtime/apis', 'react-dom/client'],
+                    // Dependency optimization is its own Rolldown build and does not run application transform plugins.
+                    // Register the same adapter there so optimized Taro components cannot embed Stencil's original client.
+                    rolldownOptions: {
+                        plugins: [createStencilClientAdapter()]
+                    }
                 },
                 build: {
                     target: esTarget
@@ -93,11 +91,7 @@ function createH5IndexHtmlTags() {
 /** Creates H5-only Babel transforms for Stencil CSS ordering and Taro API imports. */
 function createH5SupportPlugins() {
     return [
-        babel({
-            include: /[\\/]@stencil[\\/]core[\\/]internal[\\/]client[\\/]index\.js(?:\?.*)?$/,
-            exclude: [],
-            plugins: [rewriteStencilStyleInsertion]
-        }),
+        createStencilClientAdapter(),
         babel({
             plugins: [
                 [
@@ -111,43 +105,6 @@ function createH5SupportPlugins() {
         })
     ];
 }
-/** Keeps Stencil-injected Taro component styles before application stylesheets. */
-function rewriteStencilStyleInsertion() {
-    return {
-        name: 'vpt:rewrite-stencil-style-insertion',
-        visitor: {
-            CallExpression(callPath) {
-                if (!isStencilStyleInsertBeforeCall(callPath)) {
-                    return;
-                }
-                callPath
-                    .get('arguments.1')
-                    .replaceWith(types.conditionalExpression(types.callExpression(types.memberExpression(types.identifier('scopeId'), types.identifier('startsWith')), [types.stringLiteral('sc-taro-')]), createStyleQuery('style,link[rel="stylesheet"]'), createStyleQuery('link')));
-            }
-        }
-    };
-}
-/** Identifies Stencil's default component-style insertion call. */
-function isStencilStyleInsertBeforeCall(callPath) {
-    const { callee, arguments: callArguments } = callPath.node;
-    return (types.isMemberExpression(callee) &&
-        types.isIdentifier(callee.object, { name: 'styleContainerNode' }) &&
-        types.isIdentifier(callee.property, { name: 'insertBefore' }) &&
-        types.isIdentifier(callArguments[0], { name: 'styleElm' }) &&
-        isStyleQuery(callArguments[1], 'link'));
-}
-/** Identifies one style-container querySelector call. */
-function isStyleQuery(node, selector) {
-    return (types.isCallExpression(node) &&
-        types.isMemberExpression(node.callee) &&
-        types.isIdentifier(node.callee.object, { name: 'styleContainerNode' }) &&
-        types.isIdentifier(node.callee.property, { name: 'querySelector' }) &&
-        types.isStringLiteral(node.arguments[0], { value: selector }));
-}
-/** Creates one style-container querySelector call. */
-function createStyleQuery(selector) {
-    return types.callExpression(types.memberExpression(types.identifier('styleContainerNode'), types.identifier('querySelector')), [types.stringLiteral(selector)]);
-}
 /** Creates H5 Taro compile-time constants. */
 function createH5Defines() {
     return {

package/dist/node/plugins/wx/dev/dev-host.js

@@ -9,7 +9,6 @@ import { createWxDevMode } from './create-wx-dev-mode.js';
 import { emptyOutputDirectory } from './empty-output-directory.js';
 import { hmrControlPath, hmrInfoFileName, hmrPatchesFileName, renderHmrInfo, renderInitialHmrPatches, writeHmrFile } from './hmr-files.js';
 import { PatchPublisher } from './patch-publisher.js';
-import { publishWxDevStyle } from './publish-wx-dev-style.js';
 /**
  * Creates the wx dev host: the adapter that owns the physical Rolldown DevEngine (created
  * with dev(...)) and the patch publisher, and replaces Vite's bundledDev.listen so the
@@ -118,7 +117,6 @@ export async function createWxDevHost({ server, options }) {
             throw new Error('wx development requires exactly one Rolldown output.');
         }
         return dev(rolldownOptions, rolldownOptions.output, {
-            onAdditionalAssets: (output) => publishWxDevStyle(output, server.config.build.outDir),
             onHmrUpdates: async (result) => {
                 if (result instanceof Error) {
                     logWxError(server.config.logger, 'wx HMR update failed', result);
@@ -151,7 +149,6 @@ export async function createWxDevHost({ server, options }) {
                     logWxError(server.config.logger, 'wx dev build failed', result);
                     return;
                 }
-                await publishWxDevStyle(result, server.config.build.outDir);
                 // A fresh build identity per complete physical build; the App runtime reads it
                 // from hmr/info.js before any module registers.
                 await startFreshBuild();

package/dist/node/plugins/wx/placement/placer.js

@@ -98,8 +98,7 @@ export function createPlacer() {
                     // into every physical chunk filename; content identity alone is sufficient beneath that root.
                     return `${location.root}/assets/[hash].js`;
                 },
-                // Keep generic assets independent of stylesheet conventions. The CSS adapter sees Tailwind's final
-                // mutation and owns the exact global `app.wxss` identity without confusing native Page companions.
+                // Keep generic assets independent of native output identities assigned after bundling.
                 assetFileNames: 'assets/[name]-[hash][extname]'
             },
             // Rolldown rejects strict entry signatures when code-splitting groups disable recursive dependency capture.