src/generator.ts1.7 KB · typescript
import { FluidScale } from "./scale";
/**
* Converts a FluidScale object into a CSS :root block string.
* @param scale The generated scale object
* @param prefix The CSS variable prefix (e.g., 'font-size')
*/
export function toCssVariables(scale: FluidScale, prefix: string = "size"): string {
const vars = Object.entries(scale)
.map(([key, value]) => ` --${prefix}-${key}: ${value};`)
.join("\n");
return `:root {\n${vars}\n}`;
}
/**
* Generates a TypeScript const object and type mapping for the tokens.
* Keys are PascalCased (e.g., 'up-1' -> 'Up1').
* Values are CSS variable references (e.g., 'var(--size-up-1)').
*
* @param scale The generated scale object
* @param name The name of the exported const/type (default: 'Tokens')
* @param prefix The CSS variable prefix matching the CSS generation (default: 'size')
*/
export function toTypeScript(scale: FluidScale, name: string = "Tokens", prefix: string = "size"): string {
const entries = Object.keys(scale).map(key => {
// Convert kebab-case or snake_case to PascalCase
const propName = key.split(/[-_]/)
.map(part => part.charAt(0).toUpperCase() + part.slice(1))
.join("_") // Keep numbers separated if needed, but usually Up1 is fine. Wait, let's just join empty.
.replace(/_/g, ""); // Actually, up-1 -> Up1 is better.
// Simple PascalCase: up-1 -> Up1
const pascalName = key.split("-")
.map(s => s.charAt(0).toUpperCase() + s.slice(1))
.join("");
return ` ${pascalName}: "var(--${prefix}-${key})",`;
}).join("\n");
return `export const ${name} = {\n${entries}\n} as const;\n\nexport type ${name} = typeof ${name}[keyof typeof ${name}];`;
}