stylelint: Add function-no-unknown
What is the problem you’re trying to solve?
I’m looking for a list of known CSS functions in order to catch typo errors.
see https://github.com/stylelint-scss/stylelint-scss/issues/581#issuecomment-1017484418
What solution would you like to see?
- Stylelint could export a list of known CSS functions that could be imported inside stylelint.config.js
- Stylelint could provide a rule
function-no-unknownwhich throws errors for unknown functions
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 16 (10 by maintainers)
Commits related to this issue
- feat: add function-no-unknown (#5853) — committed to gnuletik/stylelint by gnuletik 2 years ago
- feat: add function-no-unknown (#5853) — committed to gnuletik/stylelint by gnuletik 2 years ago
Yes, for example, see the demo.
Should we consider extending this lint rule to be able to include all
sassfunctions as well? 🤔Yeah, that plugin is amazing. It has full syntax validation for declaration property/value pairs and at-rules. You may find you need to turn off most of Stylelint’s built-in
*-no-unknownrules when using it.Okay, let’s go with:
function-no-unknowntrueUnexpected unknown function "${function}""This rule considers functions defined in the CSS Specificationsto be known.
This rule ignores double-dashed custom functions, e.g.
--custom-function()"I’ve labelled the issue as ready to implement. Please consider contributing if you have time.
There are steps on how to add a new rule in the Developer guide.
@gnuletik Thanks for the request.
The
stylelint-csstree-validatorplugin will catch this for you.Having said that, spotting unknown functions is a simple use case that users who don’t wish to use the CSSTree validator would benefit from. There is also a lot of innovation happening in the CSS parser world and we may use a different parser (or a combination of parsers) in the future, which may have better syntax validation. While we wait for the dust to settle on those innovations, we can add a
function-no-unknownrule.We can use the
css-functions-listpackage.The rule should ignore doubled dashed custom functions by default, e.g.
--custom-function().What does everyone think?
Yes, like
scss/at-rule-no-unknown. Please see also ~~https://github.com/stylelint-scss/stylelint-scss/issues/581~~ https://github.com/stylelint-scss/stylelint-scss/issues/589EDIT: Sorry, wrong issue link. 😅
I think we should ignore non standard CSS syntax
created https://github.com/stylelint/stylelint/issues/5900
@mizozobu Sounds good, but please open a request issue so that we can track it.