@pantoken/inline-styles 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Danny Wahl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cli.d.mts

@@ -0,0 +1,4 @@
+//#region src/cli.d.ts
+/** Run the HTML inliner CLI. */
+export declare function runCli(args?: string[]): Promise<void>;
+//#endregion

package/dist/cli.mjs

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+import { inlinePantokenHtml } from "./pantoken-html.mjs";
+import { readFile, writeFile } from "node:fs/promises";
+import { pathToFileURL } from "node:url";
+import { parseArgs } from "node:util";
+//#region src/cli.ts
+const THEMES = [
+	"rebrand",
+	"canvas",
+	"canvasHighContrast"
+];
+function parseTheme(value) {
+	if (value === void 0) return void 0;
+	if (THEMES.includes(value)) return value;
+	throw new Error(`Invalid theme "${value}". Choose rebrand, canvas, or canvasHighContrast.`);
+}
+function parseMode(value) {
+	if (value === void 0 || value === "light" || value === "dark") return value;
+	throw new Error(`Invalid mode "${value}". Choose light or dark.`);
+}
+/** Run the HTML inliner CLI. */
+async function runCli(args = process.argv.slice(2)) {
+	const parsed = parseArgs({
+		args,
+		options: {
+			input: {
+				type: "string",
+				short: "i"
+			},
+			output: {
+				type: "string",
+				short: "o"
+			},
+			css: {
+				type: "string",
+				short: "c"
+			},
+			theme: { type: "string" },
+			mode: { type: "string" },
+			prefix: { type: "string" },
+			"custom-color": { type: "string" },
+			help: {
+				type: "boolean",
+				short: "h"
+			}
+		},
+		allowPositionals: false
+	});
+	const { input, output, css, help, theme, mode, prefix } = parsed.values;
+	const customColor = parsed.values["custom-color"];
+	if (help) {
+		process.stdout.write("Usage: pantoken-inline [--theme <name>] [--mode <light|dark>] [--prefix <name>] [--custom-color <hex>] [--css <file>] [--input <file>] [--output <file>]\n");
+		return;
+	}
+	const selectedTheme = parseTheme(theme);
+	const selectedMode = parseMode(mode);
+	const html = input ? await readFile(input, "utf8") : await readStdin();
+	const extraCss = css ? await readFile(css, "utf8") : void 0;
+	const result = inlinePantokenHtml(html, {
+		theme: selectedTheme,
+		mode: selectedMode,
+		prefix,
+		customColor,
+		extraCss
+	});
+	if (output) await writeFile(output, result);
+	else process.stdout.write(result);
+}
+async function readStdin() {
+	const chunks = [];
+	for await (const chunk of process.stdin) chunks.push(Buffer.from(chunk));
+	return Buffer.concat(chunks).toString("utf8");
+}
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) runCli().catch((error) => {
+	process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+	process.exitCode = 1;
+});
+//#endregion
+export { runCli };

package/dist/html.d.mts

@@ -0,0 +1,11 @@
+//#region src/inline-html.d.ts
+/** Options for inlining a stylesheet into an HTML document. */
+export interface InlineHtmlOptions {
+  /** Keep media-query and pseudo-class rules in a style element. */
+  preserveFallbacks?: boolean;
+  /** Resolve custom-property references against declarations in the document. */
+  resolveCSSVariables?: boolean;
+}
+/** Inline CSS rules into matching HTML elements without fetching external resources. */
+export declare function inlineHtml(html: string, css: string, options?: InlineHtmlOptions): string;
+//#endregion

package/dist/html.mjs

@@ -0,0 +1,2 @@
+import { t as inlineHtml } from "./inline-html-Bg3Fqfrb.mjs";
+export { inlineHtml };

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+import { InlineHtmlOptions } from "./html.mjs";
+import { PantokenHtmlOptions } from "./pantoken-html.mjs";
+export type { InlineHtmlOptions, PantokenHtmlOptions };

package/dist/index.mjs

@@ -0,0 +1 @@
+export {};

package/dist/inline-html-Bg3Fqfrb.mjs

