https://avo.cool logo
Powered by
Good morning! I am having an unusual problem with ...
# avo-2
w
Good morning! I am having an unusual problem with a tailwind class in an overridden component. I recently created a couple of custom Avo components in my project, and in one of the component html.erb files I am using a tailwind class 
lg:max-h-[500px]
to constrain the height of an element. This works fine in my local development environment, but when I deploy to a heroku app the height constraint is not applied (I can see the tailwind class in the markup). I have tried the following steps to get it to work: 1. I added 
./app/components/**/*.rb
and 
./app/components/**/*.html.erb
to the 
content
section of my 
tailwind.config.js
file. 2. I added a 
safelist
section to the same file with an entry for 
lg:max-h-[500px]
Neither of these steps appears to fix the problem. Do I also need to run 
bin/rails avo:build-assets
as part of my heroku deploy process to get this to work?
I just ran across the footnote to https://docs.avohq.io/3.0/custom-asset-pipeline.html#use-tailwindcss-utility-classes that says I need to run 
yarn avo:tailwindcss
on deploy, so I'll add that to the heroku deploy process.
I also found that I had not added the 
avo:tailwindcss
script entry to my package.json file.
some progress -- I can see the following snippet in app/assets/builds/tailwind.css:
Copy code
@media (min-width:1024px){.lg\:max-h-500{max-height:500px}}
This looks like what I want, but I'm not sure if this file is being referenced by the page
Oh, I should mention that I found a way to replace the ad-hoc utility class call (
lg:max-h-[500px]
) with a theme extension so that it's no longer ad-hoc. I added the following to my tailwind.config.js: ``` theme: { extend: { maxHeight: { '500': '500px' } } } then I changed the class I used to 
lg:max-h-500
in my component html.erb file.
sadly this approach does not appear to work in my local development environment.
Alright, now I have spotted something interesting. The avo instructions at https://docs.avohq.io/2.0/custom-asset-pipeline.html#use-tailwindcss-utility-classes say that I will be prompted to add a script entry to my package.json file. That did happen, but the entry I made did not have a reference to the tailwind config file. This is surprising because the install process described at https://github.com/rails/tailwindcss-rails locates the config file under 
config
instead of in the project root. I kept noticing that running the yarn task would say "no utility classes found in your contents" which I thought was weird. Eventually I got the suspicion that 
yarn avo:tailwindcss
was not reading the 
tailwind.config.js
file. I confirmed this by modifying the yarn 
scripts
entry to include 
-c ./config/tailwind.config.js
. This caused the custom utility class to start working locally!
I will open an issue with all of this info -- I'm not 100% sure what the solution should be, but I think there's enough ambiguity here that something needs to be updated (docs or code).
I think that what I described in the issue is a problem, but it's not the whole problem for my case. I updated my 
tailwind.config.js
file in my project, but I think I need another change to get that command to execute as part of the heroku build process.
Back to that problem, I can confirm that the file 
avo.tailwind-foobar.css
in development has all of the required tailwind style information, where the file 
avo.tailwind.css
on my heroku site has the untouched source like 
@tailwind base;
. This makes me think it's not being parsed by 
tailwindcss
.
l
Hey Jim
so, you're saying that it works (the new tailwind classes are available to your custom tool) locally, in development, but not when you deploy to production
is that correct?
w
that is how it looks to me, yes
l
ok, then you need to run the compile command on prod too
Copy code
ruby

Rake::Task["db:migrate"].enhance do
  `yarn`
  `yarn avo:tailwindcss`
