sprockets - multiple entry points?

Question

Sprockets official documentation clearly says that:

Sprockets takes any number of source files and preprocesses them
line-by-line in order to build a `single` concatenation.

I'm a big fan of sprockets in Rails but here's the problem - my application has to support multiple layouts(desktop browsers) and mobile clients(iphone, ipad, android phones etc).

Both of this layouts require their own HTML reset CSS rules. Concatenated rules of desktop&mobile reset files would make a conflict because they override low level CSS directives.

How can I fix that?

Answer 1

You can get multiple top-level CSS files by making a Sprocket file for each. For example, say you want desktop.css to be comprised of reset.css, common.css, and ie.css and mobile.css to be comprised of common.css and ios.css. You would have the following files:

• app/assets/stylesheets/desktop.css
• app/assets/stylesheets/mobile.css
• app/assets/stylesheets/reset.css
• app/assets/stylesheets/common.css
• app/assets/stylesheets/ie.css
• app/assets/stylesheets/ios.css

In desktop.css, you would have the following:

/*
 *= require reset.css
 *= require common.css
 *= require ie.css
 */

In mobile.css, you would have the following:

/*
 *= require common.css
 *= require ios.css
 */

Then, in app/views/layouts/desktop.html.erb, you would do

<%= stylesheet_link_tag :desktop, :debug => Rails.env.development? %>

and similarly for mobile.html.erb.

Lastly, you'll need to set the precompiled asset list in config/environments/production.rb:

config.assets.precompile = %w( desktop.css mobile.css )

Answer 2

I'm not really sure if sprockets supports this but I know that if you use the Jammit gem. You can setup different packages each with it's own cocktail of your JS or css files. e.g. have a :workspace package for desktop and and :mobile package for mobiles. It is all defined in a config yaml file and it will concat them in the order you list them, which can help get plugin dependencies correct etc.

javascripts:
  workspace:
    - public/javascripts/vendor/jquery.js
    - public/javascripts/lib/*.js
    - public/javascripts/views/**/*.js
    - app/views/workspace/*.jst

  mobile:
    - public/javascripts/vendor/jquery.js
    - public/javascripts/lib/mobile.js


stylesheets:
  common:
    - public/stylesheets/reset.css
    - public/stylesheets/widgets/*.css
  workspace:
    - public/stylesheets/pages/workspace.css
  mobile:
    - public/stylesheets/pages/mobile.css

Jammit might be worth a look for your needs

Hope this helps.