jetheredge/SquishIt — Issue #104: Incorrect CSS Path Rewriting
Author: david-hollifield
Created: 2011-11-17 20:10:30+00:00
State: open

I'm using version 0.8.1 installed using nuget. I've been having an issue with getting SquishIt to generate proper Urls for @imports (issue #76), but was able to workaround the issue by including the imported css in the CssBundle.Add() list. Unfortunately 0.8.1 is rewriting all of my CSS urls incorrectly.

My website is at http://localhost. My development folder has the structure of "/Projects/My Project/My Web/Website" and localhost points to this folder.

The code that bundles everything up looks like:

<%= Bundle
.Css()
.Add("/includes/styles/themes/default/jquery-ui.css")
.WithMinifier() /* for testing */
.ForceRelease()
.Render("/temp/include-cache/page_#.css")
%>

The small snippet of the source CSS is:
...
/* Component containers
----------------------------------*/
.ui-widget { font-family: inherit; font-size: 12px; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: inherit; font-size: 1em; }
.ui-widget-content { border: 1px solid #cccccc; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #cccccc; background: #f1f1f1 url(images/ui-bg_flat_100_f1f1f1_40x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }
...

The same snippet rendered by SquishIt is:
...
/* Component containers
----------------------------------*/
.ui-widget { font-family: inherit; font-size: 12px; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: inherit; font-size: 1em; }
.ui-widget-content { border: 1px solid #cccccc; background: #ffffff url(../../../../My Web/Website/includes/styles/themes/default/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #cccccc; background: #f1f1f1 url(../../../../My Web/Website/includes/styles/themes/default/images/ui-bg_flat_100_f1f1f1_40x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }
...

Notice how the url for the background images are screwy and my pages do not render correctly. I expected them to be root relative which would be "/includes/styles/themes/default/...". If I edit all of these urls to be "/includes" relative everything is rendered properly. This is happening for all the urls in my css and probably the reason I can't get @import to work.

Any ideas? Have I missed some configuration option? I know the tests pass, but I'm thinking there's something going on that the tests are missing.

Thanks,
David