【免费下载链接】treat:candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.项目地址https://gitcode.com/gh_mirrors/tre/treat点击查看免费下载treat 是 SEEK 开源的可主题化、静态提取 CSS-in-JS解决方案运行时开销近乎为零。它由 SEEK 的 Braid 设计系统孕育而生样式写在.treat.js/.treat.ts文件中在构建期执行并提前生成全部 CSS最终产物里几乎不携带任何样式逻辑。本文将带你回顾 Braid 团队踩过的坑并给出一条从零搭建可主题化设计系统的完整实践路径。为什么是 treatBraid 设计系统踩过的两个坑Braid 最初基于 CSS Modules JavaScript 实现随后遇到两个绕不开的难题完整决策过程见 docs/background.mdCSS Modules 难以兼容 TypeScript——源文件导出的是整份样式表对象而导入方拿到的只是一个扁平的类名映射TS 类型在这一步完全丢失样式文件被迫停留在 JavaScriptCSS Modules 只有一个扁平命名空间——想从单个文件导出paddingTop、background、color等多组工具类只能手动下划线命名再写一堆样板代码把它们转回嵌套结构。团队评估过主流替代方案但都被劝退styled-components / Emotion 等运行时方案动态能力强但包体积与运行时性能开销对 Braid 这种要以独立 widget 形式嵌入外部代码库的组件库不可接受Linaria 等静态方案主题化依赖 CSS 变量CSS custom properties无法支持 IE11 等旧浏览器。于是 treat 应运而生四个核心目标非常明确完全静态提取、最小运行时、类型安全、兼容旧浏览器。3 步上手 treat从安装到输出静态 CSS第一步安装并配置 webpack 插件treat 需要基于 webpack 构建插件随核心包提供完整选项见 docs/webpack-options.mdyarn add treat在 webpack 配置中加入TreatPlugin配合mini-css-extract-plugin输出独立 CSS 文件const { TreatPlugin } require(treat/webpack-plugin); const MiniCssExtractPlugin require(mini-css-extract-plugin); module.exports { plugins: [ new TreatPlugin({ outputLoaders: [MiniCssExtractPlugin.loader] }), new MiniCssExtractPlugin() ] };第二步编写 treat 文件用.treat.js/.treat.ts后缀标记构建期执行的样式文件// Button.treat.js —— 这段代码不会进入最终包 import { style } from treat; export const button style({ backgroundColor: blue, height: 48 });第三步在组件里引入样式import * as styles from ./Button.treat.js; const Button ({ text }) ( button className{styles.button}{text}/button );构建完成后treat 文件中的样式逻辑被完全剥离组件里只剩一个类名字符串——CSS 全部走静态文件JS 包内零样式代码。可主题化核心一个主题 一份预生成 CSStreat 的主题化思路与 Linaria 截然不同不用 CSS 变量而是为每个主题各生成一份独立 CSS 类。// theme.treat.js import { createTheme } from treat; export default createTheme({ brandColor: blue, grid: 4 });// Button.treat.js export const button style((theme) ({ backgroundColor: theme.brandColor, height: theme.grid * 11 }));若项目中定义了greenTheme与redTheme构建产物里就会各生成一份.button_greenTheme、.button_redTheme。运行时只需按当前主题查表切换到对应类名逻辑轻到几乎不存在——这也是它天然兼容 IE11 等旧浏览器的原因原理详见 docs/how-it-works.md。React 项目中通过react-treat的TreatProvideruseStyles完成主题注入与解析实现见 packages/react-treat/src/index.tsxTreatProvider theme{theme}.../TreatProvider // 组件内 const styles useStyles(styleRefs);⚠️优先级注意为确保跨主题 specificity 一致带主题的样式优先级永远高于普通样式与书写顺序无关。Braid 团队建议不要依赖跨类名覆盖状态样式也统一写成 themed styles。实战像 Braid 一样批量生成原子化类treat 提供styleMap/styleTree两个 API文档见 docs/styling-api.md配合 JS 的循环能力可以从设计令牌design tokens批量生成原子类。本仓库的文档站就是一个真实案例site/src/system/styles/atoms.treat.ts基于 tokens 生成display、alignItems、flexGrow等原子类site/src/system/styles/createSpacing.ts用styleTree把8 个间距档位 × 2 个断点 × 8 个 padding/margin 方向组合成上百个响应式间距类主题更新后全部自动重新生成site/src/themes.treat.ts文档站的主题定义字体、字号、颜色、边框等设计令牌。配合 site/src/Theme.ts 中手动声明的Theme接口所有theme.grid、theme.color.strong的取值都受 TypeScript 类型检查——设计令牌即类型设计即契约。运行时为什么近乎为零无主题场景完全不需要运行时构建后只剩类名有主题场景运行时只做一次主题 × 模块 → 类名的查表结果按模块缓存在内存中整个应用生命周期每个模块只解析一次所有 CSS 逻辑含其依赖都不会进入最终 JS 包——对 Braid 这类需要以独立 widget 嵌入外部站点的组件库至关重要。核心入口见 packages/treat/src/index.ts运行时查表实现见 packages/treat/src/resolveStyles.ts。进阶技巧速查场景做法参考调试类名安装babel-plugin-treat自动为样式补充可读调试名docs/setup.mdSSR 项目服务端构建设outputCSS: false避免重复生成 CSSdocs/setup.md主题按需加载动态import主题文件webpack 自动拆分为独立 CSSdocs/setup.md主题类型安全全局声明treat/theme模块的Theme接口docs/data-types.md全局样式 / resetglobalStyle(html, body, {...})site/src/App.treat.ts插件配置项localIdentName、themeIdentName、hmr等docs/webpack-options.md完整资料索引项目背景与 Braid 的决策过程docs/background.md静态提取与主题化原理docs/how-it-works.md运行时 APIresolveStyles/resolveClassNamedocs/runtime-api.mdReact APITreatProvider/useStylesdocs/react-api.md完整示例Gatsby / Next.jsexamples/gatsby-plugin-treat-example/、examples/next-treat-example/想亲手跑一遍可以获取代码git clone https://gitcode.com/gh_mirrors/tre/treat赞分享【免费下载链接】treat:candy: Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.项目地址https://gitcode.com/gh_mirrors/tre/treat点击查看免费下载相关推荐styled-components主题化实战构建可定制化设计系统styled components主题化实战构建可定制化设计系统 styled components主题化是构建现代化React应用设计系统的关键技术它让开前端UI组件Context Engineering 实战用 /experiment.agent 系统提示模板构建可审计、可递归的实验设计 AgentContext Engineering 实战用 /experiment.agent 系统提示模板构建可审计、可递归的实验设计 Agent 本文以 Contex文档教程知识库人工智能提示工程Gaia高可用架构设计构建可靠的分布式自动化系统Gaia高可用架构设计构建可靠的分布式自动化系统 在当今云原生时代构建高可用的分布式系统已成为企业数字化转型的关键。Gaia作为一个开源的云计算平台专门设后端CI/CDDevOps工作流自动化任务调度流程编排创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考