cs-内线

css-inline 将 CSS 插入 HTML style 属性。 使用它来准备HTML电子邮件或将HTML嵌入第三方网页.

它使这个 HTML:

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

css-inline 保留输入时的白空间文本节点,所以缩入的 HTML 保留在输出中缩入.

• 利用Mozilla Servo组件(html5ever, (中文(简体) ), cssparser, (中文(简体) ), selectors(中文(简体) )
• 内置 CSS 从 style 财务报告和审定财务报表 link 标记
• 删除 style 财务报告和审定财务报表 link 标记
• 解决外部样式表(包括本地文件)
• 可选缓存外部样式表
• Linux、Windows、macOS和Android的作品
• 支持 HTML5 & CSS3
• 在节点20和22试验

游戏场

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

安装

节点.js

安装方式 npm数字 :

npm i @css-inline/css-inline

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

npm为您的平台安装了预建的二进制,所以不需要Rust. 预建目标 : linux-x64-gnu, (中文(简体) ), linux-x64-musl, (中文(简体) ), linux-arm64-gnu, (中文(简体) ), linux-arm64-musl, (中文(简体) ), linux-arm-gnueabihf, (中文(简体) ), darwin-x64, (中文(简体) ), darwin-arm64, (中文(简体) ), win32-x64-msvc, (中文(简体) ), win32-arm64-msvc, (中文(简体) ), android-arm64, (中文(简体) ), android-arm-eabi。 。 。 .

使用量

import { inline } from "@css-inline/css-inline";
// CommonJS: const { inline } = require("@css-inline/css-inline");

const inlined = inline(
  "<html><head><style>h1 { color:red }</style></head><body><h1>Test</h1></body></html>",
);
// <html><head></head><body><h1 style="color: red;">Test</h1></body></html>

inline 添加缺失 html, (中文(简体) ), head 财务报告和审定财务报表 body 标记,因此输出是一个完整的 HTML 文档.

inlineFragment(html, css, options?) 插入 css 字符串为 HTML 片断。 从不说 <html>, (中文(简体) ), <head> 或者说 <body>;如果输入有,则只保留其内容。 使用 inline 保持完整的文档结构:

import { inlineFragment } from "@css-inline/css-inline";

const inlined = inlineFragment(
  "<main><h1>Hello</h1><section><p>who am i</p></section></main>",
  "p { color: red; } h1 { color: blue; }",
);
// <main><h1 style="color: blue;">Hello</h1><section><p style="color: red;">who am i</p></section></main>

配置

将选项作为第二个参数传递到 inline 第三个改为 inlineFragment。 。 。 .

• inlineStyleTags。从 style 标签。 默认 : true
• keepStyleTags保留 style 内嵌后标记。 默认 : false
• keepLinkTags保留 link 内嵌后标记。 默认 : false
• keepAtRules保持规则@media, (中文(简体) ), @font-face,...) 入内后. 默认 : false
• minifyCss删除属性和值之间的分号和空格。 默认 : false
• baseUrl。用于解决相对 URL 的基础 URL。 使用 file:// 从文件系统装入样式表的计划; 结束目录 URL / (单位:千美元)file:///path/to/styles/),或 css-inline 解析相对于父目录。 默认 : null
• loadRemoteStylesheets从中装入样式表 link 标记,通过网络或从 file:// 路径. false 跳过每个 link 标签。 默认 : true
• cache。用于外部样式表的 LRU 缓存,由已解析的 URL 键入. size 是要保存的样式表的数量,必须大于零,例如. { size: 5 }默认 : null
• extraCss额外的CSS到内置。 默认 : null
• preallocateNodeCapacity。 。 。 . 高级。解析时要预先分配的 HTML 节点数。 设定为预期的节点数以避免再分配 。 默认 : 32
• removeInlinedSelectors删除内嵌到 <style> 块。 默认 : false
• applyWidthAttributes添加 width 来自 CSS 的 HTML 属性 width 属性在 table, (中文(简体) ), td, (中文(简体) ), th 财务报告和审定财务报表 img默认 : false
• applyHeightAttributes添加 height 来自 CSS 的 HTML 属性 height 属性在 table, (中文(简体) ), td, (中文(简体) ), th 财务报告和审定财务报表 img默认 : false
• resolveCssVariables替换 var() 引用它们所参考的自定义属性的值并删除 --* 声明。 默认 : false

要跳过内衬标记,请添加 data-css-inline="ignore" 属性 :

<html>
<head>
    <style>h1 { color:blue; }</style>
</head>
<body>
    <!-- The tag below won't receive additional styles -->
    <h1 data-css-inline="ignore">Big Text</h1>
</body>
</html>

同样的属性在a link 或者说 style 标记排除其样式 :

<head>
  <!-- Styles below are ignored -->
  <style data-css-inline="ignore">h1 { color:blue; }</style>
