How do I prevent messing up url() in CSS?

[hellfirehd]

Pipeline setup:

pipeline.AddCssBundle("/bundles/home.css", 
  "node_modules/simple-line-icons/css/simple-line-icons.css",
  "node_modules/html5-device-mockups/dist/device-mockups.css")
  .UseContentRoot();

Original (and the desired output) URL in CSS:

@font-face {
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
}

Bundled and Minified CSS:

@font-face{src:url('../node_modules/simple-line-icons/fonts/Simple-Line-Icons.eot?v=2.4.0');}

NOTE: It's not just src: url()... also happens with background-image: url(../img/bg.png) as well.

I have also tried a custom pipeline omitting AdjustRelativePaths() with the same results:

pipeline.AddBundle("/bundles/home.css", "text/css; charset=UTF-8",
  "node_modules/simple-line-icons/css/simple-line-icons.css",
  "node_modules/html5-device-mockups/dist/device-mockups.css")
  .EnforceFileExtensions(".css")
  //.AdjustRelativePaths()
  .Concatenate()
  .FingerprintUrls()
  .AddResponseHeader("X-Content-Type-Options", "nosniff")
  .MinifyCss(new CssSettings())
  .UseContentRoot();

Any thoughts on what I'm doing wrong?

[hellfirehd]

So I've been fighting with this for awhile. Turns out there are a couple things going on:

• None of the Processors override CacheKey which means that when I switched from AddCssBundle(...) to AddBundle(...) it continued to serve the previously cached bundle from the filesystem instead of executing my updated pipeline.
• UseContentRoot() doesn't change the behavior of RelativePathAdjuster causing it to make paths relative to ContentRootPath instead of WebRootPath. That behavior makes sense for bundles sourced from vendor/package/ but not from node_modules/package/.

I'm not really sure what the right approach is to address the above. Personally, I think a WebOptimizerOptions should be added that allows that allows disabling of the IMemoryCache and/or DiskCache. Have it default to enabled for both but update the documentation so that developers are aware of why their bundles are not reflecting changes to the pipeline.

Then again, maybe that problem wouldn't exist if IProcessor implementations were overriding CacheKey with appropriate values. Obviously changing virtual string CacheKey(HttpContext context) to abstract would be a breaking change but I think it's necessary for custom pipelines to work properly.

And I really don't know how to address the problem with RelativePathAdjuster. My workaround was to add my own pipeline extension of FindAndReplace("node_modules/bootstrap/dist/", "", RegexOptions.IgnoreCase) but that's really just a hack.

Sure would appreciate some discussion around this. I'd be happy to take on the work to implement but need clear directives before I kick anything off.

[sprudel79]

With the latest version of the library (3.0.380) the custom pipeline approach was working for me:

pipeline.AddBundle("/assets/fonts/material-icons/iconfont/material-icons.min.css", "text/css; charset=utf-8", "node_modules/material-icons/iconfont/material-icons.css")
                           .EnforceFileExtensions(".css")
                          // .AdjustRelativePaths()
                           .Concatenate()
                           .FingerprintUrls()
                           .AddResponseHeader("X-Content-Type-Options", "nosniff")
                           .MinifyCss(new CssSettings { }).UseContentRoot();

I am wondering if there's a better approach today?