前端构建工具开发工具【免费下载链接】panda Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️项目地址https://gitcode.com/gh_mirrors/pa/panda点击查看免费下载pandacss/types是 Panda CSS 全链路类型定义的中枢包它集中定义了Config、Preset、UserConfig以及贯穿各包的类型面package.json 与 src/index.ts。本文以 CHANGELOG.md 为主线梳理从 2.0.0-beta 系列到 2.1.2 的类型与 API 变更并对照 packages/types/src 下的源码讲解firstThatWorks()、keyframes()、positionTry()、viewTransition()等新工厂函数背后的类型契约以及defineParts移除、Qwik JSX 支持移除等破坏性变更的迁移路径帮助你在升级或维护类型系统时有的放矢。版本脉络概览版本类型要点2.0.0Major编译器切换为基于 Oxc 的 Rust 引擎ESM-only需 Node 222.0.0-beta.20Major移除 Qwik JSX 支持jsxFramework: qwik2.0.0-beta.17Major / Minor移除defineParts与Parts/Part类型新增firstThatWorks()2.0.0-beta.16Major / Minor移除syntax配置与 template-literal 写法新增keyframes()工厂2.0.0-beta.15Minor / Patch新增optimize.propertyFallback、theme.viewTransitions、utility 级globalVars与 mask 系列工具2.0.0-beta.10~14Minor级联层 polyfill、treeshakeDesignSystem、viewTransition()、cssgen:done回调2.0.0-beta.1Patch修复preset:resolved钩子缺少utils参数的问题2.1.xPatch无实质变更整体脉络清晰类型包从定义静态类型面逐渐演进为同时承载新工厂函数firstThatWorks / keyframes / positionTry / viewTransition的类型签名、CSS 变量property注册的类型定义以及optimize选项的类型描述。Panda 2.0 核心变更类型系统如何支撑 Rust 引擎2.0.0 的 Major Changes 宣布Panda 2.0 用基于 Oxc 的 Rust 引擎替换原编译器。用户仍然书写同样的css()、recipes、patterns、tokens 与 JSX props —— 也就是说类型层保持不变变化的只是底层实现。CHANGELOG 列出的改进包括每个文件一次解析、跨文件值解析、原生 CSS 输出构建中不再需要ts-morph或 PostCSS提取速度提升 15–37×watch 模式约 360×staticCss约 85×生成的类型更轻TypeScript 类型实例化数量减少约 99%运行时css()与 recipes 会记忆化重复样式最多快约 4×pandacss/compiler-wasm让同一引擎在浏览器中运行并产出相同 CSSpandacss/vite、pandacss/webpack、pandacss/rollup、pandacss/bun打包器插件可把 Panda 跑在构建内开启transform: true后打包器会把静态的css()、recipe、pattern 与styled()调用重写为类名字符串样式运行时从 bundle 中消失通过optimize选择移除未使用的 tokens 与 keyframes、只输出用到的复合变体并支持对设计系统做 tree-shaking。这些能力大多被类型化为 config.ts 中的OptimizeOptions、CssgenOptions、CodegenOptions等接口。以OptimizeOptions为例config.ts它包含removeUnusedTokens、removeUnusedKeyframes、smartCompoundVariants、treeshakeDesignSystem与propertyFallback五个可选项全部默认关闭需要显式开启。类型包还对外声明了新的约束条件Panda 2.0 是 ESM-only需要 Node 22 或更新版本。这一点同样写进了 package.json 的engines: { node: 22 }。要迁移既有项目官方提供 upgrade guide完整背景可阅读 announcement post。类型包的sideEffects: falsepackage.json保证了其可以安全地被 tree-shaking。破坏性变更一Qwik JSX 支持移除2.0.0-beta.20 移除了 Qwik JSX 支持jsxFramework: qwik不再生成styled、Box或 pattern 组件迁移方式移除jsxFramework配置改用css()、cva()与 pattern 函数在class属性上书写样式。当前类型包中JsxFramework联合类型config.ts只保留react | solid | preact | vue四个成员声明允许string {}以便扩展印证了 Qwik 已从官方支持列表移除。配套的JsxOptionsconfig.ts仍提供jsxFactory默认styled与jsxStylePropsall | minimal | none默认all两个开关控制生成组件的样式 prop 类型宽度。破坏性变更二defineParts 移除与 slot recipe 的替代方案2.0.0-beta.17 移除了defineParts以及Parts/Part类型。官方建议两种替代直接在 recipe 中书写 part 选择器使用defineSlotRecipe为每个 part 生成一个类。如果仍需要defineParts辅助函数官方给出了一个可自行保留在配置中的最小实现const defineParts T extends Recordstring, { selector: string }(parts: T) (config: PartialRecordkeyof T, SystemStyleObject): SystemStyleObject Object.fromEntries(Object.entries(config).map(([key, value]) [parts[key].selector, value]))对照当前源码slot recipe 的类型面已在 recipe.ts 中完整成型SlotRecipeDefinition含slots、base、variants、defaultVariants、compoundVariants、SlotRecipeVariantFn接收RecipeSelection返回SlotRecordS, string、SlotRecipeRuntimeFn附加raw、variantKeys、splitVariantProps、getVariantProps等运行时方法以及SlotRecipeConfig。这正是一个 part 一个类方案的底层类型支撑。新增一firstThatWorks() 有序值回退2.0.0-beta.17 引入firstThatWorks()用于有序 CSS 值回退一个属性可以同时携带现代值与受支持值浏览器按顺序取第一个能生效的import { css, firstThatWorks } from styled-system/css css({ color: firstThatWorks(oklch(55% 0.18 250), #0057b8) })生成的 CSS 会同时输出两个值回退在前、现代值在后.c_firstThatWorks\(oklch\(55\%_0\.18_250\)\,_\#0057b8\) { color: #0057b8; color: oklch(55% 0.18 250); }使用要点想要的值写在第一位思路同 StyleX成员类型由所在属性决定因此编辑器自动补全可用strictTokens依然生效在配置 recipes 中可从pandacss/dev导入firstThatWorks或直接书写firstThatWorks(a, b)值形式。新增二keyframes() 局部动画工厂2.0.0-beta.16 新增keyframes()工厂用于组件局部内联动画。keyframes({ from: {...}, to: {...} })返回一个kf_…动画名并在构建时按需产出对应keyframes块 —— 仅当通过animationName或animation简写被实际引用时才会被 tree-shaken 进输出。其类型签名system-types.ts为(keyframe: CssKeyframes[string]) string只接受对象形式裸写animationName: spin已可解析theme.keyframes条目因此没有命名形式。共享的、属于设计系统的动画仍应放在theme.keyframestheme.ts。新增三positionTry() 锚点定位回退2.0.0-beta.16 同时新增positionTry()工厂与theme.positionTry键用于命名 CSS anchor-positioning 回退并移除了globalPositionTry。positionTry(bottom)或positionTry({ top: anchor(bottom) })会返回供positionTryFallbacks使用的 dashed-ident并在构建时按需产出position-try块。迁移方式把globalPositionTry条目移到theme.positionTry通过工厂引用需要无条件产出且名字手写的块应放入普通.css文件。类型层对应为 system-types.ts 的PositionTryRecordstring, SystemStyleObject与PositionTryFn以及 theme.ts 的theme.positionTry字段。新增四viewTransition() 与 theme.viewTransitionsView Transitions 支持分两步落地2.0.0-beta.10Minor新增viewTransition()。传入 slot 样式得到稳定的vt_*bag 类Panda 产出对应的::view-transition-*规则从styled-system/css导入import { viewTransition } from styled-system/css const slide viewTransition({ group: { animationDuration: 0.4s }, old: { opacity: 0 }, new: { opacity: 1 }, })在不同框架中使用// React / Next import { ViewTransition } from react ;ViewTransition namehero share{slide} img src… alt… / /ViewTransition!-- Astro -- img class{slide} transition:namehero src… alt… /// Solid / Nuxt — framework 启动过渡你只负责挂 name 与 bag 类 img class{slide} style{{ viewTransitionName: hero }} src… alt… /注意你仍需要在运行时设置唯一的view-transition-name值 —— Panda 只负责共享 CSS。设计系统的 build info 会携带这些 bags应用可以直接水合而无需重新提取。2.0.0-beta.15Minor新增theme.viewTransitions让 preset 可以命名共享的 view-transition bags。调用viewTransition(slide)时Panda 内联vt_slide未使用的名字不会进入 CSS。类型对应为 theme.ts 的theme.viewTransitions与 system-types.ts 的ViewTransitionFn。optimize 与 property 相关的类型深化optimize.propertyFallback2.0.0-beta.15会为每个发射的property注册同时播下一份普通声明让忽略property的引擎Safari 低于 16.4、Firefox 低于 128依然获得默认值export default defineConfig({ optimize: { propertyFallback: true }, })默认关闭。种子来自存活过剪枝的注册项因此只为实际用到的变量付费。对应类型在 config.ts 的OptimizeOptions.propertyFallback。utility 级globalVars2.0.0-beta.15工具定义可以携带globalVars把变量的property注册放在写出它的工具旁边。注册会合并进 config 级globalVars未使用时被剪枝utilities: { blur: { className: blur, globalVars: { --blur: { syntax: *, inherits: false } }, transform: (value) ({ --blur: blur(${value}) }), }, }类型层PropertyConfig新增globalVars?: GlobalVarsDefinition字段utility.tsGlobalVarsDefinition与CssPropertyDefinition含syntax、inherits、initialValue定义在 global-vars.ts。规则细节在工具已注册的名字上放普通值会在 CSS 发射时告警仅当 stylesheet 实际读取该变量时——因为普通值会丢弃注册并让变量开始继承传完整property对象可微调某个变量两个工具注册同名但定义不同是配置错误。polyfill/--polyfill2.0.0-beta.10原生级联层 polyfill无需 PostCSS 插件。CssgenOptions.polyfillconfig.ts默认false--polyfill可覆盖。optimize.treeshakeDesignSystem2.0.0-beta.10只水合应用实际导入的设计系统模块而非整个 build-info 产物。--polyfill对应的类型同样位于 config.ts 的OptimizeOptions.treeshakeDesignSystem。其他配置与钩子变更cssgen:done钩子回归2.0.0-beta.9作为 observe-only 钩子重新提供用于获取 CLI、Vite、PostCSS 的最终 CSS需要修改 CSS 时应使用optimize或 PostCSS。其参数类型CssgenDoneHookArgs包含artifact、content、path、outfile、manifest含files与tokens与layerRangesreset/base/tokens/recipes/utilities 各层的起止范围见 hooks.ts。minify顶层配置键2.0.0-beta.9cssgen从配置读取minify--minify仍可覆盖。对应CssgenOptions.minifyconfig.ts默认false。designSystem采纳2.0.0-beta.6通过designSystem: acme/ds采纳已发布的设计系统。Panda 读取库的panda.lib.json把其 preset 合并到你的配置之下并复用其预提取样式。若设计系统需要的 Panda 主版本不同Panda 会报告明确错误。FileSystemOptions.designSystem字段定义在 config.ts。preset:resolved修复2.0.0-beta.1修复该钩子缺少utils参数的问题插件作者现在可在preset:resolved内使用omit/pick/traverse与config:resolved及 v1 行为一致。相关类型见 hooks.tsConfigResolvedHookUtils提供omit、pick、traverse而PresetResolvedHookArgs携带preset、name、utils。移除syntax配置2.0.0-beta.16删除syntax配置项与--syntax标志template-literal 书写模式随之移除。全部改用对象语法css({ color: red })。当前 config.ts 中已不存在syntax字段。2.1.x 与稳定性窗口2.1.0、2.1.1与2.1.2均无类型层面的实质变更2.1.2 明确标注 No changes in this release。对于 1.x 及更早版本的历史CHANGELOG 指引读者查看 v1 分支上的 packages/types/CHANGELOG.md。小结与迁移清单围绕pandacss/types的变更可以归纳为四条主线书写方式收敛syntax/ template-literal 移除、Qwik JSX 支持移除、defineParts移除统一到对象语法 cva/defineSlotRecipe两条 recipe 路径新工厂函数补齐firstThatWorks()、keyframes()、positionTry()、viewTransition()四个工厂全部在 system-types.ts 中有明确类型签名且都遵循按需发射、未用不生成的 tree-shaking 原则CSS 变量注册体系成型property注册从 config 级globalVars延伸到 utility 级globalVars配合optimize.propertyFallback解决旧引擎兼容构建与集成选项丰富polyfill、minify、treeshakeDesignSystem、designSystem、cssgen:done钩子共同构成可观测、可优化的构建链路。升级到 Panda 2.0 时建议按此顺序检查移除syntax与jsxFramework: qwik→ 将defineParts用法迁移到defineSlotRecipe→ 将globalPositionTry迁移到theme.positionTry→ 按需开启optimize各项 → 通过cssgen:done接入最终 CSS 观测。整体上pandacss/types在 2.x 中既是配置与生成的类型契约也是新 CSS 特性的类型化入口值得在升级过程中逐项对照验证。赞分享前端构建工具开发工具【免费下载链接】panda Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️项目地址https://gitcode.com/gh_mirrors/pa/panda点击查看免费下载相关推荐CadQuery 版本演进全解从 changes.md 读懂 2.0 到 2.8 的核心变更与迁移要点CadQuery 版本演进全解从 changes.md 读懂 2.0 到 2.8 的核心变更与迁移要点 本文以 CadQuery 仓库根目录的 changes3D建模Sanity Studio 类型系统演进实录sanity/types 包 v3.86 → v6.13 变更全解读Sanity Studio 类型系统演进实录sanity/types 包 v3.86 → v6.13 变更全解读 sanity/types 是 Sanit人工智能大模型语音交互助手嵌入式物联网智能硬件MCP 服务react-pdf/types 类型系统演进全解从 CHANGELOG 看 react-pdf 的核心 API 能力react pdf/types 类型系统演进全解从 CHANGELOG 看 react pdf 的核心 API 能力 导读 react pdf/typPDF生成后端前端上一篇BossMod FFXIV插件终极指南从自动循环到战斗AI的完整解决方案下一篇Get cookies.txt LOCALLY如何在本地安全导出浏览器Cookie的完整技术指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考