简介
Stylex是一个简单易用的 CSS-in-JS 库,它提供了使用JavaScript中的内联样式的开发者体验,同时具备静态生成的原子样式的性能。
省流:Meta家的新CSS框架,竞争对手是 TaliwindCSS
,主打更高的扩展性。
背景
Meta 尝试了 TailwindCSS
,但是发现在处理大规模应用时存在一些限制,例如需要更高的扩展性时。
使用
讲解如何定义与使用样式,如何使用变量以及主题。
定义与使用样式
stylex.create 参数对象的值的类型
因为所有样式都必须是可静态分析的(为了超前编译),因此
- 字面量:对象,数组,字符串,数字
null
或者undefined
- 以上内容的嵌套组合
- 包含以上内容的简单表达式
- 字符串和数字的某些常用方法
不支持
- 函数(正在支持,用于动态样式)
- 外部导入变量(stylex定义的变量除外)
普通样式
import stylex from '@stylexjs/stylex';
// 使用 stylex.create 创建样式
const styles = stylex.create({
base: { fontSize: 16, color: 'rgb(60,60,60)' },
highlighted: { color: 'rebeccapurple' }
});
// 使用方法一:写入类名,Legacy API
<div className={stylex(styles.base, styles.hightlighted)} />
// 使用方法二:使用stylex.spread 使用样式,其返回 { className, style }
<div {...stylex.spread([styles.base, styles.hightlighted])} />
// 将样式传递给自定义组件
<CustomComponent xstyle={styles.base} />
伪类,伪元素与媒体查询
import stylex from '@stylexjs/stylex';
const styles = stylex.create({
base: {
// 伪类
color: { default: 'blue', ':hover': 'scale(1.1)', ':active': 'scale(0.9)' },
// 媒体查询
width: { default: 800, '@media (max-width: 800px)': '100%' },
// 伪元素
'::placeholder': { color: '#999' },
},
});
定义以及使用变量
// tokens.stylex.js - 创建变量
import stylex from '@stylexjs/stylex';
export const colors = stylex.createVars({ primaryText: 'black' });
// themes.js - 变量重写
import stylex from '@stylexjs/stylex';
import {colors, spacing} from './tokens.styles';
const DARK = '@media (prefers-color-scheme: dark)';
// Dracula theme
export const dracula = stylex.varsProvider(colors, { primaryText: {default: 'purple', [DARK]: 'lightpurple'} });
// components/MyComponent.js - 使用变量
import stylex from '@stylexjs/stylex';
import {colors, spacing} from '../tokens.styles';
const styles = stylex.create({
container: { color: colors.primaryText, padding: spacing.medium },
});
定义变量时的规则:
- CSS变量必须在 .stylex.js 扩展名的文件中;
- CSS变量必须作为命名导出从文件中导出,不支持默认导出;
- 该文件中导出的只能是CSS变量,不允许其它类型的导出。
现状
在Meta内部使用了 2 年多,但是现在还未完全开源。官方有一个未来规划的路线图,包括改进ESLint插件、支持更复杂的选择器、稳定的CSS变量主题化API等。