Unexpected unknown function "-webkit-gradient" & "color-stop" function-no-unknown

[adhamfarrag]

What steps are needed to reproduce the bug?

I'm having this css class in my project. It has -webkit-gradient and inside of it, it has color-stop.

.text-line {
  -webkit-animation-duration: 1.25s;
  animation-duration: 1.25s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  background: #f6f6f6;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, #f6f6f6),
    color-stop(18%, #f0f0f0),
    color-stop(33%, #f6f6f6)
  );
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}

What Stylelint configuration is needed to reproduce the bug?

It's Nuxt stylelint-module

module.exports = {
  extends: "stylelint-config-recommended-vue",
  rules: {
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
        ],
      },
    ],
    "declaration-block-trailing-semicolon": null,
    "no-descending-specificity": null,
  },
};

How did you run Stylelint?

Nuxt.js handles that.

Which version of Stylelint are you using?

14.4.0

What did you expect to happen?

To not have bugs or to find it supported in Stylelint documentations.

What actually happened?

 64:15  ✖  Unexpected unknown function "-webkit-gradient"  function-no-unknown
 68:5   ✖  Unexpected unknown function "color-stop"        function-no-unknown
 69:5   ✖  Unexpected unknown function "color-stop"        function-no-unknown
 70:5   ✖  Unexpected unknown function "color-stop"        function-no-unknown

Does the bug relate to non-standard syntax?

No.

Proposal to fix the bug

No response

[jeddy3]

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

It looks like those are non-standard functions used in webkit nearly 15 years ago. They don't appear to be part of the CSS specs.

You can use the ignoreFunctions secondary option if you want to continue using them:

{
  "rules": {
    "function-no-unknown": [true, { "ignoreFunctions": ["color-stop", "-webkit-gradient"] }]
  }
}

Demo

[Mouvedia]

Since this rule has been added to stylelint-config-recommended quite recently, it deserves to be exhaustive.
We shouldn't add them one by one though; else it will incite users to open numerous issues for each one.
I think one big update would be warranted. It's hard to be thorough/complete.

We have to remember that stylelint is used on older codebases that have to be maintained.
Their DX shouldn't suffer.

[niksy]

-webkit-gradient is now available in https://github.com/niksy/css-functions-list/releases/tag/v3.2.1. As for color-stop, is there any reference to that function?

[Mouvedia]

As for color-stop, is there any reference to that function?

#6539 (comment)
https://www.webkit.org/blog/175/introducing-css-gradients/