support CSS pseudo-element selectors

[mattparlane]

Hi!

Apologies if this has been submitted already. It looks like Nokogiri's CSS parser can't handle pseudo-elements (as opposed to pseudo-classes). As far as I can tell it's valid CSS3.

To reproduce:

Nokogiri::CSS::Parser.new.parse('input::placeholder { color: red; }')

Result:

root@dev:~/wg/ruby# ruby test.rb
Traceback (most recent call last):
	4: from test.rb:4:in `<main>'
	3: from /usr/local/lib/ruby/gems/2.5.0/gems/nokogiri-1.10.4/lib/nokogiri/css/parser_extras.rb:62:in `parse'
	2: from /usr/local/lib/ruby/2.5.0/racc/parser.rb:259:in `do_parse'
	1: from /usr/local/lib/ruby/2.5.0/racc/parser.rb:259:in `_racc_do_parse_c'
/usr/local/lib/ruby/gems/2.5.0/gems/nokogiri-1.10.4/lib/nokogiri/css/parser_extras.rb:87:in `on_error': unexpected ':' after ':' (Nokogiri::CSS::SyntaxError)

Thanks!

[flavorjones]

@mattparlane Thanks for opening a ticket about this.

Can you help me understand a bit more about what you're trying to do? Nokogiri's CSS parser is intended only to transform CSS queries into XPath queries; it's not intended to be a complete implementation of CSS syntax.

Another way to phrase the above question: can you give me a complete code snippet that demonstrates what you're trying to do when you provide a property/value pair like you did above ({ color: red; })?

Further, I'm interested in hearing your thoughts on which of the pseudo-element selectors you think are important for Nokogiri to implement?

[mattparlane]

Hey @flavorjones, thanks for getting back to me.

I'm actually using Nokogiri indirectly, via an old unmaintained gem called inline_style. I understand now that this is probably not the intended use, but I didn't realise that previously.

The gem takes an HTML file which may include CSS rules inside a <style> block, and then inlines them into the HTML. It's useful for emails, some email clients don't read <style> blocks.

Up to you as to what you want to do about it... Thanks for your time.

[flavorjones]

@mattparlane Oh, I see - so you have a style sheet that uses input::placeholder { ... }, and are using inline_style to try to inline; but when that gem invokes nokogiri to search for input::placeholder it errors?

If so, I think it's a reasonable feature request for Nokogiri's parser to not error out when it sees pseudo-elements -- I can fix that relatively easily.

But I would like to understand which pseudo-elements you care about, so that I can prioritize which ones we try to implement properly. Can you share more about your usage to help us prioritize?

[mattparlane]

Sorry about the delay. I guess my naive thinking is that all pseudo-elements should be supported... but I'm not au fait with the reason why each needs to be implemented separately or how much work it would be.

My use case is for custom CSS which is entered by users, so the universe of options is basically all CSS. Before you ask (because I also asked), pseudo-elements are indeed supported in some email clients: https://www.emailonacid.com/blog/article/email-development/using-pseudo-elements-to-progressively-enhance-your-emails/

Sorry if that's too vague... and totally understand if it's not realistic. Thanks!

[flavorjones]

@mattparlane It's helpful to know your use case is, essentially, "make inline_style not throw up on these selectors".

There are some very real challenges to implementing most of these pseudo-elements correctly, though, which is why I asked the question.

What should be returned on a query for ::spelling-error? There's no user agent flagging spelling errors, so I guess it would be defensible to implement this trivially by returning an empty NodeSet.

But what should be returned on a query for ::first-letter? The XML libraries used by Nokogiri implement a DOM API, and the DOM tree only provides a single Text node; we could split this text, but libxml2 in particular has some quirky behavior around merging sibling text nodes that could get tricky. As far as the inline-style gem goes, it expects to get Nodes returned when it performs CSS queries, which it then modifies to have a style attribute -- but Text nodes don't have attributes! What does it mean, in the DOM, to apply a style to the first letter of a string? What should inline_style's behavior be in this case?

All of which is to say, there are deeper issues around return values for a pseudo-element query that we'd need to figure out before starting to implement anything.

In the meantime, maybe we could make a minor improvement to Nokogiri to raise a new exception type like Nokogiri::CSS::UnimplementedPseudoElementSelector that your code (or inline_style) could rescue so as to skip over unimplemented (or unimplementable) rules. What do you think of that?

[mattparlane]

Hey @flavorjones, thanks for getting back to me. And thanks for explaining, I now understand the challenges involved.

Yes, I believe that new exception would work, as long as it's raised in a way that's not terminal.

Thanks again, this will help a lot!