## 前言 antd4以前的版本用less的变量来实现多套less模板，来渲染主题。局限性很大，所以antd5做了新的官方的css-in-js的主题实现，来控制更复杂的主题业务场景，接着我会展示源码细节并深入学习。 ## 我的理解按我的理解css-in-js就是将通过序列化css的属性名来实现css的模块化，所以你会看到webpack可以编译module.css的文件来隔离, 包括其他emotion、styled-components的cssinjs的方案的大放异彩，js控制样式自然灵活度极高，所以你几乎看不到css文件，但是同时你的项目内会有大量的js的编译代码，说白了打包出来的js文件会很大。antd5区别于其他方案，做了各种`缓存`，以及更可控的`组件级别的控制`，`相比性能对于组件库的层面是要优于其他css-in-js的方案的`。 ## 困境 css-in-js最大的问题在于你编写的css样式类名经过模块化后是不一致的，每次在react的重渲染下，大量的props带来额外性能开销也是很明显的。 ## Antd的css-in-js优缺点 Antd最大的特点是组件级别的缓存，那么hash最终的结果要受到组件名 + token + version 等，这么做很明显是为了props防止重渲染。对于我们的场景的业务场景你要考虑好组件名的唯一，也就是hash的唯一性，对于大型web应用管理hash也是一件头疼的事情。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fde059a4ba2e46bc99da14409fbdc108~tplv-k3u1fbpfcp-watermark.image?) ## 源码首先在任意一个antd5的component中你可以看到这段代码，useStyle返回的wrapSSR和hashId，hashId会被用于classNames的序列化样式属性中，那么重点是wrapSSR这个函数，函数传入了react的元素节点，大概率也能想到传入的节点要混入style对象。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a448d7be59bc40ce8faabc3709bb321f~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9acb831ded464d1e95024801e8d93ec7~tplv-k3u1fbpfcp-watermark.image?) ```ts //./style/index.tsx export default genComponentStyleHook('Collapse', (token) => { const collapseToken = mergeToken(token, { collapseContentBg: token.colorBgContainer, collapseHeaderBg: token.colorFillAlter, collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, collapsePanelBorderRadius: token.borderRadiusLG, collapseContentPaddingHorizontal: 16, // Fixed value }); //返回的是一个通过js对象描述的一个样式表 return [ genBaseStyle(collapseToken), genBorderlessStyle(collapseToken), genGhostStyle(collapseToken), genArrowStyle(collapseToken), genCollapseMotion(collapseToken), ]; }); ``` 你会看到在每个组件的styles文件夹都会有一个genComponentStyleHook的api，第一个就是组件标识肯定会用来做属性的区分等，第二个是一个回调传入的token是一个样式配置对象，所以重点是这个token对象的样式配置，`这个token你可以理解为可以切换不同优先级的配置对象，可以覆盖原有的样式，你可以把它想象成一个主题变量，控制所有的组件对应的样式修改，也可以对单个组件的某个样式属性修改`。第二个参数回调其实是StyleFn，是控制整个组件主题的核心函数。这里简单看下源码genBaseStyle、genBorderlessStyle等做了什么 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9bfd199e4ff84b8585d675673147c574~tplv-k3u1fbpfcp-watermark.image?) 所以最终返回的是一个受token控制的js的样式对象，接下来去找genComponentStyleHook, 但是得先聊一聊token这个东西。 ### token是一个组件样式修改的变量 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/619a784741d54ebebc7baa4bb6acdf84~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbd5073fc89447b79cd9b5c506907aad~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bae52bd08564ae997eb7153da90a9c2~tplv-k3u1fbpfcp-watermark.image?) 最主要的是AliasToken和ComponentTokenMap这两个类型，一个对全局所有组件的混入修改，一个是对于组件的以及组件内部的混入修改。包括附带的一些前缀用于区分组件。所以token是可以控制优先级的一个`样式配置对象`。 ## Design Token的生命周期一个token能玩出花了哈哈，说白了就是配置对象从`Seed Token`这个最小单位开始，组装成一个Map的主题对象，那么他会返回一个`Map Token`对应，你会看到下面从ColorPrimary变出了colorPrimaryBg和colorPrimary这两个。colorPrimaryBg是由colorPrimary派生的。为什么要有Seed Token，是因为方便设计师创造出对于的主题色，并通过算法去调和其他主题色。说白了Seed Token就是一个零件，而MapToken是组装零件的。那么，`Aliae Token`又是个啥，其实就是一个别名，做复用多个Map token 有共性的零件。最终影响组件主题色，那么这个派生关系或者说代码的执行流程就是Design Token的生命周期 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/336ffee0cc734bd1ae2f7a5cbc0e3129~tplv-k3u1fbpfcp-watermark.image?) ## genComponentStyleHook 遍历生成组件样式对象的集合 ```ts import { useStyleRegister } from '@ant-design/cssinjs'; //... export default function genComponentStyleHook( component: ComponentName, styleFn: (token: FullToken, info: StyleInfo) => CSSInterpolation, getDefaultToken?: | OverrideTokenWithoutDerivative[ComponentName] | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]), ) { //注意！这里其实就是useStyle这个函数 return (prefixCls: string): UseComponentStyleResult => { const [theme, token, hashId] = useToken(); const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); const rootPrefixCls = getPrefixCls(); // Generate style for all a tags in antd component. useStyleRegister({ theme, token, hashId, path: ['Shared', rootPrefixCls] }, () => [ { // Link '&': genLinkStyle(token), }, ]); return [ useStyleRegister( { theme, token, hashId, path: [component, prefixCls, iconPrefixCls] }, () => { const { token: proxyToken, flush } = statisticToken(token); const defaultComponentToken = typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken; const mergedComponentToken = { ...defaultComponentToken, ...token[component] }; const componentCls = `.${prefixCls}`; const mergedToken = mergeToken< TokenWithCommonCls> >( proxyToken, { componentCls, prefixCls, iconCls: `.${iconPrefixCls}`, antCls: `.${rootPrefixCls}`, }, mergedComponentToken, ); const styleInterpolation = styleFn(mergedToken as unknown as FullToken, { hashId, prefixCls, rootPrefixCls, iconPrefixCls, overrideComponentToken: token[component], }); flush(component, mergedComponentToken); return [genCommonStyle(token, prefixCls), styleInterpolation]; }, ), hashId, ]; }; } ``` 你会发现最核心的是useStyleRegister这个api返回的就是genComponentStyleHook，那么useStyle又返回就是warpssr，所以重点就是useStyleRegister，那么我们看看在`@ant-design/cssinjs`包里面useStyleRegister做了什么。 ### useStyleRegister 注册全局的样式表 ```ts /** * 注册全局的样式表 */ export default function useStyleRegister( info: { theme: Theme; token: any; path: string[]; hashId?: string; layer?: string; }, styleFn: () => CSSInterpolation, ) { const { token, path, hashId, layer } = info; const { autoClear, mock, defaultCache, hashPriority, container, ssrInline, transformers, linters, } = React.useContext(StyleContext); const tokenKey = token._tokenKey as string; //注意这里的fullPuth用于缓存查找的key，已经做很细粒度的path const fullPath = [tokenKey, ...path]; // 根据环境判断是否要处理样式 let isMergedClientSide = isClientSide; if (process.env.NODE_ENV !== 'production' && mock !== undefined) { isMergedClientSide = mock === 'client'; } const [cachedStyleStr, cachedTokenKey, cachedStyleId] = useGlobalCache( 'style', fullPath, // Create cache if needed () => { const styleObj = styleFn(); const [parsedStyle, effectStyle] = parseStyle(styleObj, { hashId, hashPriority, layer, path: path.join('-'), transformers, linters, }); const styleStr = normalizeStyle(parsedStyle); const styleId = uniqueHash(fullPath, styleStr); if (isMergedClientSide) { const style = updateCSS(styleStr, styleId, { mark: ATTR_MARK, prepend: 'queue', attachTo: container, }); (style as any)[CSS_IN_JS_INSTANCE] = CSS_IN_JS_INSTANCE_ID; // Used for `useCacheToken` to remove on batch when token removed style.setAttribute(ATTR_TOKEN, tokenKey); // Dev usage to find which cache path made this easily if (process.env.NODE_ENV !== 'production') { style.setAttribute(ATTR_DEV_CACHE_PATH, fullPath.join('|')); } // Inject client side effect style Object.keys(effectStyle).forEach((effectKey) => { if (!globalEffectStyleKeys.has(effectKey)) { globalEffectStyleKeys.add(effectKey); // Inject updateCSS( normalizeStyle(effectStyle[effectKey]), `_effect-${effectKey}`, { mark: ATTR_MARK, prepend: 'queue', attachTo: container, }, ); } }); } return [styleStr, tokenKey, styleId]; }, // Remove cache if no need ([, , styleId], fromHMR) => { if ((fromHMR || autoClear) && isClientSide) { removeCSS(styleId, { mark: ATTR_MARK }); } }, ); return (node: React.ReactElement) => { let styleNode: React.ReactElement; //一个你得在非ssr服务端渲染，一个是否在client，一个外部的配置，如果不满足就返回空 if (!ssrInline || isMergedClientSide || !defaultCache) { styleNode = ; } else { styleNode = (