Grover not displaying any css in prod. Works fine in dev

[spacerobotTR]

Just getting this all set up with deploy via capistrano. The pdf renders in production, but it is not applying any tailwind styles. In development everything renders correct. Any thoughts on why? Here is how I export:

def export_to_pdf

    html = render_to_string(action: :show, layout: 'pdf', formats: [:html], locals: { :@invoice => @invoice })
    r = Grover::HTMLPreprocessor.process(html, 'http://localhost:3000/', 'http')

    respond_to do |format|
      format.html { render html: html }
      format.pdf do
        render_pdf(r, filename: @invoice.pdf_file_name)
      end
    end
end

[spacerobotTR]

As a work around I included the link to the tailwind cdn in the head of my pdf layout. It is working now. Not sure how to set the path of the stylesheets for grover with capistrano deploy.

[abrom]

without knowing a lot more about how your assets are setup/included etc it is difficult to comment in great detail, but as you've already found out, it does work if you include the assets. It sounds like that is where you should start (ie why are your assets, or more specifically the styles, not being included). You can enable the raise_on_request_failure option which will raise an error when an asset request has failed. I'd also suggest you check to see what asset paths your page is trying to include, then actually fetch those in the same way (ie using say curl on the production or similar instance). eg

curl http://localhost:3000/my/tailwind/asset.css

(of course replacing the path with what ever your path actually is!!)

You can then check to see what the browser is going to end up reading, thus using to render your page.

If tailwind is set to compile things dynamically and you haven't pre-compiled the assets for production.. well..

[brendon]

I'm having this same problem. There's no difference between dev and prod apart from the css being precompiled in production and injected in development (via Vite Ruby). The page in question is:

https://www.his.school.nz/newsletter_sets/online_newsletters/1

Appending .pdf to that URL attempts the conversion. You can see on that page that all the asset url's are absolute (though served from a seperate assets domain). Nothing too unusual in the controller:

  def show
    respond_to do |format|
      format.html do
        render 'online_newsletters/show'
      end

      format.pdf do
        html = render_to_string 'online_newsletters/show', formats: [:html]
        pdf = Grover.new(html,
          display_url: url_for(action: 'show', only_path: false),
          format: 'A4',
          margin: {
            top: '1cm',
            left: '1cm',
            right: '1cm',
            bottom: '1cm'
          },
          raise_on_request_failure: true
        ).to_pdf

        send_data pdf,
          type: 'application/pdf',
          filename: "newsletter.pdf"
      end
    end
  end

I'll keep plugging away but I thought I'd post here just in case there was something obvious I'm missing :)

[abrom]

Visiting that page and setting the CSS media type to print (as Grover does) I get what appears to be the same rendered output as captured in the PDF. I would suggest adding emulate_media: 'screen' to the options.

See https://github.com/Studiosity/grover#configuration

Alternatively you could include print (or all) in the media tag as specified in your main stylesheet:

<link rel="stylesheet" media="screen" href="https://assets.spikeatschool.co.nz/vite/assets/online_newsletter.be3d1035.css" data-turbo-track="reload">

Note I see there are two "online_newsletter" stylesheets. The other one does specify media="all" but it doesn't appear to have much in it (some trix-editor styles).

See https://www.w3schools.com/tags/att_link_media.asp

HTH

[brendon]

Ah of course! I was thinking about it on the way to work and figured it must have been something to do with the media attribute. I guess because the CSS is dynamically added to the page in development due to HMR it sidesteps the media attribute :) Grateful for your help :D

[brendon]

For others: the confusion comes from how vite_rails (big fan by the way!) manages CSS imported inside javascript land. It's vite_javascript_tag actually outputs stylesheet link tags too but the default media is screen not all so one has to pass media: 'all' like so:

<%= vite_javascript_tag '/components/newsletter_sets/app/javascript/entrypoints/online_newsletter', media: 'all', data: { turbo_track: 'reload' } %>

https://github.com/ElMassimo/vite_ruby/blob/788becb412a8ca3334688bea70033937ed9d28d8/vite_rails/lib/vite_rails/tag_helpers.rb#L34

https://vite-ruby.netlify.app/guide/rails.html#smart-output-✨