@@ -0,0 +1,96 @@
+import juice from "juice";
+import postcss from "postcss";
+//#region src/flatten-scopes.ts
+function splitSelectors(selectors) {
+	const results = [];
+	let start = 0;
+	let parentheses = 0;
+	let brackets = 0;
+	let quote = "";
+	for (let index = 0; index < selectors.length; index += 1) {
+		const character = selectors[index];
+		if (quote) {
+			if (character === "\\") index += 1;
+			else if (character === quote) quote = "";
+			continue;
+		}
+		if (character === "\"" || character === "'") quote = character;
+		else if (character === "(") parentheses += 1;
+		else if (character === ")") parentheses -= 1;
+		else if (character === "[") brackets += 1;
+		else if (character === "]") brackets -= 1;
+		else if (character === "," && parentheses === 0 && brackets === 0) {
+			results.push(selectors.slice(start, index).trim());
+			start = index + 1;
+		}
+	}
+	results.push(selectors.slice(start).trim());
+	return results.filter(Boolean);
+}
+function scopeSelectors(params) {
+	const start = params.indexOf("(");
+	if (start < 0) throw new SyntaxError(`Unsupported @scope parameters: ${params}`);
+	let depth = 0;
+	let end = -1;
+	for (let index = start; index < params.length; index += 1) if (params[index] === "(") depth += 1;
+	else if (params[index] === ")") {
+		depth -= 1;
+		if (depth === 0) {
+			end = index;
+			break;
+		}
+	}
+	if (end < 0 || params.slice(end + 1).trim()) throw new SyntaxError(`Unsupported @scope parameters: ${params}`);
+	const selectors = splitSelectors(params.slice(start + 1, end));
+	if (selectors.length === 0) throw new SyntaxError(`Empty @scope root: ${params}`);
+	return selectors;
+}
+function combineSelectors(parents, children) {
+	return splitSelectors(children).flatMap((child) => parents.map((parent) => child.includes("&") ? child.replaceAll("&", parent) : `${parent} ${child}`)).join(", ");
+}
+function flattenContainer(container, parents) {
+	for (const node of container.nodes?.slice() ?? []) {
+		if (node.type === "atrule" && node.name.toLowerCase() === "scope") {
+			flattenContainer(node, scopeSelectors(node.params));
+			const children = [...node.nodes ?? []];
+			if (children.length) node.replaceWith(...children);
+			else node.remove();
+			continue;
+		}
+		if (node.type === "rule") {
+			const rule = node;
+			if (parents) rule.selector = combineSelectors(parents, rule.selector);
+			flattenContainer(rule, splitSelectors(rule.selector));
+			continue;
+		}
+		if (node.type === "atrule" && node.nodes) {
+			const atRule = node;
+			flattenContainer(atRule, /(?:^|-)(?:webkit-)?keyframes$/iu.test(atRule.name) ? void 0 : parents);
+		}
+	}
+}
+/** Flatten simple CSS `@scope` blocks to selectors Juice can process. */
+function flattenScopes(css) {
+	const root = postcss.parse(css);
+	flattenContainer(root);
+	return root.toString();
+}
+//#endregion
+//#region src/inline-html.ts
+/** Inline CSS rules into matching HTML elements without fetching external resources. */
+function inlineHtml(html, css, options = {}) {
+	const { preserveFallbacks = true, resolveCSSVariables = false } = options;
+	const safeCss = flattenScopes(css).replace(/</gu, "\\3C ");
+	return juice(`<style>${safeCss}</style>${html}`, {
+		preserveContainerQueries: preserveFallbacks,
+		preserveFontFaces: preserveFallbacks,
+		preserveKeyFrames: preserveFallbacks,
+		preserveLayers: preserveFallbacks,
+		preserveMediaQueries: preserveFallbacks,
+		preservePseudos: preserveFallbacks,
+		removeStyleTags: true,
+		resolveCSSVariables
+	});
+}
+//#endregion
+export { inlineHtml as t };

package/dist/pantoken-html.d.mts

@@ -0,0 +1,23 @@
+import { PantokenColorNamespace } from "@pantoken/plugin-custom-theme-colors";
+import { Theme } from "@pantoken/model";
+//#region src/pantoken-html.d.ts
+/** Options for inlining pantoken component styles. */
+export interface PantokenHtmlOptions {
+  /** Token theme to use. Defaults to `rebrand`. */
+  theme?: Theme;
+  /** Color scheme to resolve. Defaults to `light`. */
+  mode?: "light" | "dark";
+  /** Component class prefix. Defaults to `instui`. */
+  prefix?: string | null;
+  /** Add generated rules for this custom brand color. */
+  customColor?: string;
+  /** Apply one of the plugin's shipped or custom color scales. */
+  color?: PantokenColorNamespace;
+  /** Retain pseudo-class and media-query rules in a style element. */
+  preserveFallbacks?: boolean;
+  /** Additional caller-supplied CSS. */
+  extraCss?: string;
+}
+/** Inline pantoken tokens and component CSS into matching HTML elements. */
+export declare function inlinePantokenHtml(html: string, options?: PantokenHtmlOptions): string;
+//#endregion

package/dist/pantoken-html.mjs

