What minimal example or steps are needed to reproduce the bug?

button {
	--state: normal;
	background-color: if(
		style(--state: hover): gray;
		else: white;
	);
}

What minimal configuration is needed to reproduce the bug?

{
  "rules": {
    "custom-property-no-missing-var-function": true
  }
}

How did you run Stylelint?

Demo

Which Stylelint-related dependencies are you using?

{
  "stylelint": "16.25.0"
}

What did you expect to happen?

We don't need var() function to enclose the custom property, where in the style query condition (style()) of if() function. custom-property-no-missing-var-function should not report the error.

What actually happened?

4:9-16 error Unexpected missing var function for "--state" (custom-property-no-missing-var-function)

Do you have a proposal to fix the bug?

Note that if() function will also raise declaration-property-value-no-unknown error, for temporarily solution please see #8779 . Since there are too many new CSS features raise declaration-property-value-no-unknown errors, I don't think it's worth creating issues for each of them.

Due to this issue is not related to upstream (MDN, CSSTree), I think this issue can be fixed manually by PR. However after fixing, it might solve custom-property-no-missing-var-function error only, you will still get the declaration-property-value-no-unknown error.