stylelint-variable-check-teamix

    1.0.13 • Public • Published

    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

    Install

    npm i stylelint-variable-check-teamix

    DownloadsWeekly Downloads

    31

    Version

    1.0.13

    License

    MIT

    Unpacked Size

    47.6 kB

    Total Files

    9

    Last publish

    Collaborators

    • cyris