StyleX 新的CSS框架概览

科技前沿 • 2025-02-05 19:23 • 阅读 53

大家好，我是讯享网，很高兴认识大家。

简介

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等。