feat(lint): noInvalidGridTemplateAreas

[ematipico]

Summary

This PR implements a lint rule around grid-templates-areas. The rule is taken from stylelint

Test Plan

Added new tests

[jeddy3]

For context, this rule was only recently added to stylelint. Unlike some of the earlier no-invalid rules we wrote (e.g. color-no-invalid-hex), we took into account what was already detectable by the CSSTree validator when defining the scope of the rule. You may want to take a different approach with Rome, perhaps a more comprehensive built-in validator?

The CSSTree validator checks that the grid-template-areas property receives one or more strings (based on its understanding of syntax), e.g. it'll detect:

a { grid-template-areas: }
a { grid-template-areas: a b }

And so on, but it won't detect this part of the spec:

All strings must define the same number of cell tokens (named cell tokens and/or null cell tokens), and at least one cell token, or else the declaration is invalid. If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

The stylelint rule fills this gap.

[ematipico]

Gosh this is embarrassing! 😨
I didn't know grid-template-areas has its own syntax! Damn, I was too eager to implement some new rule.

Thank you very much for your insight! Yes, given your explanation and how grid works, we should work on a specific parsing because it has its own rules.