What is the proper use of IItemTransform for correcting paths in CSS Bundling with ASP.NET Web Optimization and BundleTransformer?

Question

I'm presently working on a project that uses the ASP.NET Web Optimization library (v 1.1.0-Beta1) in conjunction with the Bundle Transformer extension (v 1.7.3-Beta1 for core, 1.7.0-Beta1 for LESS) which is used to convert LESS into CSS. Based on web searches paths within CSS (and less) appear to be a common issue, in most cases it is recommended to manually modify the CSS and be done with it. However, due to differences between our development and production environment, and not owning the affected CSS such a solution is not feasible.

Two solutions seem to exist. The first is to overlay the virtual directory as defined by the bundling over the actual directory that contains the content. To me this seems like a poor option.

Secondly, and the route I've chosen, is to use a IItemTransform such as CssRewriteUrlTransform (mentioned in this post. Even this solution has it's limitations. As such I've attempted to write my own ItemTransformer but it seems that the results of it's execution is ignored when used in the following manner:

public static void RegisterBundles(BundleCollection bundles)
{
    /* among other work pass in IItemTransformer to fix paths */
    var styleBundle = new StyleBundle("~/bundles/css/styles")
        .Include(...)
        .Include("~/Content/less/font-awesome.less", new RewriteUrlTransform())
        .Include(...);

    styleBundle.Transforms.Add(new CssTransformer());
    styleBundle.Orderer = new NullOrderer();

    bundles.Add(styleBundle);
}

Implementation of IItemTransform:

public class RewriteUrlTransform : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        return (input manipulated with proper path replacing bad path)
    }
}

Unless I'm entirely misunderstanding how an IItemTransform is to be used, which is quite possible due to lack of documentation, I would think that the return of the Process method is the new post processed CSS. However, the return seems to be ignored. The original input is always in use, even when I return a String.Empty(). Am I doing something wrong here or is it indeed a bug?

Answer 1

No you are understanding this correctly, the item transforms are applied to an item before they are bundled together, and then the bundle transforms are run. Have you verified that it is calling your transform when you expect in the debugger?

Answer 2

Bundle Transformer natively supports a automatic transformation of relative paths to absolute in CSS-code. I'm telling you as the developer of this product.