Fix function-linear-gradient-no-nonstandard-direction false positives for <color-interpolation-method>

[crystalfp]

What steps are needed to reproduce the bug?

button {
  background: linear-gradient(
                in oklab
                to bottom,
                red 0%,
                blue 100%
              );
}

What Stylelint configuration is needed to reproduce the bug?

extends:
  - stylelint-config-standard
  - stylelint-config-standard-vue
  - stylelint-config-standard-scss
  - stylelint-config-recommended-vue/scss
  - stylelint-config-recommended-scss

rules:
  alpha-value-notation: number
  at-rule-no-unknown: null
  color-function-notation: null
  color-hex-length: long
  comment-whitespace-inside: always
  declaration-block-single-line-max-declarations: 4
  font-family-no-missing-generic-family-keyword: true
  function-url-quotes: always
  max-nesting-depth: 3
  media-feature-name-no-vendor-prefix: true
  scss/at-rule-no-unknown: true
  scss/dollar-variable-empty-line-before: null
  scss/dollar-variable-pattern: null
  scss/selector-no-redundant-nesting-selector: null
  scss/double-slash-comment-empty-line-before: null
  selector-no-qualifying-type: null
  selector-pseudo-class-no-unknown: [true, {ignorePseudoClasses: [deep]}]
  shorthand-property-no-redundant-values: null

How did you run Stylelint?

stylelint *.css --config .stylelintrc.yaml

Which version of Stylelint or dependencies are you using?

15.8.0

What did you expect to happen?

No problem to be reported

What actually happened?

test.css
23:31  ✖  Unexpected nonstandard direction  function-linear-gradient-no-nonstandard-direction 

Does the bug relate to non-standard syntax?

This is a recent syntax about color management in CSS

Proposal to fix the bug

No response

[ybiquitous]

@crystalfp Thanks for the report with the reproducible example! I can reproduce it with this demo. 👍🏼

The CSS Images Module Level 4 spec says:

This level adds a <color-interpolation-method> argument to linear-gradient()

So the function-linear-gradient-no-nonstandard-direction rule seems to need to support this new syntax.

I've labeled the issue as ready to implement. Please consider contributing if you have time.

There are steps on how to fix a bug in a rule in the Developer guide.

[romainmenke]

This is not trivial to fix because this rule supports vendor prefixed variants of linear-gradient that have a different syntax :

-webkit-linear-gradient(top, #fff, #000);

This was later changed to linear-gradient(to top, #fff, #000);

The to keyword is very important here because it makes it possible to distinguish these two values :

• linear-gradient(to var(--direction), #fff, #000);
• linear-gradient(in var(--color-space), #fff, #000);

---

I think we should move the current implementation into a legacy function and only call this on vendor prefixed functions.

Then add a new check function that only supports the standard syntax.

In the standard syntax check we would look for the first meaningful argument after a to keyword, before the first comma.

[jeddy3]

@romainmenke Thank you for investigating.

If I remember correctly, we added this rule to encourage people to move:

• from -webkit-linear-gradient(top, #fff, #000);
• to linear-gradient(to top, #fff, #000);

Even though a browser may successfully render either. I suspect most people use modern direction syntax these days.

Could we fix the false positive by simply returning early if the first argument is in?

[romainmenke]

Could we fix the false positive by simply returning early if the first argument is in?

These arguments can appear in any order :

• linear-gradient(in oklch to top, #fff, #000);
• linear-gradient(to top in oklch, #fff, #000);

We could return early if any argument before the first comma is the in keyword.

[jeddy3]

These arguments can appear in any order

Interesting. I thought that might be the case, but I couldn't see an example in the spec.

We could return early if any argument before the first comma is the in keyword.

SGTM. It seems like the simplest solution to the false positive.