Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><em>We have an automated (albeit somehow awkward) solution working in production for a Rails 3.1 app with asset pipeline in place. Ryan already referenced the solution in his question but I try to come up with a more comprehensive answer.</em></p> <p>The asset pipeline pipes an asset through different Sprocket engines.</p> <p>So you might have e.g. a <code>ie.css.sass.erb</code> that runs through the ERB Sprocket engine and then passed to the Sass Sprocket engine etc. But it is always one file in and one file out.</p> <p>In this special problem, we would like to have 1 inbound file and n outbound files. We have not found a way to make this possible with sprockets. But we found a workaround:</p> <p>Provide an <code>ie.css.sass</code> that includes the complete stylesheet and a <code>ie_portion2.css.sass.split2</code> that just imports the complete ie.css file:</p> <pre><code>//= include 'ie.css' </code></pre> <p>For the <code>split2</code> file extension, we register a Sprockets Engine:</p> <pre><code>require 'css_splitter' Rails.application.assets.register_engine '.split2', CssSplitter::SprocketsEngine </code></pre> <p>When evaluating assets with the split2 extension, we pass its content to the CssSplitter and instruct it to extract the part 2 (> 4095 selectors):</p> <pre><code>require 'tilt' module CssSplitter class SprocketsEngine &lt; Tilt::Template def self.engine_initialized? true end def prepare end def evaluate(scope, locals, &amp;block) part = scope.pathname.extname =~ /(\d+)$/ &amp;&amp; $1 || 0 CssSplitter.split_string data, part.to_i end end end </code></pre> <p>This would also work for further parts (split3, ...).</p> <p><a href="https://gist.github.com/2398394#file_lib_css_splitter.rb" rel="noreferrer">The CSS Splitter</a> recognizes valid places where stylesheets can be split into parts with less than 4096 selectors and returns the requested part.</p> <p>The result is a ie_portion2.css which you have to link in the head and precompile separately.</p> <p>I hope my revised <a href="https://gist.github.com/2398394" rel="noreferrer">CSS Splitter Gist</a> is complete enough to employ the solution.</p> <p><strong>Update:</strong></p> <p>The CssSplitter mentionend above has been release as a gem now: <a href="https://github.com/zweilove/css_splitter" rel="noreferrer">https://github.com/zweilove/css_splitter</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload