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?

Koreykorff

Also of note I've looked into Casset and determined it not to be a good solution for my needs as it does not lend itself to creating multiple bundles and explicitly requesting them at different times of during page render. – Koreykorff

You had suffered from lack of information, but I hit this question because of its title. The point is that there ARE some problems with logic in original StyleBundle when it deals with relative paths in virtual directories (and few other things) and ProperStyleBundle is what I came up with. – Oshea

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?

Pontine

Yes, the transformer is called as verified by a break point in the debugger. – Koreykorff

My current guess is that full bundling doesn't happen during debug/dev/local and the results are ignored, but can't verify due to the source not yet being available. – Koreykorff

Ah yes, you should specify BundleTable.EnableOptimizations = true – Pontine

OK, so my assumption is correct that code is executed by results are unused when optimizations are off. That’s a little surprising. Maybe I’m trying to use the optimization library for things in which it was not intended but it would seem that there may be a case in production where I would need to turn off optimization/bundling but still have the transformations done. For example path correction, is there (or is there planed) to be any sort of mixed mode feature were transformations can be executed but explicit bundling is not run? – Koreykorff

Well, so debug/release affects the Scripts/Styles helpers, when debug = true, by default it renders out links to the raw files (no bundling). We do have plans to support mixed mode eventually at a more granular level. – Pontine

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.

Karolinekaroly

Yes, in most cases this is true. However, I'm having explicit problems with the path being incorrect due to LESS resources being in a different path than the standard bundled CSS. (css from less wants to find resources in other paths) and with the usage of sub domains. Hence my manual transformation of the path. – Koreykorff

In Bundle Transformer 1.7.7 Beta 1 added support of the item transformations. To normal work with the item transformations you will need to use the NullBuilder class as builder by default, or use the CustomStyleBundle and CustomScriptBundle classes. – Karolinekaroly

In case anyone else is wondering how to use the built-in support for automatic transformation of relative paths, see this article: seankenny.me/blog/2013/09/04/… – Sr