Skip to content

v0.7.0 — AST safety net

Choose a tag to compare

@Rosalina7515 Rosalina7515 released this 18 May 13:33
· 5 commits to main since this release

What's new

Added

  • AST-based class-string extraction. New scripts/ast-extract.mjs lists every Tailwind class string in a JSX / TSX / Vue / Svelte file with line+column, kind, and an editable flag — so the modernizer can edit
    only strings the AST has confirmed as static class containers.
    • JSX / TSX uses @babel/parser + @babel/traverse. Handles className="...", className={"..."}, template-literal quasis, cn() / clsx() / classNames() / twMerge() / twJoin() / cva() arguments,
      conditional expressions, object property keys.
    • Vue uses a tightened template-only scanner (script/style blocks masked). class="..." and string literals inside :class="[...]" / :class="{...}" are extracted. Full Vue AST is a v0.8 stretch goal.
    • Svelte uses a markup-only scanner. class="..." editable; class:foo={bool} directives flagged editable: false.
    • Graceful degradation: if @babel/parser isn't installed, the script exits with parser-missing and the modernizer falls back to v0.6-style regex.
  • New CLI test mode: node scripts/ast-extract.mjs <file> --pretty.
  • New reference: references/ast-safety.md.
  • Hero screenshot in README (the side-by-side before/after image).

Changed

  • SKILL.md Step 5 — recommends running ast-extract to identify safe strings, then editing only editable: true entries.

Not changed

  • v0.6 visual regression flow — independent, still runs.
  • The Skill's hard rule "never touch business logic" — v0.7 just makes it mechanically verifiable for JSX/TSX.

新增

  • 基于 AST 的 class 字符串提取。新增 scripts/ast-extract.mjs,列出 JSX / TSX / Vue / Svelte 文件里每一个 Tailwind class 字符串,带行号、列号、kind 和 editable 标志 —— 现代化时只编辑那些"已被 AST 确认为静态 class
    容器"的字符串。
    • JSX / TSX 使用 @babel/parser + @babel/traverse。覆盖 className="..."className={"..."}、模板字符串 quasi、cn() / clsx() / classNames() / twMerge() / twJoin() / cva()
      参数、条件表达式、对象属性 key。
    • Vue 用收紧后的"仅 template 块"扫描器(script / style 块被屏蔽)。class="...":class 里的字符串字面量都被提取。完整 Vue AST 是 v0.8 的延伸目标。
    • Svelte 用"仅 markup"扫描器。class="..." 可编辑;class:foo={bool} 指令标为 editable: false
    • 优雅降级:@babel/parser 没装时退出 parser-missing,流程回退到 v0.6 的正则。
  • 新增 CLI 测试模式:node scripts/ast-extract.mjs <file> --pretty
  • 新增参考文档:references/ast-safety.md
  • README hero 截图(前后对比并排图)。

改动

  • SKILL.md Step 5 —— 推荐先跑 ast-extract 识别安全字符串,然后只编辑 editable: true 的条目。

未改动

  • v0.6 视觉回归流程 —— 独立,继续运行。
  • Skill 的硬性规则"不动业务逻辑" —— v0.7 只是让它在 JSX/TSX 上变得可机械验证