mcpField
W
weapp-tailwindcss-custom-build

weapp-tailwindcss-custom-build

github.com/sonofmagic开发2106 次安装3 天前更新
代码仓库

关于 weapp-tailwindcss-custom-build

weapp-tailwindcss-custom-build 是一项技能,用于将 weapp-tailwindcss 核心转换接入自定义构建系统。它指导开发者保留模块图、watch 生命周期、生成产物和 source map 的所有权,并让各类转换共享编译器快照。

主要功能

  1. 01判断使用官方适配器还是自定义集成
  2. 02使用编译器会话和不可变快照
  3. 03协调 CSS、模板与 JavaScript 转换
  4. 04处理 watch 失效和可达 root
  5. 05通过 bundler API 写入产物与 source map
  6. 06明确生命周期及回归测试要求

适用场景

  1. 01接入第三方构建框架
  2. 02为转换文件实现 watch 模式重建
  3. 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.yaml
references/
core-api.md
style-injection.md

详细介绍

来自项目 README

weapp-tailwindcss custom build

围绕构建图和内存产物接入核心转换,避免用输出目录扫描补偿生命周期设计缺失。

工作流

  1. 先判断官方 Vite/Webpack/Rspack/Gulp 入口是否已满足需求;普通项目转到 $weapp-tailwindcss-setup。
  2. 确认调用方拥有的生命周期、模块图、CSS 生成结果、asset API、watch 事件和 source map 能力。
  3. 读取 references/core-api.md 设计 createCompiler() 的 root、snapshot、失效和转换时序;仅在兼容旧自动 runtime 流程时使用 createContext()。
  4. 涉及全局/分包样式注入时再读取 references/style-injection.md。
  5. 在 load、transform、loader result、compilation、bundle asset 或 stream/Vinyl 对象中维护源码和产物关系。
  6. watch 中把精确 dependency/module ID 交给 invalidate(),只重新生成返回的 root,再用新 snapshot 转换实际可达的模板和 JavaScript。
  7. 让初始扫描、transform 与 HMR 共用 Scanner 的文件范围和显式外部 source,不另建宽泛 glob。
  8. 通过 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