Development: Inline CSS & Manifest file

[zangab]

Hi,
we are currently moving from Webpack to Vite.
Almost everything is working except print styles.

We generate a PDF and therefore we need the CSS styles inline. Webpacker provided a manifest.json so we could read the path to the file via Code. We are missing this in Vite. We need to fetch the compiled CSS somehow. If I add an entrypoint print.js I could fetch the file via /vite-dev/entrypoints/print.js but there's just uncompiled code.

// example file, this gets returned
@import "@styles/base";
@import "@styles/grid";

How can I get the compiled scss file? And how can I enforce a manifest file development (without a build)?
Fyi: It makes no difference if I add an entrypoint print.scss.

Thanks.

[ElMassimo]

Hi there!

Vite also provides a manifest, which is implicitly read from when using helpers such as vite_stylesheet_tag when the dev server is not running or in production.

If you need to inline styles, you could do so without having to build your files, by using a helper to detect if the Vite dev server is running and simply fetching the file in CSS format (it will be precompiled on the fly), or reading the file locally when the build has already run:

  def vite_inline_style(path)
    path = ViteRuby.instance.manifest.path_for(path)

    css = if ViteRuby.instance.dev_server_running?
      uri = URI("#{ViteRuby.config.origin}#{path}")
      Net::HTTP.get(uri, {"Accept" => "text/css"})
    else
      File.read(Rails.root.join("public#{path}"))
    end

    "<style>#{css}</style>".html_safe
  end

This makes iterating on PDF styles very fast, as you wouldn't need to wait for rebuilds after tweaking them.

An even better approach, is to have a development-only endpoint that serves the HTML for the PDF, in which case you can visit the page directly and get HMR for styles, example:

  <% if local_assigns[:html_test] %>
    <%= vite_client_tag %>
    <%= vite_stylesheet_tag 'print.scss', media: 'all' %>
  <% else %>
    <%= vite_inline_style 'print.scss' %>
  <% end %>

[zangab]

Ok, nice, that works. There was an encoding issue but it's working. Thx very much 🤓 👍
But I can't see a manifest file even if this build.manifest option is set to true. If I start the dev server, it isn't doing a build right, so how would it create a manifest?? 🤔

Another question on how the internals are working:
if I render

vite_javascript_tag "foo.js"

and there's no manifest, how does the script tag know, where that file is? Is it just guessing and querying the file "foo.js" from the dev server? Because we tried to call vite_manifest.path_for() and also change the scope in a breakpoint to call lookup!() but the error missing_entry_error never gets triggered even if I would lookup! the file jfdklajflds.js (which does not exist).

[ElMassimo]

Please read the Overview.

[ermolaev]

Hi @ElMassimo, css via http works when i have stylesheets/print.scss

@import "print_table"
@import "print_label"

Net::HTTP.get(URI("http://localhost:3038/vite-dev/stylesheets/pdf.scss"), {"Accept" => "text/css"}) => OK

but if entrypoints/print.js

import.meta.glob("@/stylesheets/print/*.scss", { eager: true })

Net::HTTP.get(URI("http://localhost:3038/vite-dev/entrypoints/print.css"), {"Accept" => "text/css"}) => 404

but work js
Net::HTTP.get(URI("http://localhost:3038/vite-dev/entrypoints/print.js"), {"Accept" => "text/css"})
=>
"import * as __vite_glob_0_0 from \"/vite-dev/stylesheets/pdf/main.scss?inline\";import * as __vite_glob_0_1 from \"/vite-dev/stylesheets/pdf/payment-receipt.scss?inline\";/* eslint-disable import/first */\n\nimport \"/vite-dev/stylesheets/pdf/main.scss\"\n\n/* #__PURE__ */ Object.assign({\"/stylesheets/pdf/main.scss\": __vite_glob_0_0,\"/stylesheets/pdf/payment-receipt.scss\": __vite_glob_0_1})\n"

maybe have ideas how get css from entrypoints?