Webpacker Support

[waltz]

Hello!

I'm using Webpacker on a new Rails project and I would like to use Premailer on my outbound emails.

Is there any current plan to support Webpacker? Would you be open to PR's with a webpack strategy?

[fphilipe]

Hey @waltz!

Is there any current plan to support Webpacker?

Not really. What would be needed for that? Are you processing your CSS with Webpacker? How would that be different? premailer-rails, at least in production, just loads a CSS file. So I assume you're talking specifically about development, aren't you?

[waltz]

You're spot on, I'm processing my CSS with Webpacker and I'd like to use mailer previews in development to take a peek at things before I deploy.

I hacked on it for a little bit and managed to get it working. I built an adapter that looks for a running webpack dev server and asks it for the CSS. If you're interested I could make a PR.

[fphilipe]

I'm not too familiar with the Webpack integration in Rails. As I understand, at least in development, it's completely orthogonal to the asset pipeline, isn't it?

I hacked on it for a little bit and managed to get it working. I built an adapter that looks for a running webpack dev server and asks it for the CSS. If you're interested I could make a PR.

Sure, that would be a great starting point to discuss this further.

[tillcarlos]

Hey guys - thanks for the great work. I have tried all solutions from this post and finally settled with premailer-rails.

I also got this error

could not be loaded by any strategy. (for /packs/mailer-3243232.css)

But I could solve it with this kinda hacky solution. Maybe it helps the next person as well until webpacker support gets included. I threw this into the mailer layout. Works with preview and emails.

<link href="<%= Rails.application.routes.default_url_options[:host]%><%= Webpacker.manifest.lookup("mailer.css") %>" media="screen" rel="stylesheet" type="text/css" />

[mhanberg]

My current project uses webpacker and I was able to get premailer-rails to work by copying the stylesheet_pack_tag from the head of our application layout into the head of the mailer layout.

!!!
%html
  %head
    %meta(content="text/html; charset=utf-8" http-equiv="Content-Type")
    = stylesheet_pack_tag 'application', media: 'all'
  %body
    = yield

Hope that helps.

[daniel-rikowski]

Both solutions only work if CSS is extracted into separate files, e.g. by setting extract_css to true in webpacker.yml. (By default it is only true for production) Otherwise Webpacker.manifest.lookup and stylesheet_pack_tag just return nil.

It would be nice if premailer-rails supported javascript_pack_tag, at least in development mode. But that would require processing script tags and running Javascript before processing the document...

[full-of-foo]

With Webpacker 4 and extract_css set to true I needed to use the following:

= stylesheet_link_tag "#{root_url.chomp('/')}#{asset_pack_path('email.css')}"

[mhanberg]

@full-of-foo did you try using stylesheet_pack_tag instead of stylesheet_link_tag?

[full-of-foo]

@mhanberg yes, apologies, I see now that the following works:

# in development.rb
config.action_controller.asset_host = 'http://localhost:3000'

# in mailer
= stylesheet_pack_tag "email"

[mcmaddox]

@full-of-foo @mhanberg Trying to get this to work now... Do I need to import the mailer SCSS file I want to use into my application.js file? Or does the import statement belong in application.scss instead?

@fphilipe Support for Webpacker really should be standard now that it will be bundled by default in Rails 6. Easier said than done, of course, but I imagine this is going to be a frequently asked question until support is added.

[mhanberg]

@mcmaddox I have a app/javascript/packs/mailer.js that imports a app/javascript/css/mailer.css.

In my app/views/layouts/mailer.html.haml file, i have the following in the head tag.

%head
    %meta(content="text/html; charset=utf-8" http-equiv="Content-Type")
    = stylesheet_pack_tag 'mailer', media: 'all'

---

I would consider this library to already have Webpacker support.

[mcmaddox]

Strange... I followed the steps you outlined and I'm still not able to get premailer-rails to apply the stylesheet_pack_tag from the layout to the HEAD of my mailer in the iframe when I preview it on http://localhost:3000/rails/mailers.

Manifest.json shows both mailer.js and mailer.scss are being compiled in Webpacker, but only inline styles and adding CSS to a <style> tag in the mailer itself (not the layout) are working right now.

Am I missing a configuration for premailer-rails? I only added the line from the instructions:

Premailer::Rails.config.merge!(preserve_styles: true, remove_ids: true)

I'm also using ERB, not HAML.

[mhanberg]

@mcmaddox

These are the only config that I have set for mail related things I think

# development.rb
config.action_mailer.default_url_options = { :host => "localhost:3000" }
config.action_mailer.asset_host = "http://localhost:3000"

[mcmaddox]

@mhanberg I figured it out: my SCSS file was in the wrong file path & didn't include the stylesheet_pack_tag helper. My mailer also didn't include the layout call (DUH).

Everything is working now as you described. Thanks for your help.

@fphilipe Sorry for wasting your time. Thanks for the truly helpful gem.

[mhanberg]

@mcmaddox I'm glad you got it working.

For the record, I don't think you're wasting anyone's time 😄.