end
w
ah,... sneaky
I have been reading through heroku docs trying to figure out how to shoehorn that in
l
something like that
and you might need to run 
yarn
too
basically to run the same command from local that compiles the tailwind classes to prod too
* sorry I can't offer more help now and discover the exact thing
w
I will try this, but I am not sure it will work because I sort of tried it already. I tried modifying my Procfile 
release
line to add 
&& yarn avo:tailwindcss
. I think that since this runs after the slug has been created, it may not have the intended effect.
That gives me an idea though -- I could enhance the 
assets:precompile
rake task instead.
l
yup👆
w
hmm, that did not seem to change the behavior
I'm adding some text output to make sure my task enhancement is being run
ok, my text output appears in the heroku build log
l
can you check if that file is added to the right directory (I think it's 
app/assets/builds
) and that it's loaded onto the page?
w
Hmm, when I view the 
avo.tailwind.css
that is linked from the page it looks like this:
Copy code
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
that looks unprocessed to me
l
ok. then it might not take the right 
tailwindcss.config.js
file?
oh
yeaeh
not processed at all
w
I modified my package.json script entry for avo:tailwindcss to point to my tailwind config file
l
where is this file located?
in 
app/assets/styleshhets
?
if so, then it's valid to be unprocessed. it's just the source
w
in the repo, yes
l
oh. you should look on the server where the assets have been compiled
w
locally I also have a file of the same name in app/assets/builds
hmm
l
yeah. the builds one
that's the processed one with all the new classes
w
I tried to do that earlier in heroku but when I would 
cd assets
the heroku shell exited
very strange
I'll try that again
interesting -- no shell exit this time
I can see the unprocessed avo.tailwind.css in app/assets/stylesheets, and the processed avo.tailwind.css in app/assets/builds
l
> avo.tailwind.css in app/assets/builds
what's the contents there?
w
that one has all the tailwind style code that I need
so assets:precompile appears to pick the wrong one to put into public/assets/avo.tailwind-blahblah.css
wait
I linked to avo.tailwind.css directly in my manifest.js file
which probably seemed like a good idea at the time, but now...
I'm testing the removal of that direct reference from the manifest now
well, that did not change the contents of the avo.tailwind.css file
very surprising
let me double check my work
I did remove the reference to avo.tailwind.css from my manifest file (app/assets/config/manifest.js) but sprockets still chose to put app/assets/stylesheets/avo.tailwind.css (the unprocessed file) into public/assets/avo.tailwind-blahblah.css . Very strange.
My app/assets/config/manifest.js now looks like this:
Copy code
//= link_tree ../images
//= link_tree ../builds
//= link application.css
pretty straightforward
l
can you look in the page source?
find the avo.tailwind.css file
and open that
from your prod app
that should contain the compiled code with all your classes
w
when I view the source for that css file as linked from my page, it's the source of the unprocessed file
l
so it did not process it
w
correct
l
can you check the build command?
w
I ran 
RAILS_ENV=production bundle exec rake assets:precompile
locally just now, and it appeared to choose the correct file
l
that doesn't compile this one too AFAIK
the 
yarn avo:tailwindcss
command should
w
correct
l
on local it might pick up the yarn one
go in 
asst/builds
and delete everything and run 
RAILS_ENV=production bundle exec rake assets:precompile
you'll see it's broken too
w
yes, I would expect that to fail
I already had the compiled outputs in place
l
exactly
so, my hunch is that it's not running the yarn command on the server
w
what is interesting is that if I visit my heroku slug via 
heroku run bash
I can see the compiled css file
in the right place
l
where is it\?
w
I will re-run that process now and verify that the compiled avo.tailwind.css file is in the expected location within the heroku "slug"
l
where is the file?
w
Copy code
~ $ ls -l app/assets/builds
total 956
-rw------- 1 u36557 dyno 264284 May 23 21:12 application.js
-rw------- 1 u36557 dyno 460324 May 23 21:12 application.js.map
-rw------- 1 u36557 dyno  79044 May 23 21:12 avo.custom.js
-rw------- 1 u36557 dyno 140130 May 23 21:12 avo.custom.js.map
-rw------- 1 u36557 dyno  10414 May 23 21:12 avo.tailwind.css
-rw------- 1 u36557 dyno  10414 May 23 21:12 tailwind.css
~ $
l
ok
could it be that rails picks up the 
assets/stylesheets/avo.tailwidn.css
instead of the 
builds
one?
w
~ $ ls -l public/assets/avo.tailwind* -rw------- 1 u36557 dyno 145 May 23 20:49 public/assets/avo.tailwind-727aaabcff3ab779544847b78f71b65d03963692205b3bba1fc81dbe96d77906.css -rw------- 1 u36557 dyno 126 May 23 20:49 public/assets/avo.tailwind-727aaabcff3ab779544847b78f71b65d03963692205b3bba1fc81dbe96d77906.css.gz ~ $ ls -l app/assets/stylesheets/avo.tailwind* -rw------- 1 u36557 dyno 145 May 23 21:11 app/assets/stylesheets/avo.tailwind.css ~ $
l
can you on prod remove/rename the 
stylesheets
one?
w
that is what appears to be happening
hmm
waaaaaaaaaaaait
l
... so we test that
w
I think it's something even funnier
I read an article about Rake::Task#enhance
it runs the block after the rake task that is being enhanced
so right now I am compiling the tailwindcss file after assets:precompile has already run
computers are hard
l
that is correct
IDK why that's a problem (*sorry it's rather late on my end and I'm catching up slowly)
w
well, if I don't produce the compiled output file until after assets:precompile has run, it won't put the compiled output file into public/assets and fingerprint it.
l
got it
w
it's possible to call #enhance differently and have the task run before the one being enhanced.
Slightly different call syntax
l
yeah. something with an array...
w
🤞
l
:))
w
sweet sweet success
ok
I learned quite a bit today
l
pfff. me too
w
I still think that the issue I opened may be legitimate
l
that we lack docs 😛
w
my brain is close to empty, so I will review my work tomorrow and see what else might be good material for issues or pull requests
l
thank you Jim!
I appreciate the work!
w
👍 in the meantime, here's a gist with the rake task I used: https://gist.github.com/fastjames/41f6bf82743b8951f9d9b27d9f52d67d
l
thank you!
13 Views
PreviousNext
Powered by