asp.netlessautoprefixerbundletransformer

Running Autoprefixer with BundleTransformer / LESS in Debug mode

So I currently use BundleTransformer, LESS and I'm trying to add the Autoprefixer post processor. This plugin automatically takes css like transform: scale(1.5) and converts it to -webkit-transform and -moz-transform.

If I am in release mode or have BundleTable.EnableOptimizations=true then everything works just fine and the prefixes are added as expected.

In debug mode however, all the individual CSS / LESS files in my bundle are present in the HTML as separate requests. I'm using this command in my CSHTML file:

@Styles.Render("~/Content/css/lessbundle")

i.e. In debug mode this gets expanded out to LINK tags for :

/cs/something.css
/css/lessfile1.less
/css/lessfile1.less

instead of a single file

/Content/css/lessbundle?v=RFAUSIwb-jEuuo4vHNTnTkE2LrN2jfHglX-Hk8HIF481

For the LESS files IIS automatically converts them, however it does not apply the Autoprefixer.

Is there a way to get Autoprefixer to work when requesting raw .css and .less files?

If not it seems kind of pointless to me because the only alternative I see is to request directly the 'Content/css/lessbundle virtual URL - which will get run through the Autoprefixer. It will only get minified for a release build.

Solution

  • In the documentation (sections: “Examples of usage”, “Debugging HTTP-handlers” and “Postprocessors”) describes how to solve this problem. I will list the basic steps:

    1. For debugging HTTP-handlers to use a configuration settings from bundles need to add in the RegisterBundles method of App_Start/BundleConfig.cs file the following code:

      BundleResolver.Current = new CustomBundleResolver();

    2. In order to these settings can be applied to CSS- and JS-assets need to register the debugging HTTP-handlers CssAssetHandler and JsAssetHandler in Web.config file. To do this in the IIS Integrated mode, you need add to the /configuration/system.webServer/handlers element the following code:

      <add name="CssAssetHandler" path="*.css" verb="GET" type="BundleTransformer.Core.HttpHandlers.CssAssetHandler, BundleTransformer.Core" resourceType="File" preCondition="" />

      <add name="JsAssetHandler" path="*.js" verb="GET" type="BundleTransformer.Core.HttpHandlers.JsAssetHandler, BundleTransformer.Core" resourceType="File" preCondition="" />

    3. To make AutoprefixCssPostProcessor is one of the default CSS-postprocessors, you need to make changes to the Web.config file. In the defaultPostProcessors attribute of \configuration\bundleTransformer\core\css element must be add AutoprefixCssPostProcessor to end of comma-separated list (for example, defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor").