Add single-file .bundle.css outputs for Tailwind CLI without npm (#206)

Emit dist/basecoat-{style}.bundle.css for every style pack, plus
dist/basecoat.bundle.css (Vega alias) and dist/basecoat-base.bundle.css.
Each is the uncompiled source with relative @imports inlined, so it can
be downloaded as one file (e.g. from jsDelivr) and imported after
tailwindcss. Compiling a bundle produces byte-identical output to the
split entrypoint.

Document the bundles on the installation page and fix the description
of basecoat-css/all.css, which is an alias for the default stylesheet.

Refs #150
This commit is contained in:
Grug
2026-10-23 09:23:51 +08:00
committed by GitHub
parent 30e5bdcf3a
commit b7d33eee04
2 changed files with 52 additions and 1 deletions
+45
View File
@@ -64,6 +64,37 @@ async function copyDirRecursive(src, dest) {
}
}
// Recursively inlines relative `@import "./...";` lines into a single CSS string.
// Each file is inlined at most once per bundle (tracked in `seen`).
async function inlineCssImports(filePath, seen) {
const resolved = path.resolve(filePath);
if (seen.has(resolved)) return '';
seen.add(resolved);
const source = await fs.readFile(resolved, 'utf-8');
const lines = source.split('\n');
const out = [];
for (const line of lines) {
const match = line.match(/^\s*@import\s+["'](\.{1,2}\/[^"']+)["']\s*;\s*$/);
if (match) {
const inlined = await inlineCssImports(path.join(path.dirname(resolved), match[1]), seen);
if (inlined) out.push(inlined.replace(/\n+$/, ''));
} else if (/^\s*@import\s+["']\.{1,2}\//.test(line)) {
throw new Error(`Unsupported relative @import (with modifiers) in ${resolved}: ${line.trim()}`);
} else {
out.push(line);
}
}
return out.join('\n');
}
// Writes an uncompiled single-file bundle for a dist CSS entrypoint.
async function writeCssBundle(entryPath, outPath, label, version) {
const body = await inlineCssImports(entryPath, new Set());
const header = `/* Basecoat v${version}, ${label}, single-file source. Import after tailwindcss. */\n`;
await fs.writeFile(outPath, `${header}${body.replace(/\n+$/, '')}\n`);
}
// Main build function to prepare the package for publishing.
async function build() {
console.log('Starting build process...');
@@ -155,6 +186,20 @@ async function build() {
await copyDirRecursive(srcCssCompatDir, cssCompatDistDir);
console.log(`Copied split CSS folders to ${cssDistDir}`);
// Create uncompiled single-file bundles for Tailwind users without a package manager.
const { version } = JSON.parse(await fs.readFile(path.join(projectRoot, 'package.json'), 'utf-8'));
for (const style of styles) {
await writeCssBundle(
path.join(cssDistDir, `basecoat-${style}.css`),
path.join(cssDistDir, `basecoat-${style}.bundle.css`),
style,
version,
);
}
await writeCssBundle(path.join(cssDistDir, 'basecoat.css'), path.join(cssDistDir, 'basecoat.bundle.css'), 'vega', version);
await writeCssBundle(path.join(cssDistDir, 'basecoat-base.css'), path.join(cssDistDir, 'basecoat-base.bundle.css'), 'base (no style pack)', version);
console.log(`Generated single-file CSS bundles in ${cssDistDir}`);
await copyDirRecursive(srcNunjucksDir, path.join(cssTemplatesDir, 'nunjucks'));
await copyDirRecursive(srcJinjaDir, path.join(cssTemplatesDir, 'jinja'));
console.log(`Copied template assets to ${cssTemplatesDir}`);