In a managed package, how should you reference static resource images from css defined in a static resource?

Question

The following works in my dev org and the packaging org, but not in an environment with the package installed:

.edit-step-icon {
  background: url("png_list_edit_icon") no-repeat top left;
  background-position: 0 0;
  width: 21px;
  height: 21px;
}

The static resource name is "png_list_edit_icon"

The actual resource appears to be located at: https://na10.salesforce.com/resource/1397086271000/[namespacename]png_delete_icon

but the css in my static resource is loading it at: https://[namespacename].visual.force.com/resource/1397086271000/png_delete_icon

which doesn't exist.

I know I could probably move these styles into the page and use URLFOR, but I would prefer to keep all styles in a static resource.

Answer 1

Your problem is caused by static resources in your managed package having to be referenced by their name including the managed package namespace prefix once the managed package is installed.

My recommendation is to put all the resources that have cross-references to each other in the same static resource.

To illustrate, I have Bootstrap CSS and fonts in a zip file that is served via a static resource. The Visualforce contains:

<link href="{!URLFor($Resource.appzip, 'lib/bootstrap/bootstrap.min.css')}" />

and this appears in the HTML (when the managed package that uses namespace cveep has been installed) as:

<link href="/resource/1393499712000/cveep__appzip/lib/bootstrap/bootstrap.min.css" />

So the first part of the path is the versioned and namespace-prefixed static resource name and the rest of the path is the path of the CSS within the static resource zip (i.e. namespace free).

The relevance to your issue is that the CSS contains relative references such as:

src:url('../fonts/glyphicons-halflings-regular.eot')

and these resolve correctly because they are relative and within the part of the path before the namespace prefix and resource timestamp.

An alternate solution is to always include the namespace prefix in your references i.e. [namespacename]png_delete_icon because your namespace org should support that as well as the non-namespaced name. But if you deploy the source code to some other org for say continuous integration testing the path will be wrong there. And scattering the namespace about feels wrong. And if you are using 3rd party CSS like Bootstrap having to edit that would be painful.