ucla/WebBlocks — pull request #398 by ebollens (2013-06-04 18:47:00+00:00)
Title: Fix #396 - Add support for CSS splitting

Internet Explorer up through version 9 has a problem whereby it does not allow more than 4095 selectors per stylesheet.

One spitter implementation was proposed here:
https://gist.github.com/ChristianPeters/1131536

This has made it back into Rails here:
https://github.com/zweilove/css_splitter

Unfortunately, it is very primitive in the way it regards CSS. It does not know how to account for `@media` statements, simply splitting based on the `}` character. Initially, I tried to come up with a way to expand on their implementation: track `@media` scope and, when 4095 selectors are reached, close all open scopes, spin up a new file, and open all those scopes again; however, the CSS grammar is a bit rough, and so I decided better would be to leverage the existing structure of the OptiCSS project that I was working on for CSS optimization (has the parser and a DSL, although none of the actual optimization strategies were ever completed).

To this end, this pull request adds OptiCSS and defines the following rule:

```ruby
split_save [[save_file]]
```

The `[[save_file]]` block is replaced by the actual file name. By changing properties under `WebBlocks.config[:package][:opticss]`, one can actually add additional commands as well, although I don't likely see a use for this yet as OptiCSS has never had any optimization strategies completed. Still, it's incredibly useful for this case.

However, because of the experimental nature of OptiCSS, I have *not* made this a default package. Instead, if one wants to run with OptiCSS, they must add the following line to `Rakefile-config.rb`:

```ruby
WebBlocks.config[:build][:packages] << :opticss unless WebBlocks.config[:build][:packages].include? :opticss
```

Once this is enabled, as long as debug mode is *not* set to true, the sheets will be split and an aggregate sheet will be generated for `blocks[-ie].css` (in the event that the split produces more than one sheet - if it does a single sheet, then sheet is not chucked). Note that if debug mode is on, then OptiCSS will not run.

A few advantages garnered by this approach over the old one:

* Accounts for `@media` rules
* Does not cap out at 8190 rules after two files
* Generates a synthesis file of `@import` rules