IE 8 Filter Style + Heroku Rake Asset Pre-Compile Error

If you are getting an error that looks like this:
could not connect to server: Connection refused Is the server running on host "127.0.0.1" and accepting TCP/IP connections on port xxxx?
…when pushing your Rails 3.2+ app to Heroku, there could be two problems at play. 
If that is all that you are seeing, then it likely means that Heroku is trying to initialize your app when it does `rake asset:precompile`. The issue is that there is no DB configured in a `non-initialized` state, so Heroku throws a fit. 
To fix that, they have a nice guide here (which basically involves just adding 1 line to your `config/application.rb` file).
However, if you are seeing something like this:
Running: rake assets:precompile
      rake aborted!
      Invalid CSS after "...: alpha(opacity": expected comma, was ":0);"
      (in /tmp/build_1lypjy898u7o0/app/assets/stylesheets/application.css.scss)     (sass):3665
Then it is very likely that you have another issue.
Apparently, the common css style rule that is used to apply an opacity filter to CSS objects in IE8 and below is illegal syntax.
Meaning that: `filter: alpha(opacity:0);` is an illegal CSS rule. As a result of that, SASS throws an error when it’s parser comes across these rules - which causes the entire precompile process to fail.
It is apparently a problem discussed and addressed in Rails before, but given that it is a SASS issue - and also that it involves illegal CSS syntax - the Rails maintainers have decided not to do anything to allow this call (understandably so).
So…the simple fix is to comment out all occurrences of that call in your stylesheets. IE9 allows the regular, `opacity: 0;`, I believe - so you should be fine for all browsers in the future.
An easy way to test this further, locally, is just to create a new git branch and run ‘rake asset:precompile’. You will see the errors it generates locally and you can work your way through it like that.
However, I went through many different solutions and commenting them out - turned out to be the easiest.
Let me know if you come up with any other solutions.
You should follow me on Twitter here.

Comments