整RiskLab器

RiskLab Styler是一个用于生产应用程序接口的类型化、零运行时依赖的原子样式引擎。

它提供确定性原子类、嵌套选择器、条件规则、主题变量契约、变体配方、冲突安全组合、运行时注入、隔离注册中心、水合作用和服务器端收集。

目录: rpwalsh.github.io / ?视图=所有

import { create, createVariants, defineVars, createTheme, props } from '@risklab/styler';

const vars = defineVars({ color: { accent: '' }, space: { md: 0 } }, 'app');
const darkTheme = createTheme(vars, { color: { accent: '#22d3ee' }, space: { md: 12 } });

const styles = create({
  root: {
    display: 'grid',
    gap: vars.space.md,
    color: vars.color.accent,
    ':hover': { opacity: 0.92 },
    '@media (min-width: 60rem)': { gridTemplateColumns: '18rem 1fr' },
  },
});

const button = createVariants({
  base: { display: 'inline-flex', alignItems: 'center' },
  variants: {
    size: { sm: { height: 28 }, lg: { height: 44 } },
    tone: { normal: { color: 'white' }, critical: { color: '#ef4444' } },
  },
  defaults: { size: 'sm', tone: 'normal' },
});

const className = props(darkTheme, styles.root, button({ size: 'lg' })).className;

服务器呈现使用 createServerStyleCollector 从 @risklab/styler/server.

构建时和配置驱动的应用程序可以编译严格的JSON 为文档设置样式 compileStyleDocument 从 @risklab/styler/compiler. 编译器返回确定性的CSS加上类和动画清单，所以 应用程序可以在不启用运行时注入的情况下发布提取的CSS。

在Apache-2.0下授权。