Hot reload Engine stylesheets?

[justinfrench]

I've been playing around with the new Engines integration.

I'm working on a gem locally (bundled into a Rails app using the path: option in the Gemfile), and have found that I need to restart the Rails sever after making any changes.

I imagine this is expected behaviour for anyone simply bundling in a Engine gem to their app, but maybe I'm doing something wrong?

Either way it's an absolute slog for local gem development. Anything we can do to make it a bit smoother (either in the gem, or in tailwindcss-rails)?

[justinfrench]

Okay, found an okay temporary solution. Add this to app/assets/tailwind/application.css:

@source "../../../../your_gem_name";

It'd be nice if I could have this be conditional in some way (like an environment variable, or perhaps a naming conventions for file names with @import, or something that could be checked into source control), but the above is workable for now.

[flavorjones]

cc @bopm

[bopm]

@justinfrench I have configuration like that. Unfortunately, I can't reproduce your issue.

In my Gemfile:

gem 'turbo_material', path: '../turbo_material'

In my app/assets/tailwind/application.css:

@import "tailwindcss";
@import '../builds/tailwind/turbo_material.css';

@source "../../javascript/**/*.js";
@source "../../../views/**/*.{erb,haml,html,slim}";

In my layout:

<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

You can find my engine CSS here.

When I add/remove styles to my components, it triggers CSS rebuild, which can be confirmed from console:

css    | Done in 2ms
css    | Done in 27ms
css    | Done in 516µs
css    | Done in 24ms

When I reload the page, my CSS changes are reflected in my host app:

diff --git a/app/views/components/_chips_select.html.erb b/app/views/components/_chips_select.html.erb
index ef16540..beb4285 100644
--- a/app/views/components/_chips_select.html.erb
+++ b/app/views/components/_chips_select.html.erb
@@ -19,7 +19,7 @@
        <% if required %>aria-required="true"<% end %>
   >
     <span class="mdc-select__ripple"></span>
-    <span id="<%= id %>-label" class="mdc-floating-label relative! w-full!"><%= label || name.capitalize %></span>
+    <span id="<%= id %>-label" class="mdc-floating-label relative! w-full! text-red-500!"><%= label || name.capitalize %></span>
     <div class="mdc-chip-set grow! flex-wrap!" role="grid"></div>
     <%= render 'components/select_dropdown_icon' %>
     <span class="mdc-select__selected-text-container grow-0! max-h-0!"><span id="<%= id %>-selected-text" class="mdc-select__selected-text hidden!"></span></span>

becomes (mind red label):

I am happy to help, but I need more details for reproduction.

[justinfrench]

@bopm thanks so much for this.

I followed everything above and had the same result, but then i reviewed your engine's tailwind/engine.css an this line is what I needed:

@source "../../../views/**/*.erb";

This is much better than having to temporarily add something into the host app's files, but if it's possible, I still think the ideal would be for Tailwind to automatically scan all source files from engines, not just the ones the engines explicitly name as a source (because you don't need to name the sources in the host app).

@flavorjones I don't know how feasible that is, so I'll leave it with you to decide if this should be closed out or left open to explore.

[bopm]

this line is what I needed

Good to hear. I will consider adding some edits to our documentation.

ideal would be for Tailwind to automatically scan all source files from engines, not just the ones the engines explicitly name as a source

Few things around that. First of all, I've started from there in #484, and it never landed. Too many complexities to agree on. And at the same time, lots of engines have dummy test apps, which should not be included in generation.

because you don't need to name the sources in the host app

Here again, you lost me. Sources should be defined inside Engine. It's the decision of the Engine author what to include, and what to exclude from generated styles. Host app only includes engine entry-point CSS, which contains that configuration.

If I get you wrong, please elaborate more. I am interested to hear.

[justinfrench]

If I get you wrong, please elaborate more. I am interested to hear.

Here’s the point I was trying to make:

• in a regular Rails app with Tailwind, the whole app’s is automatically scanned by Tailwind for changes without having to name sources
• i think it’s fine that an app should explicitly add an engine as a source
• but I don’t understand why the engine has to explicitly name its sources — an engine is like a mini rails app, so it’s surprising that the behavior of the engine is different to the host app

Hopefully that’s clear now.

However, this isn’t anywhere near a deal breaker. As long as it’s documented clearly, I think Tailwind Engine developers will be fine.