Google Closure Stylesheets and Twitter Bootstrap

Running the Twitter Bootstrap CSS file through Google's Closure Stylesheets tool does not appear to be a fruitful experience at first. Getting it up and running is actually easier than you think.

The first pass through, you'll see a parsing error on a line with strange syntax:


Compiler parsing error: Parse error in bootstrap.gss at line 1971 column 20:
     border-radius: 0 \0;

The "\0" is an IE hack created by the Bootstrap developers. Unfortunately, it's not recognized by Closure. I simply commented this line out (line #1971) and made a note about the parse error. Bam. So it works, right?

Not so fast. Running the tool again yields many many more errors. These errors fall into only two groups: duplicate declarations and unknown functions.

The first type of error, duplicate declaration, would look like this:

Detected multiple identical, non-alternate declarations in the same ruleset. If this is intentional please use the /* @alternate */ annotation. border:[1px, solid, rgba(0,0,0,0.15)] in bootstrap.gss at line 566 column 1:
      }

What this is telling you is that the ruleset ending on line #566 (hence the closing curly brace) contains a duplicate declaration of "border". In other words, Closure Stylesheets requires you to indicate all of the overriding cross-browser style declarations.

The simple way to fix these errors is to prepend "/* @alternate */" to the duplicate declarations, like so:

pre {
  background-color: #f5f5f5;
  display: block;
  padding: 8.5px;
  margin: 0 0 18px;
  line-height: 18px;
  font-size: 12px;
  border: 1px solid #ccc;
  /* @alternate */ border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  white-space: pre;
  /* @alternate */ white-space: pre-wrap;
  word-wrap: break-word;
}

Why prepend? That's just the convention in the documentation.


The second type of error, unknown functions, look like this:

Unknown function "color-stop" in bootstrap.gss at line 1407 column 69:
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222));

Fixing this error is simple, and you only need to implement it once. When writing your compilation options (like "--output-file" and/or "--pretty-print") simply add "--allowed-non-standard-function" followed by the unknown function name in the error message. In this example, the fix would be:


--allowed-non-standard-function color-stop

You will need to list this argument for each unknown function name.


That's it!