@@ -0,0 +1,71 @@
+import { t as inlineHtml } from "./inline-html-Bg3Fqfrb.mjs";
+import { componentsCss } from "@pantoken/components";
+import { load } from "cheerio";
+import { COLOR_KEYS, CUSTOM_COLOR_KEY, customThemeColorsCss } from "@pantoken/plugin-custom-theme-colors";
+import { byTheme } from "@pantoken/tokens";
+import { resolveTokens } from "@pantoken/utils";
+//#region src/pantoken-html.ts
+function modeValue(value, mode) {
+	const start = value.indexOf("light-dark(");
+	if (start < 0) return value;
+	let depth = 1;
+	let comma = -1;
+	let end = -1;
+	for (let index = start + 11; index < value.length; index += 1) if (value[index] === "(") depth += 1;
+	else if (value[index] === ")") {
+		depth -= 1;
+		if (depth === 0) {
+			end = index;
+			break;
+		}
+	} else if (value[index] === "," && depth === 1 && comma < 0) comma = index;
+	if (comma < 0 || end < 0) return value;
+	const selected = mode === "light" ? value.slice(start + 11, comma) : value.slice(comma + 1, end);
+	return `${value.slice(0, start)}${modeValue(selected.trim(), mode)}${value.slice(end + 1)}`;
+}
+function resolvedThemeTokens(theme, mode) {
+	const tokens = byTheme(theme).map((token) => ({
+		...token,
+		value: modeValue(token.value, mode),
+		flatValue: token.flatValue ? modeValue(token.flatValue, mode) : void 0
+	}));
+	return {
+		tokens,
+		resolved: resolveTokens(tokens)
+	};
+}
+function tokenStylesheet(tokens, resolved) {
+	return `:root {\n${tokens.map((token) => `  ${token.name}: ${resolved.get(token.name) ?? token.value};`).join("\n")}\n}`;
+}
+function markColorScope(html, color) {
+	const $ = load(html, {}, false);
+	const documentRoot = $("html").first();
+	(documentRoot.length ? documentRoot : $.root().children().filter((_, node) => node.type === "tag")).attr("data-pantoken-color", color);
+	return $.html();
+}
+/** Inline pantoken tokens and component CSS into matching HTML elements. */
+function inlinePantokenHtml(html, options = {}) {
+	const { theme = "rebrand", mode = "light", prefix = "instui", customColor, color, preserveFallbacks = false, extraCss = "" } = options;
+	const activeColor = color ?? (customColor ? CUSTOM_COLOR_KEY : void 0);
+	if (activeColor && activeColor !== CUSTOM_COLOR_KEY && !COLOR_KEYS.includes(activeColor)) throw new Error(`Unknown pantoken color scale: ${activeColor}`);
+	if (activeColor === CUSTOM_COLOR_KEY && !customColor) throw new Error("The \"custom\" color scale requires a customColor hex value.");
+	const { tokens, resolved } = resolvedThemeTokens(theme, mode);
+	const css = [
+		tokenStylesheet(tokens, resolved),
+		customThemeColorsCss(resolved, {
+			custom: customColor,
+			selector: ""
+		}),
+		componentsCss({
+			theme,
+			prefix
+		}),
+		extraCss
+	].join("\n");
+	return inlineHtml(activeColor ? markColorScope(html, activeColor) : html, css, {
+		resolveCSSVariables: true,
+		preserveFallbacks
+	});
+}
+//#endregion
+export { inlinePantokenHtml };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@pantoken/inline-styles",
+  "version": "0.1.0",
+  "description": "Inline CSS into HTML with pantoken styles.",
+  "homepage": "https://pantoken.app",
+  "bugs": "https://github.com/thedannywahl/pantoken/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thedannywahl/pantoken.git",
+    "directory": "formats/inline-styles"
+  },
+  "bin": {
+    "pantoken-inline": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./cli": "./dist/cli.mjs",
+    "./html": "./dist/html.mjs",
+    "./pantoken-html": "./dist/pantoken-html.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@pantoken/components": "2.0.0",
+    "@pantoken/model": "0.5.0",
+    "@pantoken/plugin-custom-theme-colors": "0.3.1",
+    "@pantoken/tokens": "0.7.0",
+    "@pantoken/utils": "1.2.0",
+    "cheerio": "^1.2.0",
+    "juice": "^12.2.0",
+    "postcss": "^8.5.28"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.3",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.0.0-rc.0",
+    "vite-plus": "1.0.0-rc.0"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "pantoken": {
+    "key": "inlineStyles",
+    "kind": "namespace"
+  },
+  "scripts": {
+    "test": "vp test",
+    "check": "vp check"
+  }
+}