Skip to content

feat: 完善 Tailwind v4 多平台 custom variant 与小程序状态伪类兼容 - #1052

Merged
sonofmagic merged 14 commits into
mainfrom
codex/platform-condition-variant
Aug 6, 2026
Merged

feat: 完善 Tailwind v4 多平台 custom variant 与小程序状态伪类兼容#1052
sonofmagic merged 14 commits into
mainfrom
codex/platform-condition-variant

Conversation

@sonofmagic

@sonofmagic sonofmagic commented Aug 6, 2026

Copy link
Copy Markdown
Owner

变更说明

本次改动让 Tailwind CSS v4 继续作为唯一的样式生成源,并在 weapp-tailwindcss 既有编译链中按目标平台处理 variant 输出,没有引入额外的 Tailwind 官方生成插件或独立 PostCSS 插件。

  • 小程序目标默认移除缺少有效运行时语义的状态伪类,H5 与 App WebView 保持 Tailwind 原始输出
  • 覆盖 :hover:active:focus:focus-visible:focus-within:visited:target、表单状态以及 :open / :modal / :fullscreen 等浏览器状态
  • 保留 firstlastnth-* 等结构伪类,以及 Tailwind selector 转换依赖的 :is:where:not
  • 仅过滤目标端 CSS selector,不删除 Tailwind candidates 与 classSet,模板、JS 和安全类名转换仍保持完整
  • :active:focus 可分别通过 cssOptions.cssRemoveActivePseudoClass: falsecssOptions.cssRemoveFocusPseudoClass: false 显式恢复

@source not inline("active:*") 会在 Tailwind candidate 生成阶段全局排除类名,无法让同一份 uni-app 源码在小程序端删除、H5 端保留,因此本次实现选择在平台目标明确后处理 selector,并与 Tailwind v4 的编译结果和 AST 边界对齐。

Tailwind CSS v4 @custom-variant

  • 支持 Tailwind v4 官方长写、简写及嵌套 @media 语法
  • 支持任意用户自定义 variant 名称,不绑定 activefocus 等内置名称
  • 支持 uni-app 条件注释放在 @custom-variant 内部,或包裹整个定义,两种写法获得等价的平台输出
  • 支持 #ifdef#ifndef、平台别名以及多个 variant 共用条件块
  • 覆盖 H5、mp-weixin、mp-alipay、mp-toutiao 等多平台结果
  • 修复 Tailwind 官方示例形态 &:where([data-theme] *) 在小程序 selector fallback 阶段被误删的问题
@custom-variant web-focus {
  &:focus {
    /* #ifndef MP */
    @slot;
    /* #endif */
  }
}

/* #ifndef MP */
@custom-variant web-active {
  &:active {
    @slot;
  }
}
/* #endif */

依赖与文档

  • 将仓库使用的 weapp-vitewevu 升级至 6.19.1
  • 更新 API 文档、Tailwind v4 教程、跨平台 @custom-variant 示例和小程序伪类兼容说明
  • 新增中文 Changeset,覆盖 @weapp-tailwindcss/postcssweapp-tailwindcss 以及依赖升级
  • 同步 E2E static、generator mode 与跨框架 CSS 产物快照

测试覆盖

  • @weapp-tailwindcss/postcss:665 passed,3 skipped
  • weapp-tailwindcss:3150 passed,29 skipped
  • 两个核心包 build:通过
  • Tailwind v4 官方与任意 @custom-variant 形态、内外层平台条件、H5/多小程序输出:通过
  • E2E static shard 1/3:94 passed,3 skipped
  • E2E static shard 2/3:61 passed,5 skipped
  • generator mode:10 passed
  • 文档、ESLint、Changeset status 与 git diff --check:通过

行为边界

插件负责生成并转换目标端 CSS,但不会模拟浏览器交互状态。小程序需要按压或聚焦反馈时,应使用 hover-class、组件属性、事件或数据绑定 class;H5 继续使用 Tailwind 原生伪类。

@changeset-bot

changeset-bot Bot commented Aug 6, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ef3d0e1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
weapp-tailwindcss Patch
@weapp-tailwindcss/postcss Patch
@weapp-tailwindcss/build-all Patch
@weapp-tailwindcss/website Patch
@weapp-tailwindcss/experimental Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@sonofmagic
sonofmagic force-pushed the codex/platform-condition-variant branch from 5ee6406 to c19e9d2 Compare August 6, 2026 06:16
@sonofmagic sonofmagic changed the title fix: 支持按平台覆盖 active 变体 fix: 小程序默认移除无效的 active 选择器 Aug 6, 2026
@sonofmagic sonofmagic changed the title fix: 小程序默认移除无效的 active 选择器 feat: 完善 Tailwind v4 多平台 variant 与小程序伪类兼容 Aug 6, 2026
@sonofmagic sonofmagic changed the title feat: 完善 Tailwind v4 多平台 variant 与小程序伪类兼容 feat: 完善 Tailwind v4 多平台 custom variant 与小程序状态伪类兼容 Aug 6, 2026
@sonofmagic
sonofmagic merged commit 1dcb3b3 into main Aug 6, 2026
96 checks passed
@sonofmagic sonofmagic mentioned this pull request Aug 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant