astryx theme build完整指南构建生产级主题CSS的5个步骤【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一个完全可定制、面向 AI 协作时代的开源设计系统开源项目精选 as/astryx内置 7 套官方主题。本文带你走通astryx theme build的完整流程把一份defineTheme主题源码编译为可直接上线的生产级主题 CSS、JS 模块与类型声明并教你用--check模式为 CI 加一道防漂移守卫。一、先理解 astryx theme build 的核心机制Astryx 的主题不是包一层组件而是一组CSS 自定义属性custom properties覆盖。设计系统保证了一条铁律astryx theme build与运行时Theme组件走的是同一条生成路径—— 编译器直接复用astryxdesign/core的共享生成器唯一事实来源不存在 CLI 里的第二套实现。也就是说你构建出的 CSS和运行时实际生效的 CSS 逐字节一致。这正是生产级二字的含义。实现细节可参考编译器主体 build.mjs 与 API 文档 themeBuild.doc.mjs。二、3 种主题起点template、add 或手写构建之前先回答我的主题文件从哪来。CLI 提供了三种入口都在 theme.mjs 中汇总导出命令适合谁产出astryx theme template想从零写自己品牌主题的人一份带注释的空白theme.template.ts默认落在项目根目录astryx theme add喜欢某个官方主题、想据为己有复制官方主题源码到你的项目手写熟悉defineThemeAPI 的进阶用户任意自定义主题文件theme template的设计很贴心默认拒绝覆盖已存在的文件可安全重复执行init 流程每次都会调用它。三、执行 astryx theme build一条命令编译 3 类产物以官方 Neutral 主题为例它的完整构建脚本写在 package.json 中值得逐段看懂rimraf dist astryx theme build src/neutralTheme.ts -o dist/theme.css --icons-specifier ./icons.mjs tsup tsc ...拆开看核心是这一句astryx theme build输入一个调用defineTheme()的主题文件如 neutralTheme.ts输出以-o dist/theme.css为锚点自动派生出同名的CSS 文件、JS 模块重新导出构建后的主题与图标注册表和.d.ts类型声明--icons-specifier ./icons.mjs告诉生成的 JS 模块图标注册表从独立编译的./icons.mjs导入而不是源码里的原路径构建回执receipt命令结束后返回主题名、token 覆盖数、组件覆盖数、产物体积KB以及校验警告——比如你在主题里声明了字体名却没有真正加载该字体警告会直接告诉你。官方主题的真实构建输出长这样截图来自 CLI 文档站四、生产级工程化包结构、exports 与 tsup 打包一个能上生产环境发布到 npm 的主题包仓库里的 7 套官方主题neutral / butter / stone / gothic / matcha / chocolate / y2k都是标准答案。1. 用exports字段给消费者三条入口参考 neutral 的 package.json.—— 源码入口供 StyleX 源码编译场景使用./built—— 预构建的 JS 产物供 Tailwind、纯 CSS 或无构建步骤的项目直接导入./theme.css—— 预构建 CSS 文件供样式表里import。2. 用 tsup 只打包必要部分tsup.config.ts 配置了两个入口source.ts与icons.tsx并刻意设置clean: false——因为astryx theme build已经把产物写进dist/不能让它再清空。astryxdesign/core、react、lucide-react全部标记为 external配合sideEffects: false最终产物对消费方完全可 tree-shake。五、CI 防漂移守卫theme build --check 模式生产级还差最后一环如何保证提交的生成文件永远是新的themeBuild支持--check模式见 build.mjs 的注释说明不写任何文件在内存中编译同样的产物逐个与磁盘上的文件比对只报漂移回执列出每个陈旧输出及其原因missing缺失 /outdated过期忽略易变内容比对时忽略生成头里记录命令的那一行其余必须逐字节一致。这里有个精妙的设计生成文件的generated头部只记录CLI 和 core 的包版本号而不记录时间戳。同样的输入永远产出同样的字节重建不会在 Git 里制造无谓 diff--check因此成为一个纯粹的内容漂移信号。落地检查清单✅构建回执中 warnings 为空字体、token 覆盖都合法主题源码中颜色/圆角全部走 token不写死原始值项目自带 ESLint 规则强制约束见 internal/eslint-plugin-astryx--check在 CI 中通过.css/.js/.d.ts与theme.ts始终同步。总结生产级主题 CSS 的完整流程起点theme template脚手架或theme add复制官方主题构建astryx theme build一条命令产出 CSS JS 类型声明并返回构建回执打包tsup 编译入口与图标注册表exports给出源码 / 预构建 / CSS 三条消费路径守卫--check模式进 CI版本号头部保证字节级稳定杜绝生成文件漂移。想动手体验仓库提供了完整示例工程 example-nextjs 与 Storybook 组件画廊 apps/storybook7 套官方主题的对照源码都在 packages/themes 下照着抄即可上线你的第一个生产级主题。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考