Comments (12)
Weird. This should only affect the order that the files are copied. I’ll check this tonight.
from propshaft.
@miharekar Would you mind posting the generated HTML for that page here so I can use the same thing to test?
from propshaft.
@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.
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.
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.
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.
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.
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.
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.
@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.
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.
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)
- Rails asset_host config is not respected by CssAssetUrls compiler HOT 9
- Migrate from Sprockets 4 HOT 6
- Only the result of Dart sass build should be propshafted HOT 1
- Support for .erb files HOT 2
- Propshaft race condition with webpack creates 410 with dynamic chunk loading HOT 16
- esbuild chunking solution breaks after commit 3903815 HOT 10
- Blocking Sprockets seeping in from gem dependencies HOT 2
- 404 response on assets in production HOT 1
- Flag Icons not showing HOT 1
- digested source maps HOT 4
- Large numbers of files in my app/assets directory causes development to become very slow HOT 5
- svg inline display issues HOT 3
- Asset digest is computed before compilation HOT 7
- Not able to detect changes in the assets HOT 1
- Raising an error when an asset is not found HOT 4
- config.asset_host as a proc breaks asset paths HOT 1
- quiet_assets initializer breaks when using a custom Rails logger HOT 2
- Using images inside node_modules HOT 3
- Newly added files that are already digested aren't available in development HOT 4
- `assets:clean` task is not cleaning predigested assets with `.digest` in the name HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from propshaft.