[SOLVED] stylelint throws at-rule-* errors when parsing LESS variables

stylelint throws at-rule-* errors when parsing LESS variables

I'm using stylelintas a postcss plugin in my webpack config. Further up the chain (so being executed after the postcss-loader), I'm also using less-loader. All dependencies are used in their most current versions.

webpack.config.js

...
'less-loader',
{
    loader: 'postcss-loader',
    options: {
        plugins: [
            require('stylelint')({
                "extends": "stylelint-config-standard"
            })
        ]
    }
}
...

Everything works fine, the linting throws meaningful errors if there are any. However, since I added a less variable in camelCase notation, I get at-rule-* related errors as well:

(1:1) Expected "fadeAnimDuration:" to be "fadeanimduration:" (at-rule-name-case)
...
(1:1) Unexpected unknown at-rule "@fadeAnimDuration:" (at-rule-no-unknown)

It seems that this was once a known issue but should have been fixed with 9.8.0 according to the changelog: https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md#980

Fixed: at-rule-* false positives for Less variables and mixins (#3767).

These are the lines in my .less file being linted:

@fadeAnimDuration: 1480ms;
...
some selector {
    transition: background-color @fadeAnimDuration, color @fadeAnimDuration;
}

Am I doing something wrong?

I can get rid of the camel case error changing the variable to @fade-anim-duration, but the second error still remains:

(1:1) Unexpected unknown at-rule "@fade-anim-duration:" (at-rule-no-unknown)

I don't want to have to disable those rules completely just to be able to use LESS variables.

Solution

As you're using stylelint as a PostCSS plugin, I believe you'll need to manually set the postcss-loader syntax configuration to postcss-less.

Alternatively, and I recommend this approach, you can use stylelint-webpack-plugin and take advantage of the syntax switching built into stylelint.