使用RoR Asset Pipeline将样式表添加到Javascript

Question

I'm developing a third party script. I'm adding my own stylesheet to the page where the script is embedded. Currently the style is a long string in JavaScript. That's silly, but it's faster than appending a style link and making another http request.

Looking at the facebook SDK we see a php script that does something like this, with JS_FILES and CSS_FILES being arrays of file names:

// all.js
foreach ($JS_FILES as $file) {
  echo file_get_contents($file);
}

$css = '';
foreach ($CSS_FILES as $file) {
  $css .= file_get_contents($file);
}
// css URLs are relative to facebook domains
$css = preg_replace('#url\(/#', 'url(http://static.ak.fbcdn.net/', $css);
echo 'FB.Dom.addCssRules(' . json_encode($css) . ', ["pkg"])';

So the css is converted to JSON and sent to the FB.Dom.addCssRules function which appends the style to the page.

Writing css in JS strings is stupid. I want to utilize SCSS in my style, I want to have syntax highlighting and I want to develop in a reasonable environment.

What do I need to do, how to I hook into the Asset Pipeline / Sprockets / Tilt to make this thing happen?

Code examples are a big plus, as I'm not a crazy good ruby dev.

Edit : I went through the Asset Pipeline docs and didn't see any way to actually hook into it. The only option I see is to create a Tranfsorm class that calls the default transform and then converts the output to a JS string and sends it to a function. I don't really know how to do that. I don't know if I can even require a .jscss files without making the pipeline freak out. Another option (which is quite similar) is to write a gem like Black Coffee , again I don't really have an idea how should I go about implementing this.

Answer 1

You may not need a new template engine to accomplish this; you can use a few helper methods in your javascript file instead. You can use #evaluate to render a given CSS file inline, the result of which needs to be javascript escaped. According to sprockets documentation , you can include helpers by hooking into the Sprockets environment context class right in your js template. So, assuming you have a css file that compiles to 'inline.css', you can include ActionView::Helpers::JavaScriptHelper and do the following:

# css_string.js.erb
<% environment.context_class.instance_eval { include ActionView::Helpers::JavaScriptHelper } %>
css_string = "<%= escape_javascript(evaluate('inline.css')) %>";

Answer 2

Sprockets is not ideal for solving this problem. You'll end up writing code that is ugly and fails randomly (I speak from frustrating personal experience with Rails.application.assets.find_asset() .)

Instead, look into RequireJS + text plugin for composing Javascript with dependencies that are not JS (like CSS & Mustache/Handlebars templates), and building it all into an optimized single-file for production.

RequireJS integrates with Rails easily for dev & production using the requires-rails gem/engine.

Just take note that while you can use Sprockets & RequireJS in the same app, that you should never mix the dependency mechanisms //= require ... & define([...], function(...){}) in the same file/dependency chain.

Answer 3

I think @rossta has put you on the right track here. I would suggest a couple of modifications, though. First, if you are writing your stylesheets in sass, and would like the compiled css to be inserted in your javascript, the following would be one way to achieve that:

<%= escape_javascript(Rails.application.assets.find_asset('inline').to_s.chomp) %>

where inline.css.scss is somewhere on the assets search path. The method find_asset will compile your sass and return the output as a string. One issue is that the javascript in which you include this won't be re-compiled unless the javascript file itself changes, or you explicitly mark inline.css as a dependency. You can do this by including the directive

//= depend_on inline.css