关于 weapp-tailwindcss-custom-build
weapp-tailwindcss-custom-build 是一项技能,用于将 weapp-tailwindcss 核心转换接入自定义构建系统。它指导开发者保留模块图、watch 生命周期、生成产物和 source map 的所有权,并让各类转换共享编译器快照。
主要功能
- 01判断使用官方适配器还是自定义集成
- 02使用编译器会话和不可变快照
- 03协调 CSS、模板与 JavaScript 转换
- 04处理 watch 失效和可达 root
- 05通过 bundler API 写入产物与 source map
- 06明确生命周期及回归测试要求
适用场景
- 01接入第三方构建框架
- 02为转换文件实现 watch 模式重建
- 03写入生成产物时保留 source map
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ sonofmagic/ skills --skill weapp-tailwindcss-custom-build安装后在 Claude Code 中输入/weapp-tailwindcss-custom-build确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/core-api.mdstyle-injection.md详细介绍
来自项目 READMEweapp-tailwindcss custom build
围绕构建图和内存产物接入核心转换,避免用输出目录扫描补偿生命周期设计缺失。
工作流
- 先判断官方 Vite/Webpack/Rspack/Gulp 入口是否已满足需求;普通项目转到
$weapp-tailwindcss-setup。 - 确认调用方拥有的生命周期、模块图、CSS 生成结果、asset API、watch 事件和 source map 能力。
- 读取 references/core-api.md 设计
createCompiler()的 root、snapshot、失效和转换时序;仅在兼容旧自动 runtime 流程时使用createContext()。 - 涉及全局/分包样式注入时再读取 references/style-injection.md。
- 在
load、transform、loader result、compilation、bundle asset 或 stream/Vinyl 对象中维护源码和产物关系。 - watch 中把精确 dependency/module ID 交给
invalidate(),只重新生成返回的 root,再用新 snapshot 转换实际可达的模板和 JavaScript。 - 让初始扫描、transform 与 HMR 共用 Scanner 的文件范围和显式外部 source,不另建宽泛 glob。
- 通过 bundler API 写回产物和 source map,不直接修改输出目录。
官方 Vite、Webpack、Rspack 与 Gulp 适配器的 graph 路径已经共享 compiler session:每个插件 owner 只创建一个 compiler,按 scope 投影可达 root 的 snapshot。第三方框架可以复用同样的时序,但必须继续拥有自己的模块图、watch 调度和 asset/Vinyl 写回;不要把 bundler 对象传入 core,也不要把 module ID 当作文件系统路径。
不可破坏的边界
createCompiler()管理 Tailwind root 会话、revision 和不可变 snapshot;它不接管模块图可达性、watch 调度或产物写回。- 同一构建周期复用 compiler,并让 CSS、模板和 JS 显式消费同一 snapshot。
createContext()继续兼容自动 runtime 收集模式,不要把两种状态模型混在同一事务中。transformWxss()、transformWxml()、transformJs()返回类型不同,必须分别处理错误和 map。- snapshot classSet 来自 Tailwind 生成/验证结果,不把扫描到的所有字符串直接塞入集合。
- module ID 是 opaque 值;
invalidate()不会替调用方规范化 POSIX、Windows、virtual ID 或 query。 - 入口发现若确需文件系统扫描,集中在明确扫描层并测试;不要在
generateBundle等后置阶段临时读源码。 - Rspack rule condition 解析必须覆盖函数与组合条件,补丁保持幂等并仅作用于目标 CSS rule。
输出要求
输出生命周期图、数据所有权、API 调用时序、错误/缓存策略、产物写回方式和 watch 回归场景。
评论
支持 Markdown