Add ignoreFunctions: [] to unit-allowed-list

What steps are needed to reproduce the bug?

Use css/scss functions that include a disallowed unit character.

button {
  border: 1px solid hsl(20deg 0% 20% / 80%);
  background-color: lighten(green, 20%);
}

What Stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "unit-allowed-list": "px"
  }
}

How did you run Stylelint?

CLI stylelint **/*.scss

Which version of Stylelint are you using?

14.2.0

What did you expect to happen?

Units within function to be ignored.

What actually happened?

The following problems were reported

2:25 errorUnexpected unit "deg" (unit-allowed-list)
2:31 errorUnexpected unit "%" (unit-allowed-list)
2:34 errorUnexpected unit "%" (unit-allowed-list)
2:40 errorUnexpected unit "%" (unit-allowed-list)
3:36 errorUnexpected unit "%" (unit-allowed-list)

Does the bug relate to non-standard syntax?

Yes, SCSS color functions and vanilla HSL functions

Proposal to fix the bug

Add ignore: ["inside-function"] secondary option to unit-allowed-list, similar fix to https://github.com/stylelint/stylelint/issues/5140

[jeddy3]

Okay, let’s go with ignoreFunctions: [].

I’ve labelled the issue as ready to implement. @treemmett Please consider contributing if you have time.

There are steps on how to add a new option in the Developer guide.

[jeddy3]

A new option sounds good.

I’m wondering whether we missed an opportunity when we added ignore: ["inside-function"] to those other rules. It’s too broad. If we pivot to a user defined list option, i.e. ignoreFunctions: [] we can cater to the above use case and others.

For example, given:

{
  "rules": {
    "unit-allowed-list": ["px", { "ignoreFunctions": ["hsl"] }]
  }
}

Would allow:

a {
  border: 1px solid hsl(20deg 0% 20% / 80%);
}

But disallow:

a {
  font-size: 10px;
}

b {
  font-size: var(--font-size, 1rem);
}

(When you want font sizes always in pixels).

You can still ignore all functions using this option by using regex in the list.

Thoughts?