css-inline

@css-inline/css-inline-wasm

css-inline inlines CSS into HTML style attributes. This package is its WebAssembly build for browsers and bundlers.

Installation

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

The package ships TypeScript types (index.d.ts).

Usage

With a bundler or ESM:

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>

In Node.js, pass the file contents:

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"))));

From a CDN, the script defines a global cssInline. Pin the version in both URLs to the release you want; unpinned URLs load the latest:

<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): load the .wasm module. Accepts a URL, Response, BufferSource, WebAssembly.Module or a promise of one.
• inline(html, options?)
• inlineFragment(html, css, options?): css is a CSS string.
• version()

Options match the Node.js package except cache, which WASM lacks: inlineStyleTags, keepStyleTags, keepLinkTags, keepAtRules, minifyCss, baseUrl, loadRemoteStylesheets, extraCss, preallocateNodeCapacity, removeInlinedSelectors, applyWidthAttributes, applyHeightAttributes, resolveCssVariables.

Playground

Try css-inline in the WebAssembly-powered playground.

Remote stylesheets

inlineAsync and inlineFragmentAsync return a Promise and load remote link stylesheets with fetch. In browsers, the server hosting a stylesheet must allow cross-origin requests (CORS).

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

Restrictions

The WASM module cannot read the filesystem, and the synchronous inline and inlineFragment cannot load any link stylesheet. They throw a string (not an Error):

• Remote URL: Loading remote stylesheets is not supported on WASM: <url>. Use inlineAsync instead.
• file:// or a relative href without an http(s) baseUrl: Loading local files is not supported on WASM: <url>

inlineAsync and inlineFragmentAsync throw the same local file error, and <error>: <url> when a fetch fails.

To skip link tags, either:

• pass loadRemoteStylesheets: false to skip every link tag, remote and local, or
• add data-css-inline="ignore" to the link tag.

Add the skipped CSS through extraCss if you need it.

Other errors are strings too, e.g. an invalid baseUrl throws relative URL without a base: <value>.

License

Licensed under the MIT license.