Fix `custom-property-no-missing-var-function` false positives for properties that can contain author-defined identifiers

What is the problem you’re trying to solve?

Thanks to the CSS Houdini API, the property name of a custom property could appear in the value of some declarations, such as transition (or more precisely, transition-property). However, the current custom-property-no-missing-var-function rule will report errors for these custom property names that are not wrapped in var().

Online demo: https://stylelint-demo.herokuapp.com/#N4Igxg9gJgpiBcIACAHAThFM0BcCeABALREBmEEBwAOgHYEEDOetOAhgB7wEDkAPJAA2ENAD4eAbjoMAlrQAW2GTkbdSbQYxhT6BOcpkaiANw0BXGNxxo2tRijZoYrHQF86deBgg4q04mQU3E5QOgzWtowGELTcJOSUAAwAdABMjG4etGx+uvFBBABGghaZtHRs8PIQxti5DPkQ3GB4tmUgADQgzKycCOCMjJ3gMaQyAOb9NLrUIGhmgjCMs9zTDAyzYGaMOBAAtkTomNj4RLQQRHsyg3LjJo5kZrRgODIxKwTWFv7utK4griAA

What solution would you like to see?

One possibility is to not report transition, etc. by default, but this could also produce breaking changes.

It is also possible to add options to the rule to ignore certain property names, as we did in property-no-vendor-prefix.

module.exports = {
  rules: {
    'custom-property-no-missing-var-function': [true, { ignoreProperties: ['transition', 'transition-property'] }],
  }
}

[jeddy3]

@jeddy3 Any thoughts?

Sorry, I missed this.

As a side note, I found that almost all user-defined at-rules in the CSS standard support the <custom-ident> identifier, such as @keyframes and @counter-style, which leads to a number of properties in addition to transition-property that can actually pass custom property names that are not wrapped in var().

Yes, that was the original reason for limiting this rule to defined custom properties. However, we didn’t consider the scenario where a custom property is defined but intentionally not used in a var().

Thanks for drawing up the list in https://github.com/stylelint/stylelint/issues/5742#issuecomment-981352174. Ideally, we’d ignore just the <custom-ident> slot of these properties, but that’s tricky to do with our current parser. I suggest we ignore the properties outright to avoid these false positives and then document this limitation, e.g. “This rule does not check properties which can contain author-defined identifiers”.

[CyanSalt]

As a side note, I found that almost all user-defined at-rules in the CSS standard support the <custom-ident> identifier, such as @keyframes and @counter-style, which leads to a number of properties in addition to transition-property that can actually pass custom property names that are not wrapped in var().

As a possibly incomplete list, the properties I’ve gathered so far are as follows:

• animation, exactly animation-name
• counter-reset and counter-increment
• grid-row-start, grid-row-end, grid-column-start and grid-column-end. This also means that grid-row and grid-column
• list-style, exactly list-style-type
• transition, exactly transition-property
• will-change, as a closely related one to transition-property

For these properties, I think the more common use case is probably still custom properties wrapped in var(). So I suspect that ignoring them by default may not be appropriate, and perhaps an option approach would be a better choice.

As a rough design, perhaps we could provide { "ignoreCustomIdent": true } as an option, but it would be more difficult to implement. Providing ignoreProperties is probably the most cost effective option.