@weapp-tailwindcss/lynx 0.3.19 → 0.4.0

package/README.md

@@ -13,11 +13,12 @@ pnpm add @weapp-tailwindcss/lynx tailwindcss
 ## Configure
 
 ```ts
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
 import { defineConfig } from '@lynx-js/rspeedy'
 import { pluginLynxTailwindcss } from '@weapp-tailwindcss/lynx'
 
 export default defineConfig({
-  plugins: [pluginLynxTailwindcss()],
+  plugins: [pluginReactLynx(), pluginLynxTailwindcss()],
 })
 ```
 
@@ -34,6 +35,10 @@ Import Tailwind CSS 4 from the application CSS entry and point `@source` at the
 
 `pluginLynxTailwindcss` fixes `platform` to `'lynx'`, sets `generator.target` to `'web'`, and enables Lynx-compatible output. Tailwind CSS 4 theme variables are resolved at build time, while application-defined dynamic variables remain unchanged.
 
+Recursive variables require Lynx runtime 3.6 or later and the exposed template API from ReactLynx plugin 0.12.4 or later. Older builders must be upgraded; native behavior is currently tested on the pinned 4.0.1 matrix.
+
+Before template encoding, the plugin defaults `enableCSSInlineVariables` to `true` through the ReactLynx builder’s exposed template hooks. This selects native recursive variable resolution for nested Tailwind utility variables while preserving explicit page configuration and dynamic CSS dependencies. Register `pluginReactLynx()` alongside this plugin; a missing template API is a build error. This does not change the target SDK or guarantee native support for each CSS property.
+
 See the [ReactLynx / Rspeedy configuration reference](https://tw.weapp.dev/docs/config/react-lynx) for the `generator`, `rspack`, CSS loader, and encoder options.
 
 The current integration supports ReactLynx + Rspeedy and Tailwind CSS 4. It does not cover Rspeedy Web output, non-React Lynx frameworks, or React Native-style runtime style mapping.

package/README.zh-CN.md

@@ -14,11 +14,12 @@ pnpm add @weapp-tailwindcss/lynx tailwindcss
 
 ```ts
 // lynx.config.ts
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
 import { defineConfig } from '@lynx-js/rspeedy'
 import { pluginLynxTailwindcss } from '@weapp-tailwindcss/lynx'
 
 export default defineConfig({
-  plugins: [pluginLynxTailwindcss()],
+  plugins: [pluginReactLynx(), pluginLynxTailwindcss()],
 })
 ```
 
@@ -35,6 +36,10 @@ export default defineConfig({
 
 `pluginLynxTailwindcss` 固定使用 `platform: 'lynx'`、`generator.target: 'web'` 与 Lynx 原生兼容输出。Tailwind v4 theme 变量会在构建期静态化，确保 `bg-sky-500`、`p-6`、`text-lg` 等标准 utility 能进入 Lynx 原生样式表；应用自行定义的动态 CSS 变量保持不变。
 
+递归变量路径要求 Lynx runtime 3.6 以上，以及 ReactLynx 插件 0.12.4 以上公开的模板 API；更旧的构建器需要升级。源码支持边界不等于设备验收，当前原生测试仍使用固定 4.0.1 矩阵。
+
+插件在模板编码前，通过 ReactLynx 构建器公开的 hook 将未配置的 `enableCSSInlineVariables` 默认设为 `true`，使嵌套 utility 变量进入原生递归解析路径；保留显式页面配置与动态 CSS 依赖。需要同时注册 `pluginReactLynx()`，缺少模板 API 时明确构建失败。此设置不改变目标 SDK，也不代表所有 CSS 属性已通过原生验收。
+
 完整的 `generator`、`rspack`、CSS loader 和 encoder 配置项见 [ReactLynx / Rspeedy 配置参考](https://tw.weapp.dev/zh-cn/docs/config/react-lynx)。
 
 当前集成支持 ReactLynx + Rspeedy 与 Tailwind CSS v4；不覆盖 Rspeedy Web 输出、非 React Lynx 框架或 React Native 风格的运行时样式映射。

package/dist/index.cjs

@@ -1,5 +1,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let weapp_tailwindcss_rspack = require("weapp-tailwindcss/rspack");
+//#region src/css-variables.ts
+/** 通过模板编码生命周期启用原生递归变量解析，保留显式配置及动态依赖。 */
+var LynxCssVariablesPlugin = class {
+	templatePlugin;
+	constructor(templatePlugin) {
+		this.templatePlugin = templatePlugin;
+	}
+	apply(compiler) {
+		const name = "weapp-tailwindcss:lynx-css-variables";
+		compiler.hooks.thisCompilation.tap(name, (compilation) => {
+			this.templatePlugin.getLynxTemplatePluginHooks(compilation).beforeEncode.tap(name, (args) => {
+				const config = args.encodeData.sourceContent.config;
+				if (config.enableCSSInlineVariables === void 0) config.enableCSSInlineVariables = true;
+				return args;
+			});
+		});
+	}
+};
+//#endregion
 //#region src/index.ts
 const PLUGIN_NAME = "weapp-tailwindcss:lynx";
 function normalizeOptions(options) {
@@ -54,7 +73,10 @@ function pluginLynxTailwindcss(options = {}) {
 		setup(api) {
 			const rsbuildApi = api;
 			rsbuildApi.modifyBundlerChain((chain) => {
+				const templatePlugin = rsbuildApi.useExposed?.(Symbol.for("LynxTemplatePlugin"))?.LynxTemplatePlugin;
+				if (!templatePlugin?.getLynxTemplatePluginHooks) throw new Error("Lynx 模板编码 hook 不可用；请注册或升级 ReactLynx 构建插件（至少 0.12.4），确认其提供 LynxTemplatePlugin API。");
 				chain.plugin(PLUGIN_NAME).use(weapp_tailwindcss_rspack.WeappTailwindcss, [normalizedOptions]);
+				chain.plugin(`${PLUGIN_NAME}:css-variables`).use(LynxCssVariablesPlugin, [templatePlugin]);
 				return chain;
 			});
 			rsbuildApi.modifyRspackConfig((config) => (0, weapp_tailwindcss_rspack.patchRspackConfig)(config, normalizeRspackOptions(options.rspack)));

package/dist/index.js

@@ -1,4 +1,23 @@
 import { WeappTailwindcss, patchRspackConfig } from "weapp-tailwindcss/rspack";
+//#region src/css-variables.ts
+/** 通过模板编码生命周期启用原生递归变量解析，保留显式配置及动态依赖。 */
+var LynxCssVariablesPlugin = class {
+	templatePlugin;
+	constructor(templatePlugin) {
+		this.templatePlugin = templatePlugin;
+	}
+	apply(compiler) {
+		const name = "weapp-tailwindcss:lynx-css-variables";
+		compiler.hooks.thisCompilation.tap(name, (compilation) => {
+			this.templatePlugin.getLynxTemplatePluginHooks(compilation).beforeEncode.tap(name, (args) => {
+				const config = args.encodeData.sourceContent.config;
+				if (config.enableCSSInlineVariables === void 0) config.enableCSSInlineVariables = true;
+				return args;
+			});
+		});
+	}
+};
+//#endregion
 //#region src/index.ts
 const PLUGIN_NAME = "weapp-tailwindcss:lynx";
 function normalizeOptions(options) {
@@ -53,7 +72,10 @@ function pluginLynxTailwindcss(options = {}) {
 		setup(api) {
 			const rsbuildApi = api;
 			rsbuildApi.modifyBundlerChain((chain) => {
+				const templatePlugin = rsbuildApi.useExposed?.(Symbol.for("LynxTemplatePlugin"))?.LynxTemplatePlugin;
+				if (!templatePlugin?.getLynxTemplatePluginHooks) throw new Error("Lynx 模板编码 hook 不可用；请注册或升级 ReactLynx 构建插件（至少 0.12.4），确认其提供 LynxTemplatePlugin API。");
 				chain.plugin(PLUGIN_NAME).use(WeappTailwindcss, [normalizedOptions]);
+				chain.plugin(`${PLUGIN_NAME}:css-variables`).use(LynxCssVariablesPlugin, [templatePlugin]);
 				return chain;
 			});
 			rsbuildApi.modifyRspackConfig((config) => patchRspackConfig(config, normalizeRspackOptions(options.rspack)));

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@weapp-tailwindcss/lynx",
   "type": "module",
-  "version": "0.3.19",
+  "version": "0.4.0",
   "description": "Tailwind CSS integration for ReactLynx and Rspeedy cross-platform builds. 面向 ReactLynx 与 Rspeedy 跨端构建的 Tailwind CSS 集成。",
   "license": "MIT",
   "homepage": "https://tw.weapp.dev/docs/quick-start/frameworks/lynx",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sonofmagic/weapp-tailwindcss.git",
+    "url": "git+https://github.com/weapp-tailwindcss/weapp-tailwindcss.git",
     "directory": "packages/lynx"
   },
   "sideEffects": false,
@@ -44,12 +44,12 @@
     }
   },
   "dependencies": {
-    "weapp-tailwindcss": "5.5.10"
+    "weapp-tailwindcss": "5.5.12"
   },
   "devDependencies": {
     "@lynx-js/rspeedy": "^0.18.0",
     "tailwindcss": "^4.3.3",
-    "vitest": "~5.0.1"
+    "vitest": "~5.0.3"
   },
   "scripts": {
     "build": "tsdown",