feat: add selector support to require-baseline #61
Conversation
rviscomi
changed the title
|
I wasn't sure how to handle selectors used within Example CSS: @supports selector(.example) {}AST: {
"type": "Function",
"loc": {
"source": "<unknown>",
"start": {
"offset": 10,
"line": 1,
"column": 11
},
"end": {
"offset": 28,
"line": 1,
"column": 29
}
},
"name": "selector",
"children": [
{
"type": "Raw",
"loc": {
"source": "<unknown>",
"start": {
"offset": 19,
"line": 1,
"column": 20
},
"end": {
"offset": 27,
"line": 1,
"column": 28
}
},
"value": ".example"
}
]
} |
src/rules/require-baseline.js
Outdated
| continue; | ||
| } | ||
|
|
||
| const ruleLevel = selectors.get(selector); |
There was a problem hiding this comment.
This can be undefined if someone is using an unknown selector. In that case, we just want to exit without reporting anything.
There was a problem hiding this comment.
Is this addressed by the check above?
if (!selectors.has(selector)) {
continue;
}| @@ -625,6 +628,48 @@ export default { | |||
| }); | |||
| } | |||
| }, | |||
|
|
|||
| Selector(node) { | |||
There was a problem hiding this comment.
This matches all selectors, including those in @supports:
@supports selector(:nth-child(1 of .foo)) {
/* Styles */
}When in @supports, we should not warn because they are checking for browser support.
Also related to @supports: If someone is checking if a selector is supported then we should not warn on any selectors used inside of that @supports. We already do this for property names and values, so we should do the same for selectors.
There was a problem hiding this comment.
Based on #61 (comment) it doesn't seem like CSSTree parses selectors within @supports preludes. So if I understand correctly, while we should be able to tell whether the selector is used somewhere within a @support rule, we won't necessarily know if the selector was used in the @support condition itself.
For example, if an unrelated property is used in the condition, the non-Baseline feature could still be used in the declaration block:
@supports (color: red) {
h1:has(+ h2) {
color: red;
}
}Is that an acceptable false negative? If so I can update the code and add a note in the docs.
There was a problem hiding this comment.
Ah I just realized that the astexplorer.net tool I was using to check the AST is stuck on v2.0.1 and the selector support we need was added to v3.0.0. I'll take another look at this.
Prerequisites checklist
What is the purpose of this pull request?
Add support for validating the Baseline status of selectors like
:has()What changes did you make? (Give an overview)
Selectorhandler that checks the validity of all child nodesRelated Issues
Fixes #60
Is there anything you'd like reviewers to focus on?