@lapidist/design-lint keeps JavaScript, TypeScript and style sheets aligned with your design system. It validates design tokens, enforces configured component/import policies, and offers rich formatting options for continuous integration pipelines. The linter operates solely on the Design Token Interchange Format (DTIF), using the canonical parser and schema as its reference implementation.
Experimental: expect occasional breaking changes and bugs as the project evolves.
@lapidist/design-lint requires Node.js ≥22. The commands below either run the linter once via npx or install it locally, initialise configuration, and lint your src directory. For deeper CLI details, see the Usage guide.
# run without installing
npx @lapidist/design-lint@latest src
# or add to your project
npm install --save-dev @lapidist/design-lint
npx design-lint init
npx design-lint srcSee the Usage guide for the full command reference.
General purpose linters understand code style, not design systems. @lapidist/design-lint bridges that gap by enforcing token usage and component conventions across your codebase.
@lapidist/design-lint flags raw values against your configured token constraints to keep colour, spacing, and typography consistent. For strict token-reference-only enforcement, enable strict modes where supported (for example strictReference on token rules). Learn more in the rule reference.
Run with --fix to apply available rule fixes and tidy up your code. Fix support is rule-specific; not every diagnostic is auto-fixable. See the usage guide for fix options.
Lint JavaScript, TypeScript, CSS, SCSS and Less, including inline styles (string attributes and JSX object literals with literal values) and configured tagged template sources. Dynamic inline style expressions remain unsupported. Indented .sass files currently report parse-error diagnostics.
Extend behaviour with custom rules, formatters, and token path name transforms for your design system.
| Advantage | @lapidist/design-lint | Generic linters |
|---|---|---|
| Design token validation | ✅ | ❌ |
| Token deprecation warnings | ✅ | ❌ |
| Multi-language style + code linting | ✅ |
For more background, read the introductory blog post.
The complete documentation is available under the docs/ directory and on design-lint.lapidist.net. See docs/index.md for the documentation landing page.
| Document | Purpose |
|---|---|
| Usage | Explains CLI flags, watch mode and caching. |
| Configuration | Details tokens, rule levels and plugin activation. |
| Rules | Provides a rule reference grouped by category. |
| Formatters | Describes built-in and custom output formats. |
| CI | Includes examples for GitHub Actions and other providers. |
| API | Shows programmatic usage with TypeScript types. |
| Architecture | Explains how the linter works internally. |
Contributions are welcome. Please read CONTRIBUTING.md and follow the Code of Conduct.