SWAN's Stylelint package is a custom linting plugin built to enforce the Vista Design System's evolving design language across CSS and SCSS files. It helps teams maintain consistency and reduce variations by flagging deviations from SWAN's design principles.
Note: This plugin supports only .css and .scss files. CSS-in-JS and LESS are not supported.
Getting started
Prerequisites
You will need to have Stylelint setup done for your project. Refer to Getting Started with StyleLint if you don't have a setup.
Peer dependencies
This plugin requires the following peer dependencies to be installed in your project:
Note that the minimum required version for SWAN is 3.18.1, as some configurations are shared only from SWAN 3.18.1 and onwards to this plugin.
Environment support
We recommend a minimum Node.js version of 18 for a predictable, stable experience. Versions below it may/may not work.
Installation
Usage
This plugin provides a recommended Stylelint configuration preloaded with SWAN-specific rules. To enable it in your project, simply extend it in your Stylelint config:
Rules
| Rule ID | Description | Default Severity | Docs with examples | Suggestion available |
|---|---|---|---|---|
swan/no-internal-tokens | Disallows usage of internal SWAN tokens like swan-internal-* or swan-comp-*. | error | README | No |
swan/no-deprecated-tokens | Flags usage of deprecated tokens. | error | README | Partially |
swan/no-raw-colors | Flags usage of raw color values like #fff, rgb(), rgba(), hsl(), hsla(). | error | README | No |
swan/no-token-overrides | Disallows re-declaring any SWAN design tokens. | error | README | No |
swan/no-class-overrides | Disallows overriding SWAN classes. | error | README | No |
Overriding a rule
You can override individual rule severities even when using the recommended config.
The default severity levels for rules are selected to align with SWAN's best practices. If you need to modify these severities, please consult with the Design Systems team to ensure consistency and maintainability across projects.
