Vite Plugin for DTL
Seamlessly integrate DTL tokens into your Vite projects with excellent developer experience. Import tokens directly, get type safety, and enjoy hot module replacement.
Installation
Install the plugin as a dev dependency:
Quick Start
1. Configure Vite
Add the plugin to your vite.config.ts:
2. Create Token Files
Create your token files with .tokens extension:
3. Import Tokens
Import tokens directly in your code:
Features
TypeScript Support
Automatically generates TypeScript type definitions for your tokens. Get full autocomplete and type safety in your IDE.
Hot Module Replacement
Changes to token files automatically trigger HMR. See your updates instantly without manual refreshes.
Multiple Formats
Import tokens as JSON for JavaScript/TypeScript, or as CSS for stylesheets. Use query parameters to control the output format.
Zero Configuration
Works out of the box with sensible defaults. Just add the plugin and start importing token files.
Configuration
Usage Examples
React Component
CSS Custom Properties
Styled Components
Type-Safe Access
Monorepo Setup
Shared Tokens Package
In a monorepo, you can share tokens across multiple apps:
Error Handling
The plugin provides clear error messages when token files have issues:
Tip: Errors are shown in the Vite dev server console and will prevent the build from completing until fixed.