design-system/import-path
Summary
Ensures design system components are imported from specific packages. Works with React, Vue, Svelte, and Web Components.
Configuration
Enable this rule in designlint.config.*. See configuration for details on configuring tokens and rules.
json
{
"rules": {
"design-system/import-path": [
"error",
{ "packages": ["@acme/design-system"], "components": ["Button"] }
]
}
}Options
packages(string[]): allowed package names for design system components.components(string[]): component names that must come from the specified packages.
NOTE
Both packages and components must be configured for the rule to produce diagnostics. If components is empty, no imports are flagged. If packages is empty, all imports of the listed components are reported regardless of source.
This rule is not auto-fixable.
Examples
Invalid
ts
import { Button } from 'other-package';Valid
ts
import { Button } from '@acme/design-system';When Not To Use
If component import sources are not enforced, disable this rule.