Using CSS from a gem and unable to compile the custom stylesheets

Sharetribe Go Community Edition
1

Hi folks,

I’m using a gem that has some custom CSS in it.

Here’s my application.css

// Vendor
//= require jquery.nouislider
//= require jquery.fileupload
//= require datepicker3
//= require selectize

//= require fullcalendar_engine/fullcalendar
//= require fullcalendar_engine/jquery-ui-1.10.3.custom


//= require ./reset
//= require ./main

//= require tfc

//= require_tree ./partials
//= require_tree ./views

This works fine in development. However, when I move to production, there are problems.

When I run heroku run rake sharetribe:generate_customization_stylesheets_immediately I see this error:

rake aborted!
Sprockets::FileNotFound: couldn't find file 'fullcalendar_engine/fullcalendar'
  (in /tmp/1461189150545/stylesheets/application.scss:7)
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/context.rb:106:in `resolve'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/context.rb:146:in `require_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/directive_processor.rb:217:in `process_require_directive'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/directive_processor.rb:167:in `block in process_directives'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/directive_processor.rb:165:in `each'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/directive_processor.rb:165:in `process_directives'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/directive_processor.rb:99:in `evaluate'
/app/vendor/bundle/ruby/2.2.0/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/context.rb:197:in `block in evaluate'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/context.rb:194:in `each'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/context.rb:194:in `evaluate'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/processed_asset.rb:12:in `initialize'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:374:in `new'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:374:in `block in build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:395:in `circular_call_protection'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:373:in `build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/index.rb:94:in `block in build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/caching.rb:58:in `cache_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/index.rb:93:in `build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:287:in `find_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/index.rb:61:in `find_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/bundled_asset.rb:16:in `initialize'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:377:in `new'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:377:in `build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/index.rb:94:in `block in build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/caching.rb:58:in `cache_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/index.rb:93:in `build_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:287:in `find_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/index.rb:61:in `find_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/environment.rb:75:in `find_asset'
/app/vendor/bundle/ruby/2.2.0/gems/sprockets-2.12.4/lib/sprockets/base.rb:295:in `[]'
/app/app/services/stylesheet_compiler.rb:106:in `sprockets_compile'
/app/app/services/stylesheet_compiler.rb:73:in `block in compile'
/app/app/services/stylesheet_compiler.rb:129:in `block in in_work_dir'
/app/app/services/stylesheet_compiler.rb:136:in `in_temp_dir'
/app/app/services/stylesheet_compiler.rb:126:in `in_work_dir'
/app/app/services/stylesheet_compiler.rb:71:in `compile'
/app/app/services/community_stylesheet_compiler.rb:45:in `compile'
/app/app/services/community_stylesheet_compiler.rb:29:in `block in compile_all_immediately'
/app/vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.5.2/lib/active_record/relation/delegation.rb:46:in `each'
/app/vendor/bundle/ruby/2.2.0/gems/activerecord-4.2.5.2/lib/active_record/relation/delegation.rb:46:in `each'
/app/app/services/community_stylesheet_compiler.rb:28:in `compile_all_immediately'
/app/lib/tasks/sharetribe.rake:18:in `block (2 levels) in <top (required)>'
Tasks: TOP => sharetribe:generate_customization_stylesheets_immediately
(See full trace by running task with --trace)

The full stack trace is not much different. It looks like the gem assets aren’t being found.

Do I need to do something with the gem (which is here: https://github.com/thefoodcorridor/fullcalendar-rails-engine/ )

I did some googling and looked at http://guides.rubyonrails.org/engines.html and http://guides.rubyonrails.org/asset_pipeline.html but they weren’t really helpful, perhaps because the rake task is custom to sharetribe. I looked at app/services/stylesheet_compiler.rb and app/services/community_stylesheet_compiler.rb but wasn’t sure how to get the compiler to find the css provided by the gemfile. I tried this with and without the engine adding its assets to the pipeline:

Rails.application.config.assets.precompile += %w(
        fullcalendar_engine/*
      )

I also tried pulling in the stylesheets directly (modifying the haml with stylesheet_link_tag 'fullcalendar_engine/fullcalendar' ) And that works fine, except then it references images without the sha digest (but the pipeline doesn’t serve up images without the digest).

My ultimate goal is to have the images that are in the background of the CSS from the gemfile served appropriately. Any guidance on either the immediate issue or the long term goal is really appreciated.

Thanks.

2

One workaround I am considering–hardcoding the assets in the gem’s stylesheet to a s3 bucket I control, maybe with a ?timestamp, and just not worrying about the far-future expiration.

3

That’s a bit tricky question. I’m not very familiar with Rails Engines and how the custom CSS in the Engine work with the asset pipeline. But here are a couple ideas that came to my mind:

I assume that the custom CSS in the Engine doesn’t use any custom colors, so it doesn’t need to be compiled the same way as other CSS files. You could just include the CSS with a separate stylesheet_link_tag as you have tried already. If the images don’t have the cache fingerprint in them, I guess that’s an issue with the gem code not using asset pipeline.

There seems to be an open issue which looks a bit similar than your issue: https://github.com/vinsol/fullcalendar-rails-engine/issues/26

4

Thank you, I’d missed issue #26.

I ended up going with the workaround I suggested above–just modifying the gem css file to pull from a S3 bucket directly. Not optimal, but don’t expect to be changing those assets very often.

Thanks for the feedback.

1 Like