Style lint ignoring less variables

userpvrI 0
Viewed 22

I've decided to switch from css to less recently, so I want to setup some listing mechanism via style-lint and postcss-less. And my current config looks like this:

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-less"
}

However this config does not check variables, something like this:

@projname-global-color-brand-main: #0000000000000000;

passes every checks, while my css-setup (used css-vars + same stylelnt config without "customSyntax") fails here. I can also do something like this:

.my-class {
  color: #00000000000; // IT FAILS HERE, AS EXPECTED
}
.my-second-class {
  color: @projname-global-color-brand-main; // SKIPPED AGAIN
}

So, the question is why this setup is skipping less variables from being checked?

stylelint less postcss css
1 Answers

Stylelint's built-in rules are geared towards standard CSS. They will generally ignore non-standard constructs, such as Less variables.

People do create community plugins to lint non-standard constructs. However, people seldom use Less these days and very few Stylelint plugins have been written for it. Most developers seem to prefer writing standard CSS as many new features have been added to the language over the past few years, including custom properties (aka CSS variables).

If you wish to pursue using Less, you can write your own Stylelint plugins to lint the non-standard constructs introduced by the language.

jeddy30
Related