@via-ds/stylelint-plugin

Stylelint plugin for the Via Design System.

Installation

pnpm add -D @via-ds/stylelint-plugin stylelint

Usage

Using the Recommended Config

The easiest way to get started is to extend the recommended configuration:

// stylelint.config.mjs
export default {
  extends: ['@via-ds/stylelint-plugin/recommended'],
};

This enables all recommended rules with sensible defaults.

Manual Configuration

You can also configure the plugin manually:

// stylelint.config.mjs
export default {
  plugins: ['@via-ds/stylelint-plugin'],
  rules: {
    'via/example-rule': true,
  },
};

Rules

| Rule | Description | | ------------------ | ------------------------------------------------------- | | via/example-rule | Example rule that reports selectors containing "foobar" |

Creating New Rules

1. Create a new file in src/rules/ (using example-rule.ts as a template)
2. Register the rule in src/rules/index.ts

The createRule helper provides walk callbacks for different CSS node types:

• walkRules - Selectors (.class, #id)
• walkDecls - Declarations (property: value)
• walkAtRules - At-rules (@media, @import)
• walkComments - CSS comments

Each callback receives the node and a context with messages, report(), and fix.

For more, see the Stylelint Plugins documentation