Search code examples
postcssstylelint

How to specify a format or pattern for SCSS variable names using stylelint?


I use postcss-scss with stylelint on my .scss files and I'm trying to figure out how to enforce a rule so that all my variables follow the same naming convention throughout my project.

Is there a way to specify a format or pattern (i.e. a regex) for variable names? I am aware of https://github.com/davidtheclark/stylelint-selector-bem-pattern for selectors but I could not find anything about variable names.

I'm thinking something along the lines of https://github.com/sasstools/sass-lint/pull/257 but that would be compatible with stylelint rules.

For example I may want my variable names to always be camelCase, in which case:

// this wouldn't be correct
$my-variable: #000;

// but this would be correct
$myVariable: #000;

Solution

  • Currently there is no rule that does this. That's because stylelint itself does not contain rules that are preprocessor-specific.

    This is why stylelint has support for plugins. You can write a plugin that enforces a pattern for your SCSS variables and include it in your stylelint configuration.

    If you want to ping some other people who are interested in writing SCSS-specific stylelint plugins, have a look at the https://github.com/kristerkari/stylelint-scss repo, whose ultimate goal is to create a collection of just that.