Token CSS

Overview

Token CSS is an open-source tool that integrates design tokens directly into CSS files and <style> blocks. You define tokens in a JSON file, then write token names as values in your CSS — the tool automatically converts them to CSS custom properties (variables) at build time.

It is conceptually inspired by Tailwind, Styled System, and CSS-in-JS libraries but differs by working with standard .css files and <style> tags. A companion Visual Studio Code extension adds Intellisense, hover previews, and semantic token highlighting for CSS and Astro files. The project is released under the MIT License and is in active development.

Key Benefits

• Write token names like md, primary, or full as CSS values and have them automatically compiled to var(--size-md), var(--color-primary), and var(--size-full).
• Keeps you inside standard .css files and <style> blocks instead of requiring a CSS-in-JS framework.
• VS Code extension provides Intellisense autocompletion, hover info, and semantic token highlighting for your tokenized CSS.
• Tokens are defined in a plain JSON file, making them interoperable with other tools in your design system pipeline.
• Works with Astro files in addition to plain CSS, broadening its usefulness for modern frameworks.

How It Works

You create a JSON file that defines your design tokens — sizes, colors, radii, and so on. In your CSS (or Astro template), you use the token names directly as property values: padding: md instead of a hardcoded value. Token CSS then processes your files and replaces every token name with the corresponding CSS custom property reference, generating output like var(--size-md). The VS Code extension activates as you type, showing you the resolved values.

Use Cases

• Design-system engineers building a token-driven CSS framework who want to keep their styles in vanilla CSS rather than adopting a CSS-in-JS library.
• Astro developers who want design-token enforcement inside component <style> blocks without adding a CSS-in-JS runtime.
• Open-source contributors interested in tooling that bridges design tokens and standard CSS, since the project is actively seeking GitHub issues and community involvement.

Why Choose This Product

Token CSS is best suited for developers who want design-token constraints without leaving vanilla CSS or adopting a CSS-in-JS runtime. The project is currently a work-in-progress — bugs, missing features, and breaking changes are expected, and no stable release has been announced. It is not ready for production use without careful evaluation.