Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sassc dependency breaks compatibility with tailwindcss-rails #2091

Closed
philipithomas opened this issue Dec 22, 2021 · 25 comments
Closed

sassc dependency breaks compatibility with tailwindcss-rails #2091

philipithomas opened this issue Dec 22, 2021 · 25 comments
Labels
bug breakages in functionality that is implemented

Comments

@philipithomas
Copy link

  • What were you trying to do?

I'm trying to use tailwind-rails v2.0.2 and importmaps.

  • What did you end up with (logs, or, even better, example apps are great!)?

I'm getting a SassC::SyntaxError when I run rake assets:precompile. Based on my debugging, it's because tailwind-rails is incompatible with the sassc-rails gem that administrate requires as a dependency:

Tailwind uses modern CSS features that are not recognized by the sassc-rails extension that was included by default in the Gemfile for Rails 6. In order to avoid any errors like SassC::SyntaxError, you must remove that gem from your Gemfile.

  • What versions are you running?

Rails 7.0
Administrate 0.16.0

@philipithomas philipithomas added the bug breakages in functionality that is implemented label Dec 22, 2021
@philipithomas philipithomas changed the title sassc breaks compatibility with tailwindcss-rails sassc dependency breaks compatibility with tailwindcss-rails Dec 22, 2021
@AnalyzePlatypus
Copy link

Please fix this, I have the same problem

@n-studio
Copy link
Contributor

n-studio commented Jan 1, 2022

The solution is pretty simple: we need to get rid of all JS/CSS dependencies and just mention how to add them in the README.

We must let developers choose the way they handle their assets, whether it's using sassc, webpack or importmap.

Maybe we can add some generator rails g administrate js:importmap or something like that.

@etozzato
Copy link

etozzato commented Jan 6, 2022

administrate is a Rails::Engine, which means it is a Rails app. Would it be useful to refactor the code following the 'update to rails 7 guides' and homogenize the handling of resources?

@pablobm
Copy link
Collaborator

pablobm commented Jan 13, 2022

Unfortunately, this may not be simple at all. Before Rails 7, there were two main ways of handling assets: Webpacker and Sprockets. We have tried to make Administrate work with both, but it's difficult work and complex to reproduce issues.

Now Rails 7 has arrived with yet another way to do things. We'll have to spend the time to make it work there too, and we would rather that Administrate kept working with previous versions of Rails (at the moment we support Rails 5+).

I haven't used Rails 7 yet and I haven't really read much about how the new way to work with assets is. I will have to eventually, but right now I'm a bit short of time so I don't know when I'll get to sit down and figure this out :-/

Fortunately, it doesn't need to be us maintainers who do this work. One of you may be able to volunteer and offer a first stab at the solution. It doesn't need to be a complete PR: an initial prototype could help communicate what exactly needs to happen, and to start testing if there are issues with back compatibility.

Any takers? :-)

@n-studio
Copy link
Contributor

@pablobm
I have a fork compatible with Rails 7, I'll try to make it retrocompatible and submit a PR this weekend.
Are you ok with the idea of adding generators to add assets in the Rails app? This would be a breaking change but the upgrade would be easy and straightforward.

@n-studio
Copy link
Contributor

@pablobm Another way to fix this issue is to compile the assets and commit the compiled assets. This would avoid breaking changes. Would you prefer this method?

@pablobm
Copy link
Collaborator

pablobm commented Jan 14, 2022

@n-studio - I would consider it. If you create a PR so that I can see what it looks like, it can help me understand.

@n-studio
Copy link
Contributor

@pablobm Here is my PR #2116
I hope you like that solution.

@dvruette
Copy link

dvruette commented Jan 20, 2022

I've been running into the same issue and the PR by @n-studio seems to fix it, thank you so much!

As a hotfix for anyone else running into this, I've added the branch with the fix to the Gemfile like so:

gem "administrate", github: "n-studio/administrate", branch: "compile-assets"

@philipithomas
Copy link
Author

@dvruette

I've been running into the same issue and the PR by @n-studio seems to fix it, thank you so much!

As a hotfix for anyone else running into this, I've added the branch with the fix to the Gemfile like so:

gem "administrate", github: "n-studio/administrate", branch: "compile-assets"

This is a completely valid fix - but it will break if @n-studio deletes that particular branch in the future. And, it's a development branch - not main - so it's not reasonable to expect it to stick around. So, please fork the code to your own Github if you want to follow this approach! (and replace github: "n-studio/administrate" with your own fork)

@tkoenig
Copy link

tkoenig commented Mar 30, 2022

What I did for some projects which still depend on Sass was creating my own compressor, which skips the SassC compression if it fails.

class SkippingSassCompressor
  def compress(string)
    options = { syntax: :scss, cache: false, read_cache: false, style: :compressed}
    begin
      Sprockets::Autoload::SassC::Engine.new(string, options).render
    rescue => e
      puts "Could not compress '#{string[0..65]}'...: #{e.message}, skipping compression"
      string
    end
  end
end

Since the skipped (tailwind) files, are not compressed this way, I just added the --minify option to the tailwindcssCLI to compress them as well.

"build:css": "tailwindcss -i ./app/assets/stylesheets/home.tailwind.css -o ./app/assets/builds/home.css --minify"

I did not test this especially with administrate, but have this working on multiple projects where we want to slowly migrate to tailwind.

