# @capsizecss/vanilla-extract 中文文档

规范地址：https://npmcn.com/package/%40capsizecss/vanilla-extract/

版本：2\.0\.4
npm 元数据更新时间：2025-11-25T05:49:00.970Z
中文译文更新时间：2026-11-09T02:23:20.012Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40capsizecss/vanilla-extract
原文对照：https://npmcn.com/package/%40capsizecss/vanilla-extract/?lang=original
项目主页：https://github.com/seek-oss/capsize#readme
源码仓库：https://github.com/seek-oss/capsize

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：11.7 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@vanilla-extract/css ^1\.4\.0
- 首次发布：2021-08-23T00:49:34.951Z
- 最新版本发布：2025-11-25T05:49:00.537Z
- 近 30 天下载量：130410（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 4 个）

## 中文简介

缩放的香草-提取集成

## 安装

```sh
npm install @capsizecss/vanilla-extract
```

也可以使用：`pnpm add @capsizecss/vanilla-extract`、`yarn add @capsizecss/vanilla-extract`、`bun add @capsizecss/vanilla-extract`

## README

![Capsize](https://raw.githubusercontent.com/seek-oss/capsize/HEAD/images/capsize-header.png "Capsize")  

# @ capsiscs/ vanilla- extract( 缩写)

组合软件包 [香草摘录](https://vanilla-extract.style/)。 。 。 .

```bash
npm install @capsizecss/vanilla-extract
```

-   [使用量](https://npmcn.com/package/%40capsizecss/vanilla-extract/#readme-usage)
    -   [主题打字](https://npmcn.com/package/%40capsizecss/vanilla-extract/#readme-themed-typography)
    -   [响应打字](https://npmcn.com/package/%40capsizecss/vanilla-extract/#readme-responsive-typography)
    -   [调试标识符](https://npmcn.com/package/%40capsizecss/vanilla-extract/#readme-debug-identifiers)

## 使用量

1.  导入 `createTextStyle` 在您的香草提取样式表内,通过相关 [选项](https://npmcn.com/package/README.md#options)。 。 。 .

```ts
// 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.  从样式表导入该类并应用到文本元素

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

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

### 主题打字

当使用一个 [香草摘要主题](https://vanilla-extract.style/documentation/styling-api/#createtheme) 要管理您的打字功能,您需要预先计算并存储一个主题级别上的值.

导入 `precomputeValues` 通过相关的 [选项](https://npmcn.com/package/README.md#options) 并指定您的香草摘要主题。 这些预计算值可以直接传递到 `createTextStyles` 现改为:

```ts
// 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` 接受以香草提取形式出现的第二个参数 [媒体查询对象](https://vanilla-extract.style/documentation/styling-api/#style),返回完整的响应类列表.

```ts
// 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,
  },
});
```

或者,在主题的情况下:

```ts
// 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` 接受调试标识符作为最后一个参数.

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

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

# 许可证

麻省理工学院.

## 常见问题

### @capsizecss/vanilla-extract 是什么？

缩放的香草-提取集成

### 如何安装 @capsizecss/vanilla-extract？

在项目目录运行 npm install @capsizecss/vanilla-extract，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@vanilla-extract/css（^1\.4\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @capsizecss/vanilla-extract 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @capsizecss/vanilla-extract 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @capsizecss/vanilla-extract 可以商用吗？

@capsizecss/vanilla-extract 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @capsizecss/vanilla-extract 的下载量有多少？

根据 npm 官方下载统计，@capsizecss/vanilla-extract 在 2026/10/09 – 2026/11/07 这 30 天内被下载 130,410 次，日均约 4,347 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @capsizecss/vanilla-extract 还在维护吗？

最新版本 2\.0\.4 发布于 2025/11/25（11 个月前）；至今共发布 17 个版本，其中过去 12 个月发布了 4 个；首次发布于 2021/08/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。