Running Autoprefixer with BundleTransformer / LESS in Debug mode - asp.net

Question

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.

Answer 1

In the documentation (sections: “Examples of usage”, “Debugging HTTP-handlers” and “Postprocessors”) describes how to solve this problem. I will list the basic steps:
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();
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="" />
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").

Answer 2

In addition to what #Taritsyn said you need to make sure your bundles are
CustomScriptBundle() and not ScriptBundle()
If not you will get the slightly confusing error message:
Could not find the transformer in the '~/Content/css/myCssBundle' bundle.
I found it interesting to look deeper into how this actually works
The HTML is written (just view source) with an additional parameter ?bundleVirtualPath
/Content/css/defenderrazor_DEBUG.less?
bundleVirtualPath=~%2fContent%2fcss%2fmyCssBundle
This is intercepted by the handler in the web.config when a .less file is requested and the handler is then able to use that bundle name to look up any transformations that you've set - including in this case the default post processor for AutoprefixCss.