We're using stylelint, and want a rule that forbids using px as a unit with font-size; but allows it for any other property. We thought this should work:
"unit-disallowed-list": ["px", {
"ignoreProperties": { "px": ["/^((?!font-size).)*$/"] },
}],
but it catches px in other properties as well, for example in @media (min-width: 380px), throwing
✖ Unexpected unit "px" unit-disallowed-list
Does anyone know what's wrong with this?
Alternatively, it would be great if we could just specify which properties we want the rule to apply for, rather than all those we wish to ignore, but I don't see a way to do this with stylelint.
Any help much appreciated!
Alternatively, it would be great if we could just specify which properties we want the rule to apply for, rather than all those we wish to ignore, but I don't see a way to do this with stylelint.
You can use the declaration-property-unit-disallowed-list rule to do this:
{
"rules": {
"declaration-property-unit-disallowed-list": {
"font-size": ["px"]
}
}
}
You can use the unit-disallowed-list and declaration-property-unit-disallowed-list rules together, using the former to disallow units generally in your styles and the latter when you want to be more specific.
You may also find it more useful to use the allowed-list, rather than disallowed-list, rules especially when being specific, e.g.:
{
"rules": {
"declaration-property-unit-allowed-list": {
"font-size": ["em", "rem"]
}
}
}