3

Closed

CSS combine/minify appears to have issues with @import

description

I haven't got a great deal of time to investigate this right now, but it appears that when CSS is being combined/minified, @import is not causing the imported files to be included.

I'm using the default configuration, with the only changes made being adding my specific JS/CSS resources, and changes to defaultDebugEnabled and defaultIgnorePipelineWhenDebug.

I was including the CSS resource

<resource path="~/Content/themes/base/jquery.ui.all.css" />

jquery.ui.all.css simply contains

@import "jquery.ui.base.css";
@import "jquery.ui.theme.css";

jquery.ui.base.css simply contains

@import url("jquery.ui.core.css");
@import url("jquery.ui.resizable.css");
@import url("jquery.ui.selectable.css");
@import url("jquery.ui.accordion.css");
@import url("jquery.ui.autocomplete.css");
@import url("jquery.ui.button.css");
@import url("jquery.ui.dialog.css");
@import url("jquery.ui.slider.css");
@import url("jquery.ui.tabs.css");
@import url("jquery.ui.datepicker.css");
@import url("jquery.ui.progressbar.css");

When the pipeline was being invoked, the contents of at least some of the imported CSS files was not being rendered. I searched the rendered CSS for the selector .ui-helper-hidden that occurs in jquery.ui.core.css, and it wasn't present in the rendered code. When I turned off the pipeline, the files were all included correctly and my jQuery UI content was formatted correctly.

I've worked around this issue by directly referencing the files imported by jquery.ui.core.css in combres.xml (in the process excluding some unused CSS files :-).

Btw, thanks for a great tool.

file attachments

Closed Aug 29, 2012 at 6:59 PM by buunguyen
Fixed

comments

swapneel_d14 wrote Jun 3, 2012 at 5:17 PM

possible for you to uplaod a test project with used CSS and combres config xml?

postmoderncore wrote Jun 5, 2012 at 12:56 AM

Here's a sample, showing the issue using the default jQuery UI setup that VS2010sp1 creates for an MVC3 application. Note this uses Nuget package restore to make the zip small enough for Codeplex, unsure what version of Nuget is needed to support it.

buunguyen wrote Jul 10, 2012 at 9:28 PM

Combres currently doesn't handle the @import directives of CSS files. It only minifies/compresses the specific CSS file referenced via the <resource> element in combres.xml. For your app to work, either:
  • Remove the @import and reference each of those files directly in combres.xml (which is what you're doing)
  • Fix @import to use url() for path, e.g. @import url("jquery.ui.base.css") instead of just @import "jquery.ui.base.css" (*); however, this doesn't mean Combres will include the file, it only means Combres will modifies the URL so that it can be correctly resolved by the browser in an independent request
(*): I'll see if it makes sense to have Combres make this change automatically in FixUrlsInCssFilter.

buunguyen wrote Jul 10, 2012 at 10:30 PM

I've changed FixUrlsInCSSFilter so that it modifies URLs of @import directives. Latest code in trunk.