Stylelint выдает ошибки at-rule-* при анализе переменных LESS

Я использую stylelintкак postcss плагин в моей конфигурации webpack. Дальше по цепочке (выполняется после postcss-loader) я также использую less-loader. Все зависимости используются в их самых последних версиях.

webpack.config.js

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

Все работает нормально, линтинг выдает осмысленные ошибки, если они есть. Однако, поскольку я добавил переменную less в нотации camelCase, я также получаю ошибки, связанные с at-rule-*:

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

Кажется, когда-то это была известная проблема, но она должна была быть исправлена ​​в 9.8.0 согласно журналу изменений: https://github.com/stylelint/stylelint/blob/master/CHANGELOG.md#980

  • Исправлено: ложные срабатывания at-rule-* для переменных Less и примесей (#3767).

Это строки в моем файле .less, которые анализируются:

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

Я делаю что-то неправильно?

Я могу избавиться от ошибки случая верблюда, изменив переменную на @fade-anim-duration, но вторая ошибка все еще остается:

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

Я не хочу полностью отключать эти правила только для того, чтобы иметь возможность использовать переменные LESS.


1
907
1

Ответ:

Решено

Поскольку вы используете stylelint в качестве плагина PostCSS, я считаю, что вам нужно будет вручную установить для postcss-загрузчика конфигурация синтаксиса значение postcss-less.

В качестве альтернативы, и я рекомендую этот подход, вы можете использовать stylelint-webpack-плагин и использовать переключение синтаксиса, встроенное в stylelint.