Code Monkey home page Code Monkey logo

Comments (12)

brenogazzola avatar brenogazzola commented on July 30, 2024

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

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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

from propshaft.

miharekar avatar miharekar commented on July 30, 2024

@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.

from propshaft.

miharekar avatar miharekar commented on July 30, 2024

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

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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.

from propshaft.

miharekar avatar miharekar commented on July 30, 2024

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).

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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.

from propshaft.

miharekar avatar miharekar commented on July 30, 2024

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.

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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.

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

@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)

from propshaft.

miharekar avatar miharekar commented on July 30, 2024

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.

from propshaft.

brenogazzola avatar brenogazzola commented on July 30, 2024

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).

from propshaft.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.