yuschick / stylelint-plugin-defensive-css

A Stylelint plugin for enforcing defensive CSS best practices.
https://defensivecss.dev/
MIT License
139 stars 4 forks source link

False Positive on Custom Property Fallbacks #6

Closed yuschick closed 1 year ago

yuschick commented 1 year ago

Describe the bug The current implementation of the custom property fallbacks check is to search for a comma in the same declaration value as a var. However, this fails to report for some shorthand properties or verbose style values.

To Reproduce The following style should be flagged as an error, but it passes.

grid-template: var(--page-header-size) 1fr / max-content minmax(0, 1fr) max-content;

This style is passing the check because of the comma in the minmax function.

Expected behavior The page-heasder-size custom property should be flagged.

Screenshots

image
yuschick commented 1 year ago

Can use the following regexp to find any var declarations to then search for a fallback value.

/var\(.+?\)/g