stylelint-variable-check-teamix

A stylelint plugin based on sh-waqar/stylelint-declaration-use-variable that check the use of scss, less or custom css variable on declaration. Either used with '$', map-get(), '@' or 'var(--var-name)'. If you use Fusion on your projects, it can help you fix variable problem like:

/* Before */
color: #fff;
/* After */
color: var(--color-white, #fff);

Quick Start

Installation

npm install stylelint-variable-check-teamix
npm install -g stylelint # for execing stylelint scripts

Settings

Add it to your stylelint config plugins array, then add teamix-lint/css-variable-check to your rules, specifying the property for which you want to check the usage of variable.

Like so:

// .stylelintrc
{
  "plugins": [
    "stylelint-variable-check-teamix"
  ],
  "rules": {
    // ...
    "teamix-lint/css-variable-check": "/color/",
    // ...
  }
}

And add settings on package.json to enable auto fix according to fusion css variables.

Like so:

// package.json
"teamixUIPkg": "@teamix/ui",
"teamixUIPrefix": "aone-", // "next-" as default
"cssVarFiles": [
  "style/aone-var.css"
]

Scan

stylelint src/**/*.scss

Fix

stylelint src/**/*.scss --fix

Rule settings

Multiple properties

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

// .stylelintrc
"rules": {
  // ...
  "teamix-lint/css-variable-check": [["/color/", "z-index", "font-size"]],
  // ...
}

Regex support

Passing a regex will watch the variable usage for all matching properties. This rule will match all CSS properties while ignoring Sass and Less variables.

// .stylelintrc
"rules": {
  // ...
  "teamix-lint/css-variable-check": "/color/",
  // ...
}

Options

Passing ignoreValues option, you can accpet values which are exact same string or matched by Regex.

Passing HSBFixStep option, you can custom the calculation interval of color value correction.

Passing ignoreFixValues option, you can disable values that you don't want to auto fix. (e.g. the light gray color becomes light red after auto fix, but you just want it to be another standard light gray, you can disable fixing it to light red color by setting ignoreFixValues: ['--color-error-1'], which '--color-error-1' matches light red.)

// .stylelintrc
"rules": {
  // ...
  "teamix-lint/css-variable-check": [["/color/", "font-size", { 
    ignoreValues: ["inherit", "unset", "none", "/rgba/"],
    HSBFixStep: 10 // 10 as default (which designer suggests)
    ignoreFixValues: ['--color-error-1'] // if fix result includes '--color-error-1', it will not replace it
  }]],
  // ...
}

TODO

AutoFix

[x] auto fix for color
[x] auto fix for nearby color
[ ] auto fix for corner
[ ] auto fix for font
[ ] auto fix for shadow
[ ] auto fix for size
[ ] auto fix for line