40 lines
2.2 KiB
JavaScript
40 lines
2.2 KiB
JavaScript
// Derives the two files the converter reads that cannot be the site's own:
|
|
// the design-system stylesheet, and the guideline copy of the brief.
|
|
//
|
|
// The stylesheet comes from src/styles/base.css. Two things have to change, and nothing else:
|
|
// 1. `@import './tokens.css'` is replaced by the token file's contents. The bundle is
|
|
// copied verbatim, so an @import pointing outside it would dangle and every
|
|
// var(--token) in the sheet would resolve to nothing.
|
|
// 2. `url('/fonts/...')` is absolute because the site serves fonts from the web root;
|
|
// rewritten relative to this directory so the converter can resolve and copy them.
|
|
//
|
|
// The guideline copy is docs/design-brief.md, a verbatim copy of CLAUDE.md. The converter
|
|
// names each uploaded guideline after its source file, and claude.ai/design refuses any
|
|
// path called CLAUDE.md, so the brief cannot be shipped under its own name.
|
|
//
|
|
// Run it before the converter: node .design-sync/make-ds-styles.mjs
|
|
import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
|
|
import { dirname, join } from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const root = join(dirname(fileURLToPath(import.meta.url)), '..');
|
|
const tokens = readFileSync(join(root, 'src/styles/tokens.css'), 'utf8');
|
|
const base = readFileSync(join(root, 'src/styles/base.css'), 'utf8');
|
|
|
|
const importRx = /@import\s+['"]\.\/tokens\.css['"]\s*;/;
|
|
if (!importRx.test(base)) throw new Error("src/styles/base.css no longer @imports './tokens.css' - update this script");
|
|
|
|
const out = base
|
|
.replace(importRx, `/* tokens.css inlined by .design-sync/make-ds-styles.mjs */\n${tokens.trim()}`)
|
|
.replace(/url\('\/fonts\//g, "url('../public/fonts/");
|
|
|
|
writeFileSync(join(root, '.design-sync/ds-styles.css'), out);
|
|
console.log(`wrote .design-sync/ds-styles.css (${out.length} bytes, tokens inlined)`);
|
|
|
|
const brief = readFileSync(join(root, 'CLAUDE.md'), 'utf8');
|
|
const banner =
|
|
'<!-- Generated from CLAUDE.md by .design-sync/make-ds-styles.mjs. Edit CLAUDE.md, not this file. -->\n\n';
|
|
mkdirSync(join(root, 'docs'), { recursive: true });
|
|
writeFileSync(join(root, 'docs/design-brief.md'), banner + brief);
|
|
console.log(`wrote docs/design-brief.md (${brief.length} bytes, copied from CLAUDE.md)`);
|