1

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.

Constantin Groß
  • 10,719
  • 4
  • 24
  • 50

1 Answers1

1

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.

jeddy3
  • 3,451
  • 1
  • 12
  • 21
  • Unfortunately, setting `syntax: 'postcss-less'` in the loader options didn't change anything. I'll give the stylelint webpack plugin a try! – Constantin Groß Apr 03 '19 at 16:27
  • Turns out I was just stupid and added the parameter in the wronge place of my webpack config (I have postcss-loader in there twice in order to execute autoprefixer and cssnano after less-loader and the linting before it. Added it to the first instance in the chain and it works like a charm, thanks! – Constantin Groß Apr 03 '19 at 16:34