cs-内线

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

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

安装

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

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

使用量

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

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/[email protected]/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中,通过文件内容:

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 装入最新的 :

<iframe id="output"></iframe>
<script src="https://unpkg.com/@css-inline/[email protected]"></script>
<script>
  cssInline.initWasm(fetch("https://unpkg.com/@css-inline/[email protected]/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 包 除外 cache,WASM缺乏: inlineStyleTags, (中文(简体) ), keepStyleTags, (中文(简体) ), keepLinkTags, (中文(简体) ), keepAtRules, (中文(简体) ), minifyCss, (中文(简体) ), baseUrl, (中文(简体) ), loadRemoteStylesheets, (中文(简体) ), extraCss, (中文(简体) ), preallocateNodeCapacity, (中文(简体) ), removeInlinedSelectors, (中文(简体) ), applyWidthAttributes, (中文(简体) ), applyHeightAttributes, (中文(简体) ), resolveCssVariables。 。 。 .

游戏场

尝试 css-inline 在WebAssembly驱动的 游乐场。 。 。 .

远程样式表

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

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>。 。 。 .

许可证

凭 麻省理工学院许可证。 。 。 .