StyleX 新的CSS框架概览

简介

Stylex是一个简单易用的 CSS-in-JS 库，它提供了使用JavaScript中的内联样式的开发者体验，同时具备静态生成的原子样式的性能。
省流：Meta家的新CSS框架，竞争对手是 TaliwindCSS，主打更高的扩展性。

背景

Meta 尝试了 TailwindCSS，但是发现在处理大规模应用时存在一些限制，例如需要更高的扩展性时。

使用

讲解如何定义与使用样式，如何使用变量以及主题。

定义与使用样式

stylex.create 参数对象的值的类型

因为所有样式都必须是可静态分析的(为了超前编译)，因此

1. 字面量：对象，数组，字符串，数字
2. null 或者 undefined
3. 以上内容的嵌套组合
4. 包含以上内容的简单表达式
5. 字符串和数字的某些常用方法

不支持

1. 函数(正在支持，用于动态样式)
2. 外部导入变量(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 },
});

定义变量时的规则:

1. CSS变量必须在 .stylex.js 扩展名的文件中；
2. CSS变量必须作为命名导出从文件中导出，不支持默认导出；
3. 该文件中导出的只能是CSS变量，不允许其它类型的导出。

现状

在Meta内部使用了 2 年多，但是现在还未完全开源。官方有一个未来规划的路线图，包括改进ESLint插件、支持更复杂的选择器、稳定的CSS变量主题化API等。