@hone-ui / sx
的构建插件 sx prop转换为静态CSS，因此浏览器中不会运行任何样式代码。
<Box sx={{ p: 2, color: 'primary.main', '&:hover': { opacity: 0.8 } }} />
变成一个由生成的样式表支持的类：
.hn-sx-k3J9aQ2x {
padding: calc(2 * var(--hn-spacing));
color: var(--hn-palette-primary-main);
}
.hn-sx-k3J9aQ2x:hover {
opacity: 0.8;
}
设置
轻快地:
// vite.config.ts
import react from '@vitejs/plugin-react';
import sx from '@hone-ui/sx/vite';
import { defineConfig } from 'vite';
// List sx() before react(), and keep react() so Fast Refresh works.
export default defineConfig({
plugins: [sx(), react()],
});
删除Vite模板 src/index.css 和 App.css，或者把它们放在较早的一层。他们的
非分层规则覆盖库。
Next.js，使用turbpack或webpack：
// next.config.ts
import { withSx } from '@hone-ui/sx/next';
// Pass your existing config object, such as create-next-app's, instead of {}.
// optimizePackageImports keeps `next build --webpack` from shipping every component.
export default withSx({
experimental: { optimizePackageImports: ['@hone-ui/react'] },
});
进口 app/globals.css 在查看CSS之前 app/layout.tsx，并将其重置
@layer reset, hone-ui;。非分层CSS打败了库和 sx.
Rollup， esbuild和webpack的使用 @hone-ui/sx/rollup， @hone-ui/sx/esbuild 和
@hone-ui/sx/webpack 和维特一样。
选项
| 选项 | 默认的 | 目的 |
|---|---|---|
breakpoints | { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 } } | 形状中的断点名称和宽度 createTheme 需要(values， unit）. 与主题共享一个对象。 |
palette | {} | 你的主题 palette 对象。每个对象值键，例如 neutral: { main }，是调色板键。与主题共享一个对象。 |
paletteKeys | [] | 额外的调色板键，例如 ['brand'],所以 'brand.500' 解析为主题变量。 main， light， dark 和 contrastText 任何没有它的钥匙都可以工作。合并了 palette. |
spacing | 无 | 主题的间距数组，例如 [0, 4, 8, 16],所以 p: 3 编译, 16px. |
importSources | ['@hone-ui/react'] | 其组件为 sx。总是编译来自本地路径和同一文件的组件。 |
include | /\.[jt]sx$/ | 要转换的文件。 |
cacheDir | 'node_modules/.cache/hone-ui-sx' | 生成的CSS文件的位置。 |
editor | true | 在dev中，用 data-hn-source 用于可视化编辑器。生产忽略了它。 |
什么编译
静态值、主题值、断点对象和数组、嵌套选择器、 @media，
@container 和 @supports 块都编译成CSS。在运行时更改的值，例如
width: size，编译为该组件设置的CSS变量。条件项，如
sx={[base, active && { color: 'red' }]}，每个组合编译为一个类，最多三个
条件。的成员 const 样式对象在同一个文件中，例如 sx={styles.root}，
编译。
插件编译 sx 关于组件 @hone-ui/react，从您自己的文件中的组件，
在诸如 memo(Box)。另一个库的组件，甚至包装在
styled(...) 或者 memo(...)，保持它的 sx 都没动。
主题的功能，如 sx={(theme) => ({ zIndex: theme.zIndex.drawer + 1 })}，需要
主题在运行时。插件不处理它，不发出警告，组件调用它
当前主题。在数组中，第一个函数之前的项编译。函数和它之后的每一项
保持内联，这样以后的条目仍然会覆盖它。函数结果变成内联样式，因此它不能保存选择器或媒体查询。
插件不能区分服务器组件，所以它不会检查函数的位置；写
函数 sx 在一个 'use client'.
当无法编译文件时，插件会用文件和行发出警告 sx getter和方法；
扩展它不能读取，一个运行时 typography 值，或三个以上的条件。这些道具
退回到内联样式，它不能容纳选择器或媒体查询。
匹配主题
媒体查询和间距数组不能读取CSS变量，所以插件需要主题值
生活在它们外面。传递相同的值 createTheme 使用:
sx({
breakpoints, // the object you pass to createTheme
palette, // the palette you pass to createTheme; its object keys count as palette keys
spacing: [0, 4, 8, 16, 32],
paletteKeys: ['brand'],
});
一个数字 spacing 什么都不需要：因子相乘 --hn-spacing,这 ThemeProvider 集。
函数尺度不能传递给插件。把它写成一个数组。