Fix false positives for hex colours in color-function-notation

Clearly describe the bug

After upgrading to the latest major, I experienced an issue with color-function-notation, and turns out it wasn’t an issue per-say, but I think stylelint could’ve made a better job at telling me the issue.

So I had this rule prior to the upgrade

background-color: rgba(#fff, 0.85);

After running stylelint, I had the warning I should use color-function-notation (nice!). So what I did is the following

background-color: rgba(#fff / 0.85);

After that, stylelint passed. However, it was a false-positive as when I built my SCSS, it actually failed. I discovered that hex colors aren’t allowed. The correct syntax is the following

background-color: rgba(255 255 255 / 0.85);

Which rule, if any, is the bug related to?

color-function-notation

What code is needed to reproduce the bug?

a {
  background-color: rgba(#fff / 0.85);
}

What Stylelint configuration is needed to reproduce the bug?

Default one or the following

{
  "rules": {
    "color-function-notation": "modern"
  }
}

Which version of Stylelint are you using?

"stylelint": "14.0.0",

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

npx stylelint

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

I don’t think so?

What did you expect to happen?

A warning from stylelint directly in my code (with a tooltip)

What actually happened (e.g. what warnings or errors did you get)?

✅ from stylelint when it actually was invalid code

[lachieh]

Thanks, makes sense. PR submitted!

[alexander-akait]

/ is evil in SCSS 😄