# @css-inline/css-inline-wasm 中文文档

规范地址：https://npmcn.com/package/%40css-inline/css-inline-wasm/

版本：0\.23\.2
npm 元数据更新时间：2026-10-27T13:15:15.640Z
中文译文更新时间：2026-11-11T03:21:25.736Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40css-inline/css-inline-wasm
原文对照：https://npmcn.com/package/%40css-inline/css-inline-wasm/?lang=original
项目主页：https://github.com/Stranger6667/css-inline#readme
源码仓库：https://github.com/Stranger6667/css-inline

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

- 包体积（解压后）：913 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>= 10
- 运行依赖：0 个
- 首次发布：2023-12-28T21:11:59.146Z
- 最新版本发布：2026-10-27T13:15:14.668Z
- 近 30 天下载量：113712（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 14 个）

## 中文简介

用于将 CSS 嵌入 HTML “ 样式” 属性的高性能库

## 安装

```sh
npm install @css-inline/css-inline-wasm
```

也可以使用：`pnpm add @css-inline/css-inline-wasm`、`yarn add @css-inline/css-inline-wasm`、`bun add @css-inline/css-inline-wasm`

## README

# cs-内线

## @cs-inline/cs-inline-wasm (英语)

[![build status](https://img.shields.io/github/actions/workflow/status/Stranger6667/css-inline/build.yml?style=flat-square&labelColor=555555&logo=github)](https://github.com/Stranger6667/css-inline/actions/workflows/build.yml) [![npm](https://img.shields.io/npm/v/@css-inline/css-inline-wasm.svg?style=flat-square)](https://www.npmjs.com/package/@css-inline/css-inline-wasm) [![codecov.io](https://img.shields.io/codecov/c/gh/Stranger6667/css-inline?logo=codecov&style=flat-square&token=tOzvV4kDY0)](https://app.codecov.io/github/Stranger6667/css-inline) [![gitter](https://img.shields.io/gitter/room/Stranger6667/css-inline?style=flat-square)](https://gitter.im/Stranger6667/css-inline)

`css-inline` 将 CSS 插入 HTML `style` 属性。 这个包是它的 **网络大会** 用于浏览器和捆绑器.

## 安装

```shell
npm i @css-inline/css-inline-wasm
```

货包船类型`index.d.ts`) (中文(简体) ).

## 使用量

采用捆绑或无害环境管理:

```javascript
import { initWasm, inline, inlineFragment } from "@css-inline/css-inline-wasm";

// `initWasm` is async and runs once: wait for it before calling `inline`
await initWasm(fetch("https://unpkg.com/@css-inline/css-inline-wasm@0.23.2/index_bg.wasm"));

const html = inline("<html><head><style>h1 { color:blue; }</style></head><body><h1>Big Text</h1></body></html>");
// <html><head></head><body><h1 style="color: blue;">Big Text</h1></body></html>

const fragment = inlineFragment("<h1>Big Text</h1>", "h1 { color: red; }");
// <h1 style="color: red;">Big Text</h1>
```

在Node.js中,通过文件内容:

```javascript
import { readFile } from "node:fs/promises";
import { initWasm, inline } from "@css-inline/css-inline-wasm";

await initWasm(readFile(new URL(import.meta.resolve("@css-inline/css-inline-wasm/index_bg.wasm"))));
```

从CDN中,脚本定义了全局 `cssInline`。将两个 URL 中的版本固定在您想要的发布中; 未绑定的 URL 装入最新的 :

```html
<iframe id="output"></iframe>
<script src="https://unpkg.com/@css-inline/css-inline-wasm@0.23.2"></script>
<script>
  cssInline.initWasm(fetch("https://unpkg.com/@css-inline/css-inline-wasm@0.23.2/index_bg.wasm")).then(() => {
    const inlinedHtml = cssInline.inline("<html><head><style>h1 { color:blue; }</style></head><body><h1>Big Text</h1></body></html>");
    document.getElementById("output").srcdoc = inlinedHtml;
  });
</script>
```

## API 密码

-   `initWasm(moduleOrPath)`: 加载 `.wasm` 模块。 接受一个 URL, `Response`, (中文(简体) ), `BufferSource`, (中文(简体) ), `WebAssembly.Module` 或约一相.
-   `inline(html, options?)`
-   `inlineFragment(html, css, options?)`数字 : `css` 是一个 CSS 字符串.
-   `version()`

选项匹配 [节点.js 包](https://github.com/Stranger6667/css-inline/tree/master/crates/css-inline-js#configuration) 除外 `cache`,WASM缺乏: `inlineStyleTags`, (中文(简体) ), `keepStyleTags`, (中文(简体) ), `keepLinkTags`, (中文(简体) ), `keepAtRules`, (中文(简体) ), `minifyCss`, (中文(简体) ), `baseUrl`, (中文(简体) ), `loadRemoteStylesheets`, (中文(简体) ), `extraCss`, (中文(简体) ), `preallocateNodeCapacity`, (中文(简体) ), `removeInlinedSelectors`, (中文(简体) ), `applyWidthAttributes`, (中文(简体) ), `applyHeightAttributes`, (中文(简体) ), `resolveCssVariables`。 。 。 .

## 游戏场

尝试 `css-inline` 在WebAssembly驱动的 [游乐场](https://css-inline.org/)。 。 。 .

## 远程样式表

`inlineAsync` 财务报告和审定财务报表 `inlineFragmentAsync` 返回 a `Promise` 装入远程 `link` 样式表 `fetch`。 。 。 . 在浏览器中,托管样式表的服务器必须允许跨源请求(CORS).

```javascript
const inlined = await inlineAsync(html, { baseUrl: "https://example.com/" });
```

## 限制

WASM 模块无法读取文件系统, 同步 `inline` 财务报告和审定财务报表 `inlineFragment` 无法装入任何 `link` 样式表. 他们扔出一个弦(不是 `Error`:

-   远程 URL : `Loading remote stylesheets is not supported on WASM: <url>`启用 `inlineAsync` 换句话说.
-   `file://` 或亲属 `href` 无 `http(s)` `baseUrl`数字 : `Loading local files is not supported on WASM: <url>`

`inlineAsync` 财务报告和审定财务报表 `inlineFragmentAsync` 丢弃相同的本地文件出错,并 `<error>: <url>` 当获取失败时.

跳过 `link` 标签,或者:

-   通过 `loadRemoteStylesheets: false` 跳过每个 `link` 标签,远程和本地,或
-   添加 `data-css-inline="ignore"` 页:1 `link` 标签.

添加跳过 CSS 的内容 `extraCss` 如果你需要的话.

其他错误也是字符串,例如无效 `baseUrl` 掷出 `relative URL without a base: <value>`。 。 。 .

## 许可证

凭 [麻省理工学院许可证](https://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @css-inline/css-inline-wasm 是什么？

用于将 CSS 嵌入 HTML “ 样式” 属性的高性能库

### 如何安装 @css-inline/css-inline-wasm？

在项目目录运行 npm install @css-inline/css-inline-wasm，或使用 pnpm add / yarn add / bun add。

### @css-inline/css-inline-wasm 支持 TypeScript 吗？

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

### @css-inline/css-inline-wasm 支持 ESM 还是 CommonJS？

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

### @css-inline/css-inline-wasm 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @css-inline/css-inline-wasm 可以商用吗？

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

### @css-inline/css-inline-wasm 的下载量有多少？

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

### @css-inline/css-inline-wasm 还在维护吗？

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