import { readFile, writeFile } from 'node:fs/promises';

/**
 * The design classes are scoped to the body class, not to #main: the header and the footer are
 * block documents of their own and live outside #main, so a #main prefix left every design token
 * in them without effect - a row in the header ignored its column count.
 */
export function designCss(tokens) {
  const rules = device => Object.entries(tokens).flatMap(([key, token]) => Object.entries(token.values).map(([value, [, css]]) => `.kant .d-${device}-${key}-${value}{${css}}`)).join('\n');
  return `/* Generated from design-tokens.json by npm run build:design. */\n${rules('desktop')}\n@media(max-width:1024px){\n${rules('tablet')}\n}\n@media(max-width:767px){\n${rules('mobile')}\n}\n`;
}
if (process.argv[1]?.replaceAll('\\', '/').endsWith('/build-design.mjs')) {
  const tokens = JSON.parse(await readFile(new URL('../public/assets/design-tokens.json', import.meta.url), 'utf8'));
  await writeFile(new URL('../public/assets/design.css', import.meta.url), designCss(tokens));
}