A stylelint plugin that check the use of scss, less or custom css variable on declaration. Either used with '$', map-get(), '@' or 'var(--var-name)'.

npm install stylelint-declaration-use-variable

Be warned: v0.2.0+ is only compatible with stylelint v3+. For earlier version of stylelint, use earlier versions of this.

Preprocessers like scss, less uses variables to make the code clean, maintainable and reusable. But since developers are lazy they might get a chance to miss the use of variables in styling code and that kinda sucks.

$some-cool-color: #efefef;

.foo {
    display: inline-block;
    text-align: center;
    color: #efefef; // Wait a min! there is a variable for that.
}

Scss variables using '$' notation and map-get are supported

// Simple variables
$some-cool-color: #efefef;
$some-integer: 123;
$some-pixels: 4px;

color: $some-cool-color;

// Using map-get
$cool-colors: (
    blue: #3ea1ec,
    red: #eb5745,
);

color: map-get($cool-colors, blue);

Add it to your stylelint config plugins array, then add "declaration-use-variable" to your rules, specifying the property for which you want to check the usage of variable.

Like so:

// .stylelintrc
{
  "plugins": [
    "stylelint-declaration-use-variable"
  ],
  "rules": {
    // ...
    "declaration-use-variable": "color",
    // ...
  }
}

Multiple properties can be watched by passing them inside array. Regex can also be used inside arrays.

// .stylelintrc
"rules": {
  // ...
  "declaration-use-variable": ["/color/", "z-index", "font-size"],
  // ...
}

Passing a regex will watch the variable usage for all matching properties.

// .stylelintrc
"rules": {
  // ...
  "declaration-use-variable": "/color/",
  // ...
}