How to use eslint-config-stylelint

css:

.fontSize11{ font-size: calc(var(--font-scale, 1 ) * 11px); }

In our project, we are using the above format for font-size in CSS. Some people in our team are not following the above format. To keep consistency someone suggested me to use eslint-config-stylelint to create a custom rule so it can be caught during development. I don't have experience with build tools and linters. I'll appreciate if someone can help me with it. Thanks

Solution

You can use Stylelint's built-in declaration-property-value-allowed-list rule to enforce a specific pattern for the value of a property, rather than create a custom rule.

By using an regular expression, you can ensure that the value of the font-size property matches the calc(var(--font-size, 1) * XXpx) pattern:

{
  "rules": {
    "declaration-property-value-allowed-list": {
      "font-size": ["/calc\\(var\\(--font-scale, 1\\) \\* \\d+px\\)/"]
    }
  }
}

(There may be a cleaner way to write that regular expression.)

If you're just getting started with Stylelint, you'll want to extend official standard config in your config. Your complete Stylelint configuration should look like:

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "declaration-property-value-allowed-list": {
      "font-size": ["/calc\\(var\\(--font-scale, 1\\) \\* \\d+px\\)/"]
    }
  }
}

To keep consistency someone suggested me to use eslint-config-stylelint to create a custom rule

Stylelint and ESLint are different tools. You should use:

Stylelint to lint your CSS
ESLint to lint your JavaScript

(eslint-config-stylelint is an internal package used by the Stylelint team to lint their JavaScript code. It's not intended for public consumption.)