tree.match and complex selectors

[Cosmin Popovici]

In developing posthtml-postcss-inline, I reached the point where it can't inline complex CSS selectors, because posthtml-match-helper doesn't support that. The problem is discussed here, and it was concluded that it's a feature that should be implemented in the tree.match() API method of PostHTML.

We need a way to match elements based on complex CSS selectors.

For example, imagine this with posthtml-match-helper:

matchHelper("div > span")

[Cosmin Popovici]

Since there are several types of selectors and implementing them all isn't trivial, I think we could focus on a short list of the most commonly used ones?

Maybe this for starters:

1. selector1 selector2 (descendant combinator)
2. selector1 > selector2 (child combinator)

From there we could look into:

3. selector1 + selector2 (next-sibling combinator)
4. selector1 ~ selector2 (subsequent-sibling combinator)

What do you think @Scrum?

[Ivan Demidov]

@cossssmin Great suggestion, drawing up a plan is already 50 percent of the work done, thank you!!

I'll attach it here so you can see the whole set. https://drafts.csswg.org/selectors/#overview

[Ivan Voischev]

in my opinion, it is better to give options for code snippets solving the tasks described above. In the documentation. To add to the API much later

[Cosmin Popovici]

If it can be done by the user then sure, it doesn’t matter if it’s a guide in the docs or even in a plugin like posthtml-match-helper.

I understand the concern 👍

[Cosmin Popovici]

Was reading up on htmlparser2 and it got me thinking, if css-select also uses it, and PostHTML also uses it, couldn't tree.match somehow use css-select? Or, maybe a plugin like posthtml-match-helper could use it?

What do you guys think?

[Ivan Demidov]

After a quick glance, I realized:

1. To use it, you will have to immerse yourself completely in this tool, immediately not everything seems trivial.
2. Reuse will be impossible after converting tree (posthtml AST) posthtmlRender-> string -> parseDocument (htmlpareser2 AST) -> css-selector -> string -> posthtmlParser here we lose the mapping to the original tree (this is critical)

[Cosmin Popovici]

Ah, bummer... would have been cool, especially considering it has CSS lvl 4 selector support :)