YUI CSS can reference assets using incorrect URL

Bug #1078978 reported by Gary Poster
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
juju-gui
Won't Fix
High
Unassigned

Bug Description

A follow-on from bug 1078898.

Thiago and I discussed the approach he took to combining CSS in https://code.launchpad.net/~tveronezi/juju-gui/combinecss/+merge/134140 . It is fragile, and it also will not translate to the static-file approach we are pursuing in bug 1078898.

The problem is that YUI finds images relative to the CSS file that references them. If we simply aggregate all the CSS files, this loses the context for where the images are.

The solution he has in the branch is to make the server search around for the nearest image he can find with the same name. This is very fragile, but he did not have another approach that he thought would work. It also will not work for statically served files.

Together, we investigated what the YUI combo loader does, when it aggregates CSS. We discovered that it actually parses relative URLs in the CSS and converts them to absolute paths. Therefore, even though the URLs look relative in the YUI sources, when you look at them as served by the combo loader, they are absolute.

We can do the same when we create minimized CSS for the static build directory described in bug 1078898.

For each CSS file that we aggregate, we will determine what path it's directory has relative to the served root of the site. For instance, before we address bug 1078910, a file [JUJU-GUI CHECKOUT]/app/assets/javascripts/yui/slider-base/assets/skins/sam/slider-base.css will a directory path relative to the served root of the site of /juju-ui/assets/javascripts/yui/slider-base/assets/skins/sam. We will then find every URL in the css ("url(...)") and prefix the relative URL found there with the directory path. For instance, "url(rail-x.png)" will become "url(/juju-ui/assets/javascripts/yui/slider-base/assets/skins/sam/rail-x.png). We will then safely aggregate the file.

We will also need to include all images found recursively in the yui tree in the build directory, mirroring the directory structure.

This should be a safe and reasonable way to get us what we want.

Revision history for this message
Benji York (benji) wrote :

While investigating this bug I discovered that the skin resources (CSS,
JS, and images) are loaded programmatically, and as such do not lend
themselves to minification or URL rewriting. For example, see the
_initThumbUrl function in the slider-base YUI module.

summary: - CSS is not minified in static deployment
+ YUI CSS can reference assets using incorrect URL
Jeff Pihach (hatch)
Changed in juju-gui:
status: Triaged → Won't Fix
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.