glaze
made with React

glaze是一个使用React设计的易用的css-in-js微框架。

这个项目诞生的目的是把它的前辈中最好的结合成一个单一的解决方案：

• Utility优先的CSS ，被Tailwind CSS实践
  • 完全静态，但可预先定制
  • 包含可重用性，没有重复的规则。

• 基于约束的布局，Theme UI中使用过

  • 非常有活力，感谢Emotion
  • 一次性样式可以自然定义。

• 几乎零运行时， treat使之成为可能。

  • 考虑到旧版本浏览器的主题化支持
  • 静态样式提取同时保持类型安全

安装

Npm

npm install glaze treat

定义主题

/* theme.treat.js */

import { createTheme, defaultTokens } from 'glaze';

export default createTheme({
  ...defaultTokens,

  // Customization
  scales: {
    ...defaultTokens.scales,
    color: {
      red: '#f8485e',
    },
  },
});

通过 ThemeProvider 应用主题：

import { ThemeProvider } from 'glaze';
import theme from './theme.treat';

export default function Layout({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}  

通过 sx方法指定样式

import { useStyling } from 'glaze';

export default function Component() {
  const sx = useStyling();

  return (
    <p
      className={sx({
        px: 4, // Sets padding-left and padding-right to 1rem
        color: 'white',
        bg: 'red', // Sets background to #f8485e
      })}
    >
      Hello, world!
    </p>
  );
}   

设置静态样式扩展

import './globalStyles.treat.js';

示例

import { createTheme } from 'glaze';

export default createTheme({
  scales: {
    spacing: { 4: '1rem' },
  },
  shorthands: {
    paddingX: ['paddingLeft', 'paddingRight'],
  },
  aliases: {
    px: 'paddingX',
  },
  matchers: {
    paddingLeft: 'spacing',
    paddingRight: 'spacing',
  },
});