</head>
<body>
  <h1>Big Text</h1>
</body>

保持一个 style 在输出中标记, 添加 data-css-inline="keep"。使用它来保存 @media 单独查询应答邮件 style 标签. css-inline 即使当 keepStyleTags 实值 false。 。 。 .

<head>
  <!-- Styles below are not removed -->
  <style data-css-inline="keep">h1 { color:blue; }</style>
</head>
<body>
  <h1>Big Text</h1>
</body>

规则不能内含到 HTML 中, 所以 css-inline 默认删除它们. 设定 keepAtRules: true 让他们留在 style 标记和内入其余样式. css-inline 即使在 keepStyleTags 实值 false。 。 。 .

<head>
  <!-- With keepAtRules: true, "color: blue" goes into <h1> and @media stays in <style> -->
  <style>h1 { color: blue; } @media (max-width: 600px) { h1 { font-size: 18px; } }</style>
</head>
<body>
  <h1>Big Text</h1>
</body>

与 minifyCss: true, (中文(简体) ), css-inline 删除内嵌样式中属性和值之间的分号与空格.

<head>
  <!-- With minifyCss: true, <h1> gets style="color:blue;font-weight:bold" -->
  <style>h1 { color: blue; font-weight: bold; }</style>
</head>
<body>
  <h1>Big Text</h1>
</body>

缓存是默认关闭。 启用它以避免在每次呼叫中获取相同的外部样式表 :

import { inline } from "@css-inline/css-inline";

const inlined = inline(
  `
  <html>
    <head>
      <link href="http://127.0.0.1:1234/external.css" rel="stylesheet">
      <style>h1 { color:red }</style>
    </head>
    <body>
      <h1>Test</h1>
    </body>
  </html>
  `,
  { cache: { size: 5 } },
);

inline 财务报告和审定财务报表 inlineFragment 是同步的. css-inline 获取被阻断的 HTTP 请求的远程样式表, 因此调用会阻断事件循环, 直到获取完成 . inlineAsync 财务报告和审定财务报表 inlineFragmentAsync 使用相同的参数返回 a Promise。它们同时加载所有外部样式表,从事件循环中卸出:

import { inlineAsync } from "@css-inline/css-inline";

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

设定 loadRemoteStylesheets: false 全部跳过 link 标签.

错误

inline 财务报告和审定财务报表 inlineFragment 丢出一个 Error,以及 inlineAsync 财务报告和审定财务报表 inlineFragmentAsync 以相同的方式拒绝 Error数字 :

• 无效 baseUrl数字 : relative URL without a base: not a url
• 获取失败 : error sending request for url (http://127.0.0.1:9/a.css): http://127.0.0.1:9/a.css
• 缺少本地文件 : Missing stylesheet file: /path/to/missing.css
• cache: { size: 0 }数字 : Cache size must be an integer greater than zero

网络大会

@css-inline/css-inline-wasm 运行 css-inline 在浏览器中。 它的建造与 wasm-bindgen。 。 。 .

<iframe id="output"></iframe>
<script src="https://unpkg.com/@css-inline/css-inline-wasm"></script>
<script>
  // `initWasm` is async: wait for it before calling `inline`
  cssInline.initWasm(fetch('https://unpkg.com/@css-inline/css-inline-wasm/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>

页:1: WASM 模块只通过 Aync 装入远程样式表 inlineAsync 财务报告和审定财务报表 inlineFragmentAsync,无法读取文件系统,没有 cache 选项。 见 其读物 用于 npm 安装,节点.js 设置和 link 标记处理。 上面的 unpkg URL 装入最新发布的; 标出一个版本(@css-inline/[email protected])与您安装的软件包相匹配.

业绩

土著 css-inline 运行速度比 juice 财务报告和审定财务报表 inline-css 关于以下案例。 WASM建筑运行1.50x至1.65x比本土慢.

inline-css gitHub 页面失败, 因为它无法解析其 CSS : Error: Unexpected } (line 193, char 13771)。 。 。 .

输入来自 benchmarks/benchmarks.json:"基本"为: simple,"真实主义-1"和"真实主义-2"是 big_email_1 财务报告和审定财务报表 big_email_2,"GitHub page"为:"GitHub page"是"GitHub Page","GitHub"是"GitHub","GitHub"是"GitHub","GitHub"是"GitHub","GitHub"是"GitHub","GitHub"是"GitHub","GitHub"是"GitHub","GtHub","GtHub"是","GtHub"是" big_page。 。 。 . 比率与 css-inline。 。 。 .

benches/bench.ts 运行套房与 benny (平均时间; css-inline 0.23.2, (中文(简体) ), juice 11.0.3, (中文(简体) ), inline-css 4.0.3),以稳定方式建造 rustc 1.99 关于节点.js v24.18.0(原始内容存档于2012-10-10). Ryzen 9 9950X.

许可证

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