Demo implementation of @csstools/selector-resolve-nested
#7496
Conversation
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| function removeIgnoredNodes(selector, isIgnored) { | ||
| const clone = selector.clone(); | ||
|
|
||
| clone.walk((node) => { | ||
| let value = ''; | ||
|
|
||
| switch (node.type) { | ||
| case 'attribute': | ||
| case 'class': | ||
| case 'id': | ||
| case 'tag': | ||
| value = node.toString(); | ||
| break; | ||
| case 'pseudo': | ||
| value = node.value; | ||
| break; | ||
|
|
||
| default: | ||
| return | ||
| } | ||
|
|
||
| if (!value) { | ||
| return; | ||
| } | ||
|
|
||
| if (isIgnored(value)) { | ||
| node.replaceWith(selectorParser.universal({ | ||
| value: '*', | ||
| sourceIndex: node.sourceIndex, | ||
| source: node.source, | ||
| })); | ||
| } | ||
| }); | ||
|
|
||
| return clone; | ||
| } |
There was a problem hiding this comment.
I removed all the custom logic for specificity and instead manipulated the AST so that ignored nodes were replaced with * which has zero specificity. This has obvious differences but I think it can be an interesting approach to ignoreSelector in this context.
| */ | ||
| const specificitySum = (specificities) => { | ||
| const sum = zeroSpecificity(); | ||
| function gatherSelectorsForRule(rule, result, isIgnored) { |
There was a problem hiding this comment.
This should be a shared helper.
It walks the postcss AST to gather all the ancestor nodes and resolves all the nested selectors.
| if (typeGuards.isAtRule(child) && ast) { | ||
| // `.foo, #bar { @media screen { color: red; } }` | ||
| // equivalent to | ||
| // `@media screen { .foo, #bar { & { color: red; } } }` | ||
| // `@media screen { :is(.foo, #bar) { color: red; } }` | ||
| const childAST = selectorAST('&', result, child); | ||
|
|
||
| if (!childAST) return; | ||
|
|
||
| ast = selectorResolveNested.resolveNestedSelector(childAST, ast); | ||
| } |
There was a problem hiding this comment.
for more info and demo's see : mrhenry/stylelint-mrhenry#66
|
This looks fantastic and is a significant step towards spec compliance! |
| if (typeGuards.isAtRule(child) && ast) { | ||
| // `.foo, #bar { @media screen { color: red; } }` | ||
| // equivalent to | ||
| // `@media screen { .foo, #bar { & { color: red; } } }` | ||
| // `@media screen { :is(.foo, #bar) { color: red; } }` | ||
| const childAST = selectorAST('&', result, child); | ||
|
|
||
| if (!childAST) return; | ||
|
|
||
| ast = selectorResolveNested.resolveNestedSelector(childAST, ast); | ||
| } | ||
| } |
There was a problem hiding this comment.
Note : the specification has since changed again, this is no longer true.
See : #6234
I wanted to gain a better understanding of the complexity that CSS nesting introduces for all rules that analyse selectors.
I also want to validate how
@csstools/selector-resolve-nestedworks to make sure it works correctly and its API has the right shape.This is a draft PR as it isn't intended to be merged, but feedback is welcome!