Sorting paths messes up tailwind

[miharekar]

Ever since #71 or its fix in #72 the order of paths gets scrambled and that messes up tailwind for me.

I don't do any config.assets modification at all so this should all be default. I have the latest version of all the other gems.

Propshaft::LoadPath#initialize

propshaft 0.6.1 logic:

[4] pry(#<Propshaft::LoadPath>)> Array(paths).collect { |path| Pathname.new(path) }
=> [#<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/builds>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/images>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/stylesheets>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/turbo-rails-1.0.1/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/tailwindcss-rails-2.0.6-arm64-darwin/app/assets/fonts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/tailwindcss-rails-2.0.6-arm64-darwin/app/assets/stylesheets>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/stimulus-rails-1.0.3/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/importmap-rails-1.0.3/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actiontext-7.0.2.2/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actiontext-7.0.2.2/app/assets/stylesheets>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actioncable-7.0.2.2/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/activestorage-7.0.2.2/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actionview-7.0.2.2/lib/assets/compiled>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/javascript>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/vendor/javascript>]

propshaft 0.6.3 logic:

[5] pry(#<Propshaft::LoadPath>)> dedup(paths)
=> [#<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actioncable-7.0.2.2/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actiontext-7.0.2.2/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actiontext-7.0.2.2/app/assets/stylesheets>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/actionview-7.0.2.2/lib/assets/compiled>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/activestorage-7.0.2.2/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/importmap-rails-1.0.3/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/stimulus-rails-1.0.3/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/tailwindcss-rails-2.0.6-arm64-darwin/app/assets/fonts>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/tailwindcss-rails-2.0.6-arm64-darwin/app/assets/stylesheets>,
 #<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/turbo-rails-1.0.1/app/assets/javascripts>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/builds>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/images>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/stylesheets>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/javascript>,
 #<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/vendor/javascript>]

Before	After

So in the new version the tailwind compilation doesn't seem to work but I don't know enough about it to dive deeper.

Doing @paths = dedup(paths).sort.reverse fixes it, so this is definitely the issue, but that's not a proper fix 😅

I think the dedup method should respect the order of paths passed in.

[brenogazzola]

Weird. This should only affect the order that the files are copied. I’ll check this tonight.

[brenogazzola]

@miharekar Would you mind posting the generated HTML for that page here so I can use the same thing to test?

[miharekar]

@brenogazzola it's this repo https://github.com/miharekar/decent-visualizer

It's fairly standard so you should be able to easily reproduce. But if it's too much, I can do it, sure.

[miharekar]

OK, so the new version seems to load
gems/tailwindcss-rails-2.0.5-arm64-darwin/app/assets/stylesheets/tailwind.css
instead of
app/assets/builds/tailwind.css

I got to that by grepping for the v2.2.19 tailwind css version that was loaded 😅

which makes sense because
#<Pathname:/Users/miharekar/.gem/ruby/3.1.1/gems/tailwindcss-rails-2.0.6-arm64-darwin/app/assets/stylesheets>
appears before
#<Pathname:/Users/miharekar/Development/Personal/decent-visualizer/app/assets/builds>

and they're both named tailwind.css

[brenogazzola]

It's a bit unexpected that you have a tailwind.css file in your build directory. The assets:precompile should pull from the gem straight to the output path, without going through the build folder. Did you create a tailwind.css file inside your app/assets/stylesheets folder? It seems that their content is different, since changing their order is breaking your CSS.

EDIT: Nevermind, I'm checking your repository, and there's no Tailwind file there.

[miharekar]

But that's exactly what the tailwindcss-rails gem does:

The installer will create your Tailwind input file in app/assets/stylesheets/application.tailwind.css. This is where you import the plugins you want to use, and where you can setup your custom @apply rules. When you run rails tailwindcss:build, this input file will be used to generate the output in app/assets/builds/tailwind.css. That's the output CSS that you'll include in your app (the installer automatically configures this, alongside the Inter font as well).

[brenogazzola]

Yeah, it was my bad, sorry. I figured out what was confusing me. There seem to be multiple problems here.

Problem 1
On the 0.6.1 version I see 3 copies of the tailwind file. The one with the dae digest is for version 2.2.19 and is 7.0MB large. The 2 with the f59 version is for the 3.0.7 version and are 49kb large. I don't use Tailwind, so I don't know what might be causing this.

If you had a single version (3.0.7) my guess is that both 0.6.1 and 0.6.3 would give you the same appearance, but version 0.6.1 would give you the 49kb file and 0.6.3 would give you the 7.0MB version. Which is still bad, but makes more sense to me.

Problem 2
Now, problem in Propshaft is not the sorting. Sorting simply revealed where the true problem is (like you noticed).

What's happening is that there are two files with the logical path in the paths array. That is /app/assets/stylesheets/tailwind.css inside builds and tailwindcss-rails-2.0.6-x86_64-darwin. Instead of logging an alert or raising an error (sprockets uses DoubleLinkError), Propshaft is silently keeping the first file it found.

[miharekar]

Re problem 1: One is build, the other is from the gem, what's the third one?

What would fix it in this case would be to first load app paths, and then gems. Which could be achieved with sort. But if you want to raise in these cases, then yes, probably something with more structure is needed.

[brenogazzola]

Solution for 1: @miharekar You might want to check why your project has two different versions of Tailwind installed.

Solution for 2: @dhh This is a problem we talked about before. Two assets with the same logical path, and Propshaft silently keeping only the first one it finds. We need to log a warning, or raise an error. And in this specific case, where the user has no control over the names of the files, we need to teach Propshaft to ignore the tailwind.css file in the gem and use only the tailwind.css file in the build directory. I thought about using excluded_paths, but the installation path for the gem is going to change from installation to installation.

[brenogazzola]

@miharekar Keeping only the app's version of the file might still cause a problem if the developer needs the file that was inside the gem too (probably more common with gems that have image assets)

[miharekar]

You might want to check why your project has two different versions of Tailwind installed.

I only use what gem generates. Did you maybe mean application.tailwind.css and tailwind.css? They're two distinct files. One is where custom stuff goes, the other is the build version. But again, this comes out of the box with the tailwind-rails gem.

[brenogazzola]

I've linked an issue I opened in the tailwind gem. It seems that the file in the assets folder does not match the version tailwind actually uses (which comes from upstream.rb).