@januszm
Copy link
Contributor

januszm commented Apr 25, 2022

Would this help here? sass/sassc-ruby#220 (comment) / https://github.com/ntkme/sassc-embedded-shim-ruby
(but ultimately yes, removing sass from this project is another option)

@supert56
Copy link

I ended up going down the same route as @tkoenig. It seems to work well for the time being 👍

@jankeesvw
Copy link
Contributor

We are currently using the fork by @n-studio, but we would love to run the official version with the new features. Is anyone working on this still? We are using the new Rails 7 defaults (cssbundling-rails & jsbundling-rails).

@czepesch
Copy link

czepesch commented Jul 22, 2022

unfortunately @n-studio's fork breaks Stimulus..
sorry, this compile-assets branch breaks Stimulus, but @n-studio's fork have fix for date-picker, so it works!
update:
I feel lost, please someone clarify.
I can't deploy app to production, because of SassC::SyntaxError: Error: Function rgb is missing argument stuff.
Branch compile-assets allows to deploy, but breaks Stimulus because of ujs\date-picker problems.
@n-studio's main branch fixes Stimulus, but I can't deploy with this fork because of SassC issues..
what should I use to be able to deploy and still have Stimulus?
Thank you.

@jusko
Copy link

jusko commented Aug 13, 2022

This was quite a time consuming issue to get to the bottom of. Thanks @tkoenig and @n-studio for offering stop gap solutions.

@geniuskidkanyi
Copy link

Moving to dartsass-rails will fix this issue, i currently got it working with dartsass, i had to generate the administrate gem stylesheets in my project
here is a link to my fork with dart-sass
fork works with tailwind

@geniuskidkanyi
Copy link

Moving to dartsass-rails will fix this issue, i currently got it working with dartsass, i had to generate the administrate gem stylesheets in my project here is a link to my fork with dart-sass fork works with tailwind

i just updated the branch, now you dont need to generate the assets in your project

saramic added a commit to failure-driven/pair-with-me that referenced this issue Dec 16, 2022
seems that Administrate depends on SassC compression which does not work
with TailwindCSS and so implemented the fix from
  thoughtbot/administrate#2091 (comment)

This seemed not to affect development and only showed up in tests.
Presumably this would affect production.
@nickcharlton nickcharlton mentioned this issue Jan 20, 2023
3 tasks
@kaliara
Copy link

kaliara commented Jan 23, 2023

Neither of the forks above worked for me (because I think administrate has pushed new commits after those forks were made). So I created a new up-to-date fork here: https://github.com/materialsnow/administrate

You can run rails assets:precompile locally in the app that is leveraging Administrate to make sure that step will work during your build. Just fix any errors (like adding the assets to manifest.js) and you should be good to go.

It works for me as of this posting. I'm using Rails 7.0.4. Best of luck!

AlejandroMI added a commit to AlejandroMI/wibio that referenced this issue Feb 2, 2023
Assets compilation was failing because tailwind css is trying to be compressed by sassc. Read: thoughtbot/administrate#2091

I have updated test and production enviroments and added a test that checks that no errors ocurs on the precompile task and that production config is matching tests in this specific scenario
@oroth8
Copy link

oroth8 commented Feb 6, 2023

I also tried various forks and solutions mentioned on this issue page. Nothing worked. I created a fork myself https://github.com/oroth8/administrate and it works perfectly with my rails 7 tailwind configured app.

@jankeesvw
Copy link
Contributor

I would love it if there was official support for this.
Is there anyway we can get this merged (maybe as a major version bump)?

@sedubois
Copy link
Contributor

sedubois commented Sep 4, 2023

Actually, it looks like we managed to continue to use administrate, even with its dependency on the old sassc-rails, while the rest of our app changes to cssbundling-rails with Dart Sass (for our legacy views) and Tailwind (for new views). The key for us was to ensure config.assets.css_compressor was set to nil for all Rails environments. Without this we encountered errors such as ActionView::Template::Error: Error: Function rgb is missing argument $green and I think also errors of the type ActionView::Template::Error: Asset X was not declared to be precompiled in production. So far we haven't needed to use one of the administrate forks suggested in this PR. Also see rails/cssbundling-rails#129.

@kaka-ruto
Copy link

Thank you all for your solutions to this, it's been a headache! You solution @sedubois worked for me, thank you for sharing it. I just dropped Rails.application.config.assets.css_compressor = nil in config/initializers/assets.rb and it worked.

@marcobeffa
Copy link

marcobeffa commented Dec 10, 2023

Thank you all for your solutions to this. Your solution @kaka-ruto @sedubois Thank You. I just dropped Rails.application.config.assets.css_compressor = nil in config/initializers/assets.rb and it worked.

@nickcharlton
Copy link
Member

I'm going to close this we've just merged in #2397, which will mean that in future release we'll be bundling assets in the Administrate Gem and so we've been able to drop any dependencies on assets from those using the gem.

I'm expecting this will mean Tailwind will work fine now, regardless of how you go about bundling the assets in your applications.

I'm going to start releasing some pre-release versions of the gem in the coming days, as I'm sure I'm about to break stuff for people, and so we can get feedback and make sure there's nice migration help sorted out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug breakages in functionality that is implemented
Projects
None yet
Development

Successfully merging a pull request may close this issue.