@ capsiscs/ vanilla- extract( 缩写)

组合软件包 香草摘录。 。 。 .

npm install @capsizecss/vanilla-extract

• 使用量
  • 主题打字
  • 响应打字
  • 调试标识符

使用量

1. 导入 createTextStyle 在您的香草提取样式表内,通过相关 选项。 。 。 .

// Text.css.ts
import { createTextStyle } from '@capsizecss/vanilla-extract';

export const text = createTextStyle({
  fontSize: 16,
  leading: 24,
  fontMetrics: {
    capHeight: 700,
    ascent: 1058,
    descent: -291,
    lineGap: 0,
    unitsPerEm: 1000,
  },
});

2. 从样式表导入该类并应用到文本元素

// Text.ts
import * as styles from './Text.css';

document.write(`
  <div class="${styles.text}">
    My capsized text 🛶
  </div>
`);

主题打字

当使用一个 香草摘要主题 要管理您的打字功能,您需要预先计算并存储一个主题级别上的值.

导入 precomputeValues 通过相关的 选项 并指定您的香草摘要主题。 这些预计算值可以直接传递到 createTextStyles 现改为:

// Text.css.ts
import { createTheme } from '@vanilla-extract/css';
import { createTextStyle, precomputeValues } from '@capsizecss/vanilla-extract';

const [themeClass, vars] = createTheme({
  bodyText: precomputeValues({
    fontSize: 18,
    leading: 24,
    fontMetrics: {
      capHeight: 700,
      ascent: 1058,
      descent: -291,
      lineGap: 0,
      unitsPerEm: 1000,
    },
  }),
});

export const text = createTextStyle(vars.bodyText);

响应打字

作为回应风格的便利, createTextStyle 接受以香草提取形式出现的第二个参数 媒体查询对象,返回完整的响应类列表.

// Text.css.ts
import { createTextStyle } from '@capsizecss/vanilla-extract';

const fontMetrics = {
  capHeight: 700,
  ascent: 1058,
  descent: -291,
  lineGap: 0,
  unitsPerEm: 1000,
};

const textDefinitions = {
  mobile: { fontSize: 18, leading: 24, fontMetrics },
  tablet: { fontSize: 16, leading: 22, fontMetrics },
  desktop: { fontSize: 14, leading: 18, fontMetrics },
};

export const text = createTextStyle(textDefinitions.mobile, {
  '@media': {
    'screen and (min-width: 768px)': textDefinitions.tablet,
    'screen and (min-width: 1024px)': textDefinitions.desktop,
  },
});

或者,在主题的情况下:

// Text.css.ts
import { createTheme } from '@vanilla-extract/css';
import { createTextStyle, precomputeValues } from '@capsizecss/vanilla-extract';

const fontMetrics = {
  capHeight: 700,
  ascent: 1058,
  descent: -291,
  lineGap: 0,
  unitsPerEm: 1000,
};

const [themeClass, vars] = createTheme({
  bodyText: {
    mobile: precomputeValues({ fontSize: 18, leading: 24, fontMetrics }),
    tablet: precomputeValues({ fontSize: 16, leading: 22, fontMetrics }),
    desktop: precomputeValues({ fontSize: 14, leading: 18, fontMetrics }),
  },
});

export const text = createTextStyle(vars.bodyText.mobile, {
  '@media': {
    'screen and (min-width: 768px)': vars.bodyText.tablet,
    'screen and (min-width: 1024px)': vars.bodyText.desktop,
  },
});

调试标识符

为了改善开发者的经验, createTextStyle 接受调试标识符作为最后一个参数.

export const text = createTextStyle({ ... }, 'myCapsizedRule');

这产生了一个类名 类似的东西 .Text_myCapsizedRule__1bese54h。 。 。 .

许可证

麻省理工学院.