You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
With the recently-added support for CSS Nesting, is there a good way to get the full selector value for a given nested rule -- that is, including any ancestor rule preludes? For example, given the following CSS:
.one {
color: red;
&.two {
color: green;
}
}
From the context of the color: green declaration, ideally I want to get the full selector for that declaration (.one.two). rule.prelude returns &.two -- is there a convenient way to find ancestor/parent selectors, or better yet the full "un-nested" selector/list raw value?
The text was updated successfully, but these errors were encountered:
Well, AST nodes has no context, so what you want can't be done without giving a context for a selector/rule... Anyway, truly speaking, I didn't think yet about such a functionality like unrolling a nested selectors. I have no a strong position here, should it be a part of CSSTree or not. The CSS Nesting spec is not stable yet, so I think it's too yearly to implement it. For instance, leading & is not a mandatory thing anymore and nested selectors can be started with any combinator now. So, it's not only about replacing & for a parent selector but also about a substitution before a leading combinator etc. For sure, support for CSS Nesting will be changed in next releases due to changes in the spec. And I will think more about unrolling a nested selectors as well.
@lahmatiy Thanks for your response! I agree that this isn't urgent, since the spec isn't stable. But eventually it would be a very helpful feature. Right now I'm using this.rule.prelude in the context of a walk() callback, and I was just noticing that this approach will no longer work once nesting is used.
I see. Well, you need a stack of rules (or all nodes, depends on your task) for your purposes. walk() has no such a feature for now, but you can implement it by yourself, for instance:
construlesStack=[];constproduceAbsoluteSelector=(prelude,stack)=>{// replace & for a rule selectors from stack here}walk(ast,{enter(node){if(node.type==='Rule'){constselector=produceAbsoluteSelector(node.prelude,rulesStack);// do something with a selectorrulesStack.push(node);}},leave(node){if(node.type==='Rule'){rulesStack.pop();}}});
With the recently-added support for CSS Nesting, is there a good way to get the full selector value for a given nested rule -- that is, including any ancestor rule preludes? For example, given the following CSS:
From the context of the
color: green
declaration, ideally I want to get the full selector for that declaration (.one.two
).rule.prelude
returns&.two
-- is there a convenient way to find ancestor/parent selectors, or better yet the full "un-nested" selector/list raw value?The text was updated successfully, but these errors were encountered: