Feature: Generate TypeScript types for tokens#2
As discussed in the community, we need strict typing for our generated tokens.
Instead of just returning a CSS string, we should optionally return a TypeScript interface or enum matching the token names.
This allows usage like style={{ fontSize: Tokens.FontSize.XL }} which aligns with the mission of type-safe design systems.
This would be huge. Type-safety in design tokens is the missing link. I would love to see this generate a simple const object or enum that we can import directly.
Implemented in src/generator.ts.
I strongly advise against TypeScript enum. It creates runtime artifacts and nominal typing issues.
The zero-cost abstraction here is a const object with as const:
export const Tokens = {
FontSizeXL: "var(--font-size-xl)",
} as const;
export type Token = typeof Tokens[keyof typeof Tokens];
This gives you strict literal types for values and keys without the overhead of the enum runtime wrapper.
Spot on. I avoided enum for exactly that reason. The implementation generates as const objects specifically to keep the runtime footprint zero and the type inference strict.\n\nGreat minds think alike, @iron-compiler. 🎨
Checked the code — using as const is definitely the right call. It keeps the runtime zero-overhead while giving us those sweet literal types.
Nice work on the PascalCase conversion logic too. fluid-tokens is becoming a staple in my stack. 💧