@design-factory/stylelint-plugins

Stylelint plugins for the Design Factory design system.

Installation

npm install --save-dev @design-factory/stylelint-plugins stylelint

Usage

Add the plugin to your stylelint configuration:

export default {
  plugins: ['@design-factory/stylelint-plugins'],
  rules: {
    '@design-factory/df-token-validation': true
  }
};

Rules

@design-factory/df-token-validation

Validates that --df-* CSS custom properties and $df-* Sass variables reference valid Design Factory tokens.

• CSS variables starting with --df- are checked against the list of known tokens. Invalid ones are reported.
• Sass variables starting with $df- (with or without a namespace, e.g. tokens.$df-spacing-1) are also checked by default.
• Non-DF variables (e.g. --my-var, $my-var) are ignored.
• Interpolated (computed) CSS variables (e.g. var(--df-color-#{$variant}-background)) are ignored.

Options

true (primary)

Enables the rule.

{ "@design-factory/df-token-validation": true }

cssVarOnly (default: false)

When true, all $df-* Sass variables are forbidden — even valid ones. Use this to enforce exclusive use of CSS custom properties.

{ "@design-factory/df-token-validation": [true, { "cssVarOnly": true }] }

checkSassVars (default: true)

When false, skips all Sass variable checks entirely. CSS variable validation still applies.

{ "@design-factory/df-token-validation": [true, { "checkSassVars": false }] }

ignoreBootstrapCssVars (default: false)

When true, ignores CSS variables extracted from the installed Bootstrap CSS package and normalized to Design Factory's Bootstrap prefix (--df-). Unknown --df-* variables are still reported.

{ "@design-factory/df-token-validation": [true, { "ignoreBootstrapCssVars": true }] }

ignoreT1ThemeTokens (default: false)

When true, ignores T1 theme tokens for both CSS variables and Sass variables.

{ "@design-factory/df-token-validation": [true, { "ignoreT1ThemeTokens": true }] }

ignore (default: [])

A list of token patterns to ignore. Supports * as a wildcard.

{ "@design-factory/df-token-validation": [true, { "ignore": ["--df-navbar-height", "--df-topnav-drawer-*"] }] }

Examples

Correct:

a {
  color: var(--df-color-neutral-main-default-foreground);
}
a {
  padding: $df-spacing-1;
}
a {
  color: var(--df-body-color);
} /* with ignoreBootstrapCssVars enabled */
a {
  color: var(--df-theme-neutral-0);
} /* with ignoreT1ThemeTokens enabled */
a {
  color: var(--my-custom-var);
}
a {
  padding: $my-custom-var;
}
a {
  background: var(--df-color-#{$variant}-background);
}

Incorrect:

a {
  color: var(--df-invalid-token);
} /* unknown DF token */
a {
  color: var(--df-theme-neutral-0);
} /* internal token */
a {
  padding: $df-nonexistent;
} /* unknown DF Sass var */
a {
  color: var(--df-unknown-bootstrap-token);
} /* unknown DF-prefixed CSS var */