Dialtone Stylelint plugin

Check stylesheets for deprecated Dialtone tokens and CSS patterns.

@dialpad/stylelint-plugin-dialtone checks stylesheets for deprecated Dialtone tokens and CSS patterns that work against the design system.

The plugin does not provide a recommended preset. Enable each rule explicitly so the configuration reflects what your project intends to enforce.

Installation

Install the plugin alongside Stylelint:

npm install --save-dev stylelint @dialpad/stylelint-plugin-dialtone

Configuration

Add the plugin to stylelint.config.mjs, then configure its rules:

export default {
  plugins: ["@dialpad/stylelint-plugin-dialtone"],
  rules: {
    "@dialpad/stylelint-plugin-dialtone/no-deprecated-size-tokens": true,
    "@dialpad/stylelint-plugin-dialtone/no-deprecated-success-tokens": true,
    "@dialpad/stylelint-plugin-dialtone/no-base-color-tokens": true,
  },
};

Use null to turn off a rule inherited from a shared configuration.

Rules

Rule What it checks Autofix
no-base-color-tokens Detects raw base-color tokens that should use a semantic color token. No
no-deprecated-size-tokens Detects deprecated size and space tokens that should use layout or spacing tokens. No
no-deprecated-space-tokens Detects legacy space tokens that use the older space-to-size migration path. No
no-deprecated-success-tokens Detects success color tokens that have been renamed to positive. No
no-mixins Detects Less mixins. No
recommend-font-style-tokens Detects separate font declarations that should use a composed font token. No
use-dialtone-tokens Detects pixel and rem values that should use Dialtone tokens. No

Do not enable no-deprecated-space-tokens and no-deprecated-size-tokens together. Both report --dt-space-*, but the older space rule points to the intermediate --dt-size-* tokens. Use no-deprecated-size-tokens for the current migration to --dt-spacing-* and --dt-layout-*.

Logical properties

The package also includes stylelint-use-logical. Its csstools/use-logical rule reports physical properties and values that have logical equivalents.

Enable it from the same Stylelint configuration:

export default {
  plugins: ["@dialpad/stylelint-plugin-dialtone"],
  rules: {
    "csstools/use-logical": true,
  },
};

It is an upstream rule bundled by the package, not a Dialtone-specific rule. Refer to the upstream documentation for its options and reported patterns.

Run Stylelint

Run Stylelint against the stylesheet types used by your project:

npx stylelint "**/*.{css,less,vue}"

Projects that lint Less or Vue style blocks may need a Stylelint-compatible custom syntax. Keep that setup in the consuming project's Stylelint configuration.

Dialtone Stylelint plugin documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope