Comments (31)
I can confirm this with a simple test case. I hope to fix this soon.
from roadie.
Nice 👍
CSS3 selectors are really helpful :P
from roadie.
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!
from roadie.
Let me test it after this deployment :P
from roadie.
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'
from roadie.
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
from roadie.
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
from roadie.
Thanks for the test! I'll add that pseudo selector to the test cases and see what I can do about it.
from roadie.
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'
from roadie.
@hayksaakian What is the error message?
from roadie.
In one instance (if i set :css => :bootstrap)
unexpected '!' after ''
If I use :css => :application I get
unexpected '(' after ''
from roadie.
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
from roadie.
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
from roadie.
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.
from roadie.
::-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
from roadie.
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
from roadie.
Most of the "selectors" are JS code
How come?
from roadie.
I was using the absolute latest master on github, but perhaps there's a specific commit you'd (@Mange ) prefer I try?
from roadie.
@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).
from roadie.
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?
from roadie.
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
from roadie.
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.
from roadie.
Then let me try again tomorrow :)
from roadie.
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'
from roadie.
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. :-)
from roadie.
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...
from roadie.
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.
from roadie.
I've opened the second issue now: sparklemotion/nokogiri#887
Let's hope they get merged! 😸
from roadie.
Both of them are merged :D
from roadie.
I'm going to release a new minor release with these fixes in them. Thanks for helping me test, guys!
from roadie.
2.4.0 has now been released. When Nokogiri releases 1.6.1 you should be able to inline :not:not
and other goodies.
from roadie.
Related Issues (20)
- undefined method `children' for nil:NilClass HOT 13
- Support css_parser 1.4.x HOT 2
- Support Outlook's approach to margins HOT 2
- Media queries inlined HOT 9
- Roadie is erratically causing emails to be encoded differently HOT 3
- New release supporting Nokogiri 1.7? HOT 2
- Weird issue with content: '•'; in my CSS HOT 4
- Convert rem to px? HOT 1
- Allow anchor tags to be ignored HOT 3
- nokogiri is locked to 1.7.x, 1.8.x is out. HOT 5
- css_parser is locked to 1.4.x, 1.5.x is out HOT 6
- Add support for storing the document as XHTML HOT 3
- Stylesheet BOM stripping doesn't work with NetHttpProvider HOT 8
- support anchor/ image url stripping inside conditional tags HOT 5
- Image style attributes - Outlook (on windows) special cases HOT 1
- Transformation Hooks - readme out of date HOT 2
- [Announcement] Passive maintenance mode HOT 6
- Roadie output mangled when control chars are present in conditional comments HOT 1
- NoMethodError Exception: undefined method `match' for #<Hash:0x00000000062ecdf8> HOT 3
- Support CSS custom properties (variables) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from roadie.