用途:把工作区的样式从 styled-components(Studio 旧版样式库)迁移到 vanilla-extract,属于重构而非重新设计,目标是保持视觉输出完全一致。
主要能力:提供可重复的迁移步骤。先清点用法(rg "styled-components" <workspace>/src),按静态 styled、主题读取、prop 变体、keyframes、后代选择器、createGlobalStyle、*.styles.tsx、内联 style 分类并给出对应迁移目标。改写时按三种形态处理:保留组件层(style() 加薄包装,用 ComponentProps 定型,className 用 clsx 合并而非覆盖);扁平化单次使用的包装;动态值通过 createVar() 与 assignInlineVars() 桥接,主题用 useTheme_v2() 读取。随后在 tsdown.config.ts 去掉 styledComponents: true、加 vanillaExtract: true;package.json 增加 @sanity/vanilla-extract-vite-plugin 与 @vanilla-extract/css 开发依赖(用到 assignInlineVars 时加 @vanilla-extract/dynamic 运行时依赖),移除 styled-components peer 与 babel 插件;vitest.config.ts 注册 vanillaExtractPlugin()。
使用方式:依次执行 pnpm install、pnpm build --filter=<workspace-name>、pnpm test -u --project <workspace-name>,再跑 pnpm format / lint / knip / build / test run,并人工比对迁移前渲染。最后添加 patch changeset。
限制:样式模式细节需参考 sanity-plugin-best-practices 的 styling reference;monorepo 策略见 AGENTS.md。移除 styled-components 开发依赖后需核对 pnpm-lock.yaml 中 sanity 与 @sanity/ui 解析是否与其他工作区一致,若分叉则保留 catalog 依赖。jsdom 下可选用 @vanilla-extract/css/disableRuntimeStyles,仅按工作区启用。具体收费、平台等信息暂未提供。