AEM: Make our URL absolute (in CSS)

When we give urls within CSS files in the below format:

@import url(//fonts.googleapis.com/css?family=Gloria+Hallelujah);

.example { font-family: 'Gloria Hallelujah', serif; }

The CssFileBuilder, which runs as part of the “Day CQ HTML Library Manager” service (com.day.cq.widget.impl.HtmlLibraryManagerImpl) transforms the above line as in the generated css:

@import url(../../fonts.googleapis.com/css?family=Gloria+Hallelujah);

.example { font-family: 'Gloria Hallelujah', serif; }

As mentioned in Adobe's documentation (http://docs.adobe.com/docs/en/cq/current/developing/clientlibs.html)

When you embed CSS files, the generated CSS code uses paths to resources that are relative to the embedding library.

The fact that the CssFileBuilder tried to turn a network-relative path into a series of parent-path components back to the site root certainly came as a surprise to me. So, what exactly can we do? Well, thankfully, there’s a feature inside of CssFileBuilder – which I can’t find any documentation for, unfortunately – that allows use to override this behaviour.

So make your URL absolute with the following syntax:

@import url(absolute://fonts.googleapis.com/css?family=Gloria+Hallelujah);

.example { font-family: 'Gloria Hallelujah', serif; }

So now you know – if you want to use protocol relative URLs (or “network-path references,” as we should probably all be calling them) in your CSS ClientLibrary files, you have to prefix them with the pseudo-scheme ‘absolute:’ to prevent CssFileBuilder from rewriting them as relative paths to the site root.

Credits to Joey Smith - http://aempodcast.com/2014/client-library/protocol-relative-paths-clientlibs-cssfilebuilder/#.Vry545MrI_V