Selector with nth-child does not work

Question

Selector with nth-child does not work

PikachuEXE opened this issue 11 years ago · comments

Rails 3.2.12, Roadie 2.3.4, nokogiri 1.5.6
I want alternative row background color effect
So I tried:

  .job-row:nth-child(2n) {
    background-color: $grey-lighter;
  }

  .job-row:nth-child(2n+1) {
    background-color: $grey-lighter;
  }

The code itself has no error.
I tested it by pasting the selector to inspector in Chrome
I am not sure if its the problem of roadie or one of dependencies

I am using this for the effect right now

.job-row(class: cycle('row-odd', 'row-even'))

Magnus Bergmark · Answer 1 · Tue Mar 19 2013 20:18:25 GMT+0800 (China Standard Time)

I can confirm this with a simple test case. I hope to fix this soon.

PikachuEXE · Answer 2 · Tue Mar 19 2013 20:42:04 GMT+0800 (China Standard Time)

Nice 👍
CSS3 selectors are really helpful :P

Magnus Bergmark · Answer 3 · Wed Mar 20 2013 15:40:22 GMT+0800 (China Standard Time)

Please help me by testing the master branch. I expect you to get warnings while generating emails if you have a complex CSS.

I'd like to see which warnings you get to see if I need to expand the blacklist before releasing this.

Thanks for the report!

PikachuEXE · Answer 4 · Wed Mar 20 2013 15:49:07 GMT+0800 (China Standard Time)

Let me test it after this deployment :P

PikachuEXE · Answer 5 · Wed Mar 20 2013 17:17:15 GMT+0800 (China Standard Time)

I got error after using master
It seems importing from bootstrap cause this error
Which includes the following: (might update later)

@import "bootstrap/buttons";

Here is the stack trace:

Nokogiri::CSS::SyntaxError - unexpected ':' after ':':
  (gem) nokogiri-1.5.8/lib/nokogiri/css/parser_extras.rb:87:in `on_error'
  /usr/local/rvm/rubies/ruby-2.0.0-p0/lib/ruby/2.0.0/racc/parser.rb:258:in `do_parse'
  (gem) nokogiri-1.5.8/lib/nokogiri/css/parser_extras.rb:62:in `parse'
  (gem) nokogiri-1.5.8/lib/nokogiri/css/parser_extras.rb:79:in `xpath_for'
  (gem) nokogiri-1.5.8/lib/nokogiri/css.rb:23:in `xpath_for'
  (gem) nokogiri-1.5.8/lib/nokogiri/xml/node.rb:211:in `block in css'
  (gem) nokogiri-1.5.8/lib/nokogiri/xml/node.rb:210:in `css'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:159:in `each_element_in_selector'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:137:in `block (3 levels) in elements_with_declarations'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:154:in `block in each_good_selector'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:153:in `each_good_selector'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:136:in `block (2 levels) in elements_with_declarations'
  (gem) css_parser-1.3.4/lib/css_parser/parser.rb:178:in `block in each_rule_set'
  (gem) css_parser-1.3.4/lib/css_parser/parser.rb:176:in `each_rule_set'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:135:in `block in elements_with_declarations'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:134:in `elements_with_declarations'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:119:in `inline_css_rules'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:54:in `block in execute'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:77:in `block in adjust_html'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:76:in `adjust_html'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:49:in `execute'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie.rb:6:in `inline_css'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:61:in `inline_style_response'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:48:in `block in collect_responses_and_parts_order_with_inline_styles'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:48:in `collect_responses_and_parts_order_with_inline_styles'
  (gem) actionmailer-3.2.12/lib/action_mailer/base.rb:648:in `mail'
  /usr/local/rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:29:in `mail_with_inline_styles'
  app/mailers/individual_mailer.rb:11:in `job_summary'

PikachuEXE · Answer 6 · Wed Mar 20 2013 17:32:41 GMT+0800 (China Standard Time)

So in bootstrap
There are some code like:

button.btn,
input[type="submit"].btn {

  // Firefox 3.6 only I believe
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  // IE7 has some default padding on button controls
  *padding-top: 3px;
  *padding-bottom: 3px;

  &.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
  }
  &.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
  }
  &.btn-mini {
    *padding-top: 1px;
    *padding-bottom: 1px;
  }
}

The rule of input[type="submit"].btn::-moz-focus-inner (with two :) is the cause of error
(When I commented it out then the mail can be generate)

But this is quite common for browser support
See this article

Need another fix :P

PikachuEXE · Answer 7 · Wed Mar 20 2013 17:39:43 GMT+0800 (China Standard Time)

I got no warning (or I don't know where to look)
And the CSS3 selectors are working as expected
When I commented out that rule

Great :D

Magnus Bergmark · Answer 8 · Wed Mar 20 2013 20:04:30 GMT+0800 (China Standard Time)

Thanks for the test! I'll add that pseudo selector to the test cases and see what I can do about it.

Hayk Saakian · Answer 9 · Mon Mar 25 2013 06:34:01 GMT+0800 (China Standard Time)

I'm not sure if this is the same error, or caused by something different, but I'm having similar problems:

nokogiri (1.5.9) lib/nokogiri/css/parser_extras.rb:87:in `on_error'
    /Users/hayk/.rvm/rubies/ruby-2.0.0-p0/lib/ruby/2.0.0/racc/parser.rb:258:in `_racc_do_parse_c'
    /Users/hayk/.rvm/rubies/ruby-2.0.0-p0/lib/ruby/2.0.0/racc/parser.rb:258:in `do_parse'
    nokogiri (1.5.9) lib/nokogiri/css/parser_extras.rb:62:in `parse'
    nokogiri (1.5.9) lib/nokogiri/css/parser_extras.rb:79:in `xpath_for'
    nokogiri (1.5.9) lib/nokogiri/css.rb:23:in `xpath_for'
    nokogiri (1.5.9) lib/nokogiri/xml/node.rb:211:in `block in css'
    nokogiri (1.5.9) lib/nokogiri/xml/node.rb:210:in `map'
    nokogiri (1.5.9) lib/nokogiri/xml/node.rb:210:in `css'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:159:in `each_element_in_selector'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:137:in `block (3 levels) in elements_with_declarations'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:154:in `block in each_good_selector'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:153:in `each'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:153:in `each_good_selector'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:136:in `block (2 levels) in elements_with_declarations'
    css_parser (1.3.4) lib/css_parser/parser.rb:178:in `block in each_rule_set'
    css_parser (1.3.4) lib/css_parser/parser.rb:176:in `each'
    css_parser (1.3.4) lib/css_parser/parser.rb:176:in `each_rule_set'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:135:in `block in elements_with_declarations'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:134:in `tap'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:134:in `elements_with_declarations'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:119:in `inline_css_rules'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:54:in `block in execute'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:77:in `block in adjust_html'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:76:in `tap'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:76:in `adjust_html'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/inliner.rb:49:in `execute'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie.rb:6:in `inline_css'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:61:in `inline_style_response'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:48:in `block in collect_responses_and_parts_order_with_inline_styles'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:48:in `map'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:48:in `collect_responses_and_parts_order_with_inline_styles'
    actionmailer (3.2.13) lib/action_mailer/base.rb:648:in `mail'
    /Users/hayk/.rvm/gems/ruby-2.0.0-p0/bundler/gems/roadie-d4be3ccdde50/lib/roadie/action_mailer_extensions.rb:29:in `mail_with_inline_styles'
    app/mailers/notification.rb:13:in `notify_client'

PikachuEXE · Answer 10 · Mon Mar 25 2013 07:26:45 GMT+0800 (China Standard Time)

@hayksaakian What is the error message?

Hayk Saakian · Answer 11 · Mon Mar 25 2013 07:29:00 GMT+0800 (China Standard Time)

In one instance (if i set :css => :bootstrap)
unexpected '!' after ''

If I use :css => :application I get

unexpected '(' after ''

PikachuEXE · Answer 12 · Mon Mar 25 2013 11:10:44 GMT+0800 (China Standard Time)

I don't import the whole bootstrap style since not all of them are useful in emails
Maybe try to import a file (mailer for me) and try importing things you need

PikachuEXE · Answer 13 · Wed Apr 03 2013 10:11:16 GMT+0800 (China Standard Time)

Try to only import the things you need from bootstrap
So we can find out what really need to be fixed first

Oops duplicated due to cached page o.o

Magnus Bergmark · Answer 14 · Wed Apr 03 2013 14:59:20 GMT+0800 (China Standard Time)

I've pushed some changes to the master branch now. Most importantly:

::-moz-focus-inner (and similar) should no longer cause any errors
Roadie warns about which specific selector is causing errors now; e.g. by looking at the program output you should get a better message to use when reporting an issue and/or finding the style in your own files.

@hayksaakian please try the latest master and see which selector is causing your errors.

PikachuEXE · Answer 15 · Wed Apr 03 2013 16:11:37 GMT+0800 (China Standard Time)

::-moz-focus-inner is passing :)
Trying to use application now

EDIT:
application has too many rules to inject (time out using mail preview)
And I don't use application anyway
Let's wait for @hayksaakian to try it out

Hayk Saakian · Answer 16 · Fri Apr 05 2013 09:34:08 GMT+0800 (China Standard Time)

Still does not seem to work

I put the relevant logs here:
https://gist.github.com/hayksaakian/5315927

it seems like there's some javascript making it's way into the template / inlining process

PikachuEXE · Answer 17 · Fri Apr 05 2013 09:42:05 GMT+0800 (China Standard Time)

Most of the "selectors" are JS code
How come?

Hayk Saakian · Answer 18 · Fri Apr 05 2013 09:50:11 GMT+0800 (China Standard Time)

I was using the absolute latest master on github, but perhaps there's a specific commit you'd (@Mange ) prefer I try?

Magnus Bergmark · Answer 19 · Mon Apr 08 2013 19:31:36 GMT+0800 (China Standard Time)

@hayksaakian No, it was the correct commit.

I think you have invalid HTML, or have put JS inside a <style> tag. This problem was always there, but Roadie was just silently ignoring those errors before. I think you should try to disable Roadie and look at the outputted HTML from a vanilla email and see what happened.

If you cannot find anything, you may paste the code in here (or email with if the data is sensitive).

Magnus Bergmark · Answer 20 · Mon Apr 08 2013 19:32:59 GMT+0800 (China Standard Time)

application has too many rules to inject (time out using mail preview)

Whoa. Either that is one massive stylesheet or I need to optimize Roadie more. How big is it?

PikachuEXE · Answer 21 · Mon Apr 08 2013 19:36:59 GMT+0800 (China Standard Time)

I waited for more than 2 minutes
So I killed the process

Not sure how big it is (I will try to precompile tomorrow)
But I don't think I would ever use application for mailer style file

Magnus Bergmark · Answer 22 · Mon Apr 08 2013 19:47:24 GMT+0800 (China Standard Time)

Well, the browsers are all able to parse and apply your application in the matter of milliseconds (I assume), so the performance isn't that great. Perhaps I've done something very inefficient somewhere in the code.

PikachuEXE · Answer 23 · Mon Apr 08 2013 19:50:03 GMT+0800 (China Standard Time)

Then let me try again tomorrow :)

PikachuEXE · Answer 24 · Tue Apr 09 2013 10:16:38 GMT+0800 (China Standard Time)

I got 2 errors while playing with application.scss

Roadie cannot use ".control-group input:not([type=\"checkbox\"]):not([type=\"radio\"])" when inlining stylesheets

Roadie got error when looking for ".some-list tr:nth-child(4n-3)": parse error on IDENT 'n-3'

Magnus Bergmark · Answer 25 · Tue Apr 09 2013 14:23:48 GMT+0800 (China Standard Time)

Roadie got error when looking for ".some-list tr:nth-child(4n-3)": parse error on IDENT 'n-3'

When I started looking, it looked like having a minus sign there was incompatible, but I went straight to the source and lo and behold, it should be supported!

I'll open an issue with Nokogiri about this.

Roadie cannot use ".control-group input:not([type=\"checkbox\"]):not([type=\"radio\"])" when inlining stylesheets

This is most likely Nokogiri that does not support multiple :not on the same selectors. I cannot find any test in the Nokogiri repo that actually parses this, but I do find examples of it in the W3C specifications.

This might also be a prime candidate for a Nokogiri issue. I'll see about it.

Something to note: None of these worked before, but this problem is visible now so developers can work around them. :-)

PikachuEXE · Answer 26 · Tue Apr 09 2013 14:35:48 GMT+0800 (China Standard Time)

It's great to find these problems before I actually need them

I got error similar to @hayksaakian (with JS code in warning)
if I require stylesheet from vendor with:
require_tree ../../../vendor/assets/stylesheets
Very strange...

Magnus Bergmark · Answer 27 · Tue Apr 09 2013 16:12:00 GMT+0800 (China Standard Time)

I've opened a PR for the first issue here: sparklemotion/nokogiri#886

Second issue will be opened later when I get the time.

Which vendor stylesheets do you use? One of them should be the culprit.

Magnus Bergmark · Answer 28 · Tue Apr 09 2013 18:02:25 GMT+0800 (China Standard Time)

I've opened the second issue now: sparklemotion/nokogiri#887

Let's hope they get merged! 😸

PikachuEXE · Answer 29 · Wed Jul 03 2013 10:40:56 GMT+0800 (China Standard Time)

Both of them are merged :D

Magnus Bergmark · Answer 30 · Thu Jul 04 2013 21:56:30 GMT+0800 (China Standard Time)

I'm going to release a new minor release with these fixes in them. Thanks for helping me test, guys!

Magnus Bergmark · Answer 31 · Thu Jul 04 2013 22:26:02 GMT+0800 (China Standard Time)

2.4.0 has now been released. When Nokogiri releases 1.6.1 you should be able to inline :not:not and other goodies.