skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-20 01:56:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Use Tailwind CLI for CSS compilation before Bun bundler

Browse Source 
Bun's native CSS bundler doesn't support Tailwind v4's @theme directive.
Solution:
1. Run Tailwind CLI first to compile main.css → styles.css
2. Reference styles.css in HTML
3. Bun HTML bundler then bundles everything together

Build output:
- JS: 82 KB (minified, bundled)
- CSS: 63 KB (minified, includes all custom styles)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2025-12-16 14:42:27 -08:00
co-authored by Claude Opus 4.5
parent 4cb8055040
commit 1492717504
3 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -4,6 +4,7 @@ node_modules/
# Generated files
dist/*.zip
build/
public/css/styles.css
# Build artifacts
*.log
public/index.html
+1 -1
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="tailwindcss">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body class="min-h-screen overflow-x-hidden leading-relaxed">
scripts/build.js
+37 -6
View File
@@ -47,15 +47,36 @@ const __dirname = path.dirname(__filename);
const ROOT_DIR = path.resolve(__dirname, '..');
const DIST_DIR = path.join(ROOT_DIR, 'dist');
/**
* Build Tailwind CSS using the CLI
* Tailwind v4 uses @theme directive which Bun's CSS bundler doesn't understand
*/
function buildTailwindCSS() {
const inputFile = path.join(ROOT_DIR, 'public', 'css', 'main.css');
const outputFile = path.join(ROOT_DIR, 'public', 'css', 'styles.css');
console.log('🎨 Building Tailwind CSS...');
try {
execSync(`bunx @tailwindcss/cli -i "${inputFile}" -o "${outputFile}" --minify`, {
cwd: ROOT_DIR,
stdio: 'inherit'
});
console.log('✓ Tailwind CSS compiled\n');
} catch (error) {
console.error('Failed to build Tailwind CSS:', error.message);
process.exit(1);
}
}
/**
* Build static site using Bun's HTML bundler
* Automatically bundles JS, CSS (with Tailwind), and assets
* CSS is pre-compiled by Tailwind CLI, then bundled with HTML/JS
*/
async function buildStaticSite() {
const entrypoint = path.join(ROOT_DIR, 'public', 'index.html');
const outdir = path.join(ROOT_DIR, 'build');
console.log('🌐 Building static site with Bun...');
console.log('📦 Building static site with Bun...');
try {
const result = await Bun.build({
@@ -63,14 +84,15 @@ async function buildStaticSite() {
outdir: outdir,
minify: true,
sourcemap: 'linked',
// Tailwind is handled automatically via bun-plugin-tailwind
// when using <link rel="stylesheet" href="tailwindcss" />
});
if (!result.success) {
console.error('Build failed:');
for (const log of result.logs) {
console.error(log);
console.error(log.message || log);
if (log.position) {
console.error(` at ${log.position.file}:${log.position.line}:${log.position.column}`);
}
}
process.exit(1);
}
@@ -89,6 +111,12 @@ async function buildStaticSite() {
return result;
} catch (error) {
console.error('Failed to build static site:', error.message);
console.error(error.stack);
if (error.logs) {
for (const log of error.logs) {
console.error(log.message || log);
}
}
process.exit(1);
}
}
@@ -99,7 +127,10 @@ async function buildStaticSite() {
async function build() {
console.log('🔨 Building cross-provider design plugins...\n');
// Build static site (HTML, JS, CSS with Tailwind)
// Build CSS with Tailwind CLI (handles @theme directive)
buildTailwindCSS();
// Bundle HTML, JS, and compiled CSS with Bun
await buildStaticSite();
// Read source files