mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-20 10:06:54 +03:00
Drop Tailwind CLI from the build
Tailwind was wired into the build but the project didn't actually use it: no @tailwind/@theme/@apply directives in source CSS, no utility classes in any HTML or JS, no tailwindcss dependency in package.json, and no HTML page linked to the compiled styles.css output. Bun's HTML loader already handles main.css's @import chain transparently in both `bun run dev` and `bun run build`. Removing the Tailwind step: - Deletes buildTailwindCSS() from scripts/build.js (and the now-unused execSync import) - Removes public/css/styles.css (dead compiled output that nothing read) - Updates CLAUDE.md to drop the "must rebuild Tailwind after CSS edits" instruction Verified: `bun run build` produces the same 104 KB CSS chunk linked from index.html via Bun's HTML loader. No more rebuild step after CSS edits.
This commit is contained in:
@@ -1,17 +1,17 @@
|
||||
# Project Instructions for Claude
|
||||
|
||||
## CSS Build Process
|
||||
## CSS
|
||||
|
||||
**IMPORTANT**: After modifying any CSS files in `public/css/` (especially `workflow.css` or `main.css`), you MUST rebuild the Tailwind CSS:
|
||||
|
||||
```bash
|
||||
bunx @tailwindcss/cli -i public/css/main.css -o public/css/styles.css
|
||||
```
|
||||
Plain hand-written CSS, no Tailwind, no build step. Bun's HTML loader resolves
|
||||
`<link rel="stylesheet">` and inlines `@import` chains automatically for both
|
||||
`bun run dev` and `bun run build`.
|
||||
|
||||
The CSS architecture:
|
||||
- `public/css/main.css` - Main entry point, imports Tailwind and all other CSS files
|
||||
- `public/css/main.css` - Main entry point, imports the partials and defines tokens/reset
|
||||
- `public/css/workflow.css` - Commands section, glass terminal, case studies styles
|
||||
- `public/css/styles.css` - **Compiled output** (do not edit directly)
|
||||
- `public/css/gallery.css`, `skill-demos.css`, `problem-section.css` - section partials
|
||||
|
||||
Edit any of these directly and reload — no rebuild needed.
|
||||
|
||||
## Development Server
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+2
-27
@@ -20,7 +20,6 @@ import { fileURLToPath } from 'url';
|
||||
import { readSourceFiles, readPatterns } from './lib/utils.js';
|
||||
import { createTransformer, PROVIDERS } from './lib/transformers/index.js';
|
||||
import { createAllZips } from './lib/zip.js';
|
||||
import { execSync } from 'child_process';
|
||||
|
||||
/**
|
||||
* Generate authoritative counts from source data and write to public/js/generated/counts.js.
|
||||
@@ -181,30 +180,9 @@ 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
|
||||
* CSS is pre-compiled by Tailwind CLI, then bundled with HTML/JS
|
||||
* Bun's HTML loader resolves <link rel="stylesheet"> and inlines CSS @imports.
|
||||
*/
|
||||
async function buildStaticSite() {
|
||||
const entrypoints = [
|
||||
@@ -441,10 +419,7 @@ function generateCFConfig(buildDir) {
|
||||
async function build() {
|
||||
console.log('🔨 Building cross-provider design skills...\n');
|
||||
|
||||
// Build CSS with Tailwind CLI (handles @theme directive)
|
||||
buildTailwindCSS();
|
||||
|
||||
// Bundle HTML, JS, and compiled CSS with Bun
|
||||
// Bundle HTML, JS, and CSS with Bun
|
||||
await buildStaticSite();
|
||||
|
||||
// Copy root-level static assets that need stable (unhashed) URLs
|
||||
|
||||
Reference in New Issue
Block a user