Fix false positives for interpolation in function-no-unknown

[m4thieulavoie]

What steps are needed to reproduce the bug?

When having something like the following, stylelint's function-no-unknown throws a false error (assuming darken is in ignoreFunctions

:root {
  --primary-color: #{darken(#fff, 0.5)};
}

What Stylelint configuration is needed to reproduce the bug?

{
    "function-no-unknown": [true, {ignoreFunctions: ["lighten", "darken"]}]
}

How did you run Stylelint?

npx stylelint

Which version of Stylelint are you using?

14.5.0

What did you expect to happen?

No violation thrown by stylelint

What actually happened?

Unexpected unknown function             function-no-unknown          
          "#{darken" 
//          ^^ Note the `#{` prefix

Does the bug relate to non-standard syntax?

No response

Proposal to fix the bug

Add logic to remove any #{} syntax

[ybiquitous]

@m4thieulavoie Thanks for the report and for using the template.

This issue seems to be the same problem as:

• Feature request: scss/function-no-unknown stylelint-scss/stylelint-scss#581
• New stylelint function-no-unknown rule not working well with SCSS stylelint-scss/stylelint-scss#589

[m4thieulavoie]

@m4thieulavoie Thanks for the report and for using the template.

This issue seems to be the same problem as:

• Feature request: scss/function-no-unknown stylelint-scss/stylelint-scss#581
• New stylelint function-no-unknown rule not working well with SCSS stylelint-scss/stylelint-scss#589

Indeed! Hopefully stylelint is the right place to fix that as I took a stab at it and opened a PR for it

[ybiquitous]

Stylelint should not handle non-standard CSS syntaxes. Instead, the stylelint-scss plugin should do it.

For example, sanitizing a value like #{...} would be more difficult to support more syntaxes.

[jeddy3]

@m4thieulavoie Thanks for opening the issue.

Hopefully stylelint is the right place to fix that

Yes, it is.

For example, sanitizing a value like #{...} would be more difficult to support more syntaxes.

That's correct. As @ybiquitous is implying, we ignore non-standard syntax in the built-in rules (using the isStandardSyntax* utilities) as there is a lot of non-standard syntax out there. This then allows plugins, like stylelint-scss, to write companion rules that deal with non-standard syntax specific to that language.

[m4thieulavoie]

@m4thieulavoie Thanks for opening the issue.

Hopefully stylelint is the right place to fix that

Yes, it is.

For example, sanitizing a value like #{...} would be more difficult to support more syntaxes.

That's correct. As @ybiquitous is implying, we ignore non-standard syntax in the built-in rules (using the isStandardSyntax* utilities) as there is a lot of non-standard syntax out there. This then allows plugins, like stylelint-scss, to write companion rules that deal with non-standard syntax specific to that language.

Thanks for the feedback! I'll keep my eyes opened for a fix in stylelint-scss