stylelint-plugin-check-vars

A Stylelint plugin to check CSS custom properties (variables).

Installation

npm install stylelint-plugin-check-vars --save-dev
# or
pnpm add stylelint-plugin-check-vars -D

Usage

Add the plugin to your Stylelint configuration:

// stylelint.config.js
export default {
  plugins: ['stylelint-plugin-check-vars'],
  rules: {
    'check-vars/no-undefined-vars': [true, {
      definitionFiles: ['src/styles/variables.css']
    }],
    'check-vars/no-unused-vars': true,
    'check-vars/naming-pattern': [true, {
      prefix: '--app-'
    }]
  }
};

Rules

check-vars/no-undefined-vars

Disallow usage of undefined CSS variables.

/* variables.css */
:root {
  --primary-color: blue;
}

/* component.css */
.button {
  color: var(--primary-color);    /* OK */
  color: var(--undefined-color);  /* Error: Undefined CSS variable */
}

Options:

• definitionFiles (required): Glob pattern(s) for files containing :root variable definitions
• ignoreFallback: Ignore variables with fallback values (default: false)
• ignorePattern: Regex pattern to ignore certain variable names

check-vars/no-unused-vars

Disallow unused CSS variables defined in :root.

:root {
  --used-color: blue;    /* OK - used below */
  --unused-color: red;   /* Error: Unused CSS variable */
}

.button {
  color: var(--used-color);
}

Options:

• usageFiles: Glob pattern(s) for files to search for variable usage
• ignorePattern: Regex pattern to ignore certain variable names

check-vars/naming-pattern

Enforce naming conventions for CSS variables.

/* With prefix: '--app-' */
:root {
  --app-primary: blue;  /* OK */
  --primary: blue;      /* Error: Must start with prefix "--app-" */
}

Options:

• prefix: Required prefix for variable names
• pattern: Regex pattern that variable names must match

License

MIT