Choosing Your DTL Workflow
DTL offers two main workflows for integrating tokens into your project. Use this guide to determine which approach fits your needs.
Quick Decision Tree
I need to integrate DTL tokens into my project
Will tokens be shared across multiple projects?
Yes → Continue to Question 2
Shared tokens may need CLI precompile if projects use different build tools.
No → Continue to Question 3
Single project can use either workflow based on build tool.
Do all projects use Vite?
Yes → Use Vite Plugin
Vite plugin works great in monorepos. Each app can import shared tokens directly.
No → Use CLI (Precompile)
Precompile tokens once, then import generated files in any project (Vite, Webpack, Next.js, etc.).
Are you using Vite?
Yes → Use Vite Plugin
Best for: React, Vue, Svelte, or any Vite-based project. Get HMR, type generation, and seamless integration.
No → Continue to Question 4
Do you need build-time compilation?
Yes → Use CLI (Precompile)
Best for: Static sites, CI/CD pipelines, or when you need pre-generated files.
No → Continue to Question 5
Do you need TypeScript types and HMR?
Yes → Consider migrating to Vite
Vite plugin provides these features out of the box.
No → Use CLI (Precompile)
Simple, straightforward build-time compilation.
Workflow Comparison
| Feature | Vite Plugin | CLI (Precompile) |
|---|---|---|
| Build Tool | Vite only | Any build tool |
| Hot Module Replacement | ||
| TypeScript Types | ||
| Direct Import | ||
| CI/CD Integration | ||
| Static Site Generation | ||
| Zero Config | ||
| Pre-generated Files | ||
| Works with Webpack | ||
| Works with Next.js (non-Vite) | ||
| Multi-project token sharing | (if all use Vite) | |
| Mixed build tools support | ||
| Monorepo friendly | (Vite-only) |
When to Use Each Workflow
Vite Plugin
✅ Best For:
- Vite-based projects (React, Vue, Svelte, etc.)
- Projects needing TypeScript type safety
- Development with Hot Module Replacement
- Direct token file imports in code
- Monorepos with shared tokens (if all apps use Vite)
⚡ Advantages:
- • Zero configuration needed
- • Automatic type generation
- • Instant HMR on token changes
- • Import tokens directly as modules
- • Works seamlessly with Vite's dev server
CLI (Precompile)
✅ Best For:
- Non-Vite build tools (Webpack, Rollup, etc.)
- CI/CD pipelines and build scripts
- Static site generation (SSG)
- Projects needing pre-generated files
- Next.js (without Vite) or other frameworks
- Shared tokens across multiple projects with different build tools
- Monorepos with mixed build tools (Vite + Webpack, etc.)
⚡ Advantages:
- • Works with any build tool
- • Pre-generated static files
- • Simple integration in build scripts
- • No runtime compilation overhead
- • Easy to version control output files
Quick Examples
Vite Plugin
CLI (Precompile)
Migration Path
From CLI to Vite Plugin
If you're currently using the CLI workflow and want to migrate to Vite:
- Install the Vite plugin:
npm install -D @tokenslang/vite-plugin-dtl - Add the plugin to your
vite.config.ts - Replace static imports with direct token file imports
- Remove CLI compilation from your build scripts
- Enjoy HMR and automatic type generation!
From Vite Plugin to CLI
If you need to switch from Vite plugin to CLI (e.g., migrating away from Vite):
- Add CLI compilation step to your build process
- Update imports to point to generated files instead of token files
- Remove the Vite plugin from your config
- Ensure generated files are included in your build output