Giters

Mange / roadie

Making HTML emails comfortable for the Ruby rockstars

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Option to leave styles in <head> (using Haml)

ixley opened this issue · comments

commented

Great gem! One of the snags we ran into though was that there's no simple way to keep styles in the head (inline, not linked). For media queries, hover styles, and the like, it's nice that there's the option to separate them into their own stylesheets via the data-immutable parameter, but it's better practice to be able to leave styles in the head rather than have them linked externally.

Additionally, because we're using Haml, the :css filter doesn't allow us to pass 'data-immutable', and using the %style tag doesn't fly because nested styles will still be rendered as Haml (and spit errors).

I've currently settled on using the :plain filter to avoid nesting errors, but am wondering if there's a more elegant solution...

commented

Now you've forced me to spoil a surprise I'm working on for Roadie 3. :-P
I intend to add an option that stores all "live" styles in a new style element in the head, so even if you link in a stylesheet with all styles, you'll get a style element left with all ":hover" selectors, for example.

Right now, there's not much you can do. I would keep using the plain filter, actually.

commented

Sweet. Surprises are overrated anyway :-)

commented

Hey there, just wanted to check on this one, I didn't see something related in Roadie 3 so what's your plan on media queries / pseudoselectors support? Right now it seems Roadie just drops them but inlining them in a head style would be so much better.

commented

It's good that you remind me. It's still planned, it's just that I don't spend too much time anymore on programming in my spare time. I should try to spend some time on this soonish.

commented

I just released version 3.1.0.rc. Let me know how it works for you.

I'm going to release a RC for a new version of roadie-rails too if you are using this with Rails.

With 3.1.0 leaving some styles in the <head> is now automatic, although they will need modifications to work properly with specificity. Look at the README for some examples.

Please reopen if you cannot get this to work or if you need assistance.

commented

I just tried the new 3.1.0.rc2 version. :hover, :active, etc. worked fine but media queries did not, they were incorrectly inlined and removed from the stylesheet.

I fixed it by keeping static and dynamic selectors in separate stylesheets and adding them to the view like this.

!!! Strict
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
  %head
    %meta{:content => "text/html; charset=utf-8", "http-equiv" => "Content-Type"}/
    %meta{:content => "width=device-width", :name => "viewport"}/
    = stylesheet_link_tag 'emails/static', media: 'all'

  %body
    %style(data-roadie-ignore)
      = raw Rails.application.assets.find_asset('emails/dynamic').to_s
...