YUI Compressor breaks CSS3 Media Query Syntax

If you use the CSS3 Media Query Syntax for something like this:

@media screen and (max-device-width: 480px) {
  body {font-size: 18px;}
}

You will find that when you compress this with YUI Compressor (as is done when packaging your assets with Jammit), that the output breaks this syntax. YUI Compressor removes the whitespace between the "and" and the opening parenthesis, which does not conform to the CSS3 standard, and renders those styles unusable in most browsers (tested in Chrome and Safari, read about others hitting this in Firefox).

There's a YUI Compressor bug filed here that covers this: http://yuilibrary.com/projects/yuicompressor/ticket/2528053

My Workaround

I am invoking YUI Compressor via an asset-packager called Jammit. In a blog post yesterday, I noted some problems I encountered with Jammit not handling duplicate @charset directives generated by Sass/Compass, and outlined a quick hack workaround I used to deal with it.

Today, encountering this @media-related bug leads to an additional workaround I had to add to that. So, I figured I'd share a bit of my resulting rake task that combines all of these.

• Use compass to compile my Sass to CSS without compressing it (this is important)


• Use sed to remove all @charset directives (dangerous, but I know I don't need them in this case). Take care to make sure the differences in how the -i parameter to sed works between OS X and Linux.


• Use jammit to package up everything.


• For each permutation (e.g.: normal, datauri) CSS package jammit generated, use sed to add the missing space back in to offending @media directives.


• For each of those CSS files we sed-edited, re-gzip them. (Jammit made gzipped versions originally, but we have to regenerate them since we changed the contents.)

Here's the final rake task:

	namespace :assets do
	task :rebuild do
	# Config the base names of all the jammit CSS packages you have defined
	# in assets.yml. Could probably parse assets.yml to get this if
	# we wanted to.
	packages = ['common']
	# This is because on OS X, you have to put an explicit empty string to the
	# required extension argument with the -i parameter, but on Linux you
	# do not.
	in_place_option = "-i"
	if `uname` =~ /darwin/i
	in_place_option = '-i ""'
	end
	Dir.chdir(RAILS_ROOT) do
	sh("compass compile --force")
	# This is a workaround for this jammit bug:
	# https://github.com/documentcloud/jammit/issues/#issue/120
	#
	sh("sed #{in_place_option} -e \"s/^@charset.*$//g\" public/stylesheets/*.css")
	sh("jammit --force")
	# This is a workaround for this YuiCompressor bug:
	# http://yuilibrary.com/projects/yuicompressor/ticket/2528053
	#
	Dir.chdir("public/assets") do
	packages.each do |package|
	Dir.glob("#{package}*.css").each do |file|
	sh("sed #{in_place_option} -e \"s/@media \\([^[:space:]]*\\) and(/@media \\1 and (/g\" #{file}")
	sh("gzip --best --stdout #{file} > #{file}.gz")
	end
	end
	end
	end
	end
	end

view raw assets.rake hosted with ❤ by GitHub

Jammit, Compass, and Safari: Can't we all just get along?

When Jammit is used with CSS files generated by Compass, the resulting CSS file may not work with Safari. This is because every Sass file that includes Compass will add the following line to the top of the generated CSS file:

    @charset "UTF-8";

That happens because something in Compass requires UTF-8, and Sass will generate that line if anything it is processing requires UTF-8. This is all fine...until you try to combine more than one of these standalone-css files with an asset packager such as Jammit.

Once Jammit combines all these CSS files, you end up with one CSS file that has multiple @charset directives in it, which according to the W3, is a no-no. Generating a CSS file with more than one @charset directive (and anywhere other than the very first line) is clearly against the W3's spec...but the only browser it seems to break is Safari.

But here's the thing: why do my CSS files need to have the @charset added by Sass when they don't actually get output with any non-ASCII characters?

In the end, my quick stop-gap solution was to remove them myself. I used to let Jammit do all the driving. During deployment it would force the regeneration of the CSS files and package them. Now I have to break out the Compass step and add my own sed command in order to remove all the @charset directives:

	compass compile --force
	sed -i -e "s/^@charset.*$//g" public/stylesheets/*.css
	jammit --force

view raw jammit.sh hosted with ❤ by GitHub

I think each one of these components has something to improve:

Safari:

If you don't support multiple @charset directives, I support you on that front. The spec says you're right. However...can't you just raise an error that says "ERROR: multiple @charset directives" or something? That would be much better than just randomly disabling half the CSS styles.

Sass:

Sass shouldn't add a @charset line if the generated CSS does not need it. If a mixin that uses UTF-8 is included but not used, and is not represented in the generated CSS, there is no need to add a @charset directive on its behalf.

Compass:

Compass is probably doing nothing wrong here. Though I do question why it needs to use UTF-8 characters. Maybe that's for a feature I haven't used yet.

Jammit:

In the end, I think Jammit is the real culprit here. It takes in N perfectly-valid CSS files and outputs one invalid CSS file. Jammit should remove duplicate @charset directives, and if they are conflicting, it should convert the charset of the conflicting stylesheet and into the charset being used by the output file.

Workaround an IE bug: Redirecting subdomains to www while preserving virtual hosts (Nginx, Rails)

I ran into an interesting redirect configuration problem that was exacerbated by Internet Explorer's handing of cookies, which led me to move all subdomain redirection logic out of my Rails app and into Nginx. In the end, this feels like a good thing anyway. If you just want the conclusion, skip to the solution section.

Background

My original setup was to have nginx have virtual hosts for www.example.com, test.example.com, and staging.example.com, where the www.example.com was the default one that would catch anything else such as foo.example.com, or just example.com. Then the Rails app at www.example.com would check the URI in a before_filter and redirect to www.example.com, using a solution similar to the one described here: http://stackoverflow.com/questions/327122/redirect-myapp-com-to-www-myapp-com-in-rails-without-using-htaccess.

Problem

The problem arose when an Internet Explorer user hit the site via http://example.com (i.e.: without the "www." prefix). Here is what happens when someone hits example.com in this setup:

1. The default virtual host for www.example.com picks up the request and hands it to the Rails app.
2. The Rails app's before_filter sees that the request.host does not start with 'www', and does a redirect.
3. Somewhere the ActionController internals set a session cookie on the domain "example.com" -- even though this before_filter redirects BEFORE any code tries to touch the session. (Perhaps this is an artifact of using CookieStore.)
4. The browser stores the session cookie for example.com, the follows the redirect to www.example.com, sending that cookie (which is basically an empty session at this point).
5. The user logs in. The Rails app sets stuff in the session and returns a response that sets the new session cookie with the new session, for www.example.com.
6. The browser now has two session cookies: One not-logged-in one for example.com, and one logged-in one for www.example.com.
7. The next page load is where the problems start...

On Safari, Chrome, and Firefox, the next page load, on www.example.com, only sends the session cookie that is for www.example.com...and all is well. However, on Internet Explorer (tested on IE8 and IE9 beta), the browser sends BOTH session cookies, which both have the same name. In my observation, Rails always choose the first one, which is always the LEAST specific one - the one for example.com. Now, even though the user just logged in, he is not logged in.

I don't know what the HTTP RFC for user agents says about this, but I am just gonna go ahead and call this in IE bug. According to an MSDN FAQ about IE's cookie-handling, IE is different than other browsers, and they're just fine with that (see Q3 on that page). Also see Q1 where they say they don't even try to support the RFC for cookies.

Similar problems have been documented on the web. I read somewhere that if your Rails app redirects before touching the session, that you won't have this problem. That's not the case for me, but I suspect that may have to do with using CookieStore. I can imagine that CookieStore touches the session by reading it when it comes time to generate the cookie, and that this gets triggered even after a redirect.

Redirect with Nginx

Since I could not get Rails to NOT set a cookie for example.com, I decided I would do this redirect in nginx. There are plenty of examples on the web about redirecting example.com to www.example.com, or vice-versa. However, most of them don't work for my needs for one particular reason: virtual hosts.

In my scenario, I can't redirect ALL requests to non-www subdomains to the www-subdomain, because I have other virtual hosts on specific sub-domains that should not be re-routed. However, I can't simply enumerate the ones that I want redirected, since that is meant to be a catch-all. Rather than try to maintain a regular expression that matches all subdomains except the ones I setup virtual hosts on, I decided to just test the hostname inside the default virtual host, as shown in the conclusion section below. This way, specific subdomains get routed to the right virtual host, anything else gets routed to the www.example.com virtual host, and within that one, anything that isn't www.example.com gets redirected to www.example.com.

Solution

The final solution: this nginx config mockup shows how I can have specific subdomains handled by their virtual hosts, and everything else redirected to the www subdomain.

	http {
	# Default virtual host for www.example.com. This will pick up all HTTP
	# requests to port 80 that are not for one of the other virtual hosts.
	server {
	listen 80;
	server_name www.example.com;
	# ...your server config here...
	if ($host != 'www.example.com') {
	rewrite ^ http://www.example.com$request_uri? permanent;
	}
	location / {
	# ...your own config here...
	}
	}
	# Virtual host for test.example.com.
	server {
	listen 80;
	server_name test.example.com;
	# ...your server config here...
	}
	# Virtual host for staging.example.com.
	server {
	listen 80;
	server_name staging.example.com;
	# ...your server config here...
	}
	}

view raw nginx_subdomain.conf hosted with ❤ by GitHub

Using tcpdump to sniff HTTP traffic from a specific host

This is mostly just a reminder to myself about my preferred parameters to tcpdump on linux, so that I don't have to keep reading the man page.

tcpdump -c 20 -s 0 -i eth1 -A host 192.168.1.1 and tcp port http

The parameter breakdown:

• -c 20: Exit after capturing 20 packets.
• -s 0: Don't limit the amount of payload data that is printed out. Print it all.
• -i eth1: Capture packets on interface eth1
• -A: Print packets in ASCII.
• host 192.168.1.1: Only capture packets coming to or from 192.168.1.1.
• and tcp port http: Only capture HTTP packets.