Feature request: `scss/function-no-unknown`

Problem

Sass doesn’t catch typos in function names. The docs recommend using a linter to catch these issues:

Because any unknown function will be compiled to CSS, it’s easy to miss when you typo a function name. Consider running a CSS linter on your stylesheet’s output to be notified when this happens!

I’m unable to find any rules in stylelint-scss that catch mistakes like these, however.

Proposed solution

It would be awesome to have a new rule to catch mistakes like these. It would work like scss/at-rule-no-unknown, but for functions. Let’s call it scss/function-no-unknown.

Example

Here’s an example of a mistake. I’ve typed invart instead of invert:

@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

.button {
  background-color: invart(#f00)
}

Sass assumes that invart must be a CSS function and writes it into the compiled CSS:

.button {
  background-color: invart(#f00)
}

Our proposed rule would realize that there’s no Sass function called invart and also no CSS function called invart. It would throw an error, alerting us to the fact that we’ve made a typo.

Thank you so much for your time! 😃

[ybiquitous]

Hi there, the Stylelint built-in function-no-unknown rule will support the ignoreFunctions option with the next version. (stylelint/stylelint#5901)

See also https://github.com/stylelint/stylelint/pull/5865#issuecomment-1034871807

[kristerkari]

Would it be possible to scan the _functions.scss file while linting index.scss, list all functions defined in this file and add namespace prefix (fn in this example) and then add this list to the list of valid functions for the current file (index.scss)?

Doing something like that would most likely make the rule really slow because you would have to be constantly reading the _functions.scss file on fly and then parse/lint it.

Usually going outside of the current file for linting is just a bad idea.