Running Autoprefixer with BundleTransformer / LESS in Debug mode

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.

score 9 · Accepted Answer · answered Mar 20 '15 at 12:57

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").

score 0 · Answer 2 · answered May 16 '15 at 23:01

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.

Running Autoprefixer with BundleTransformer / LESS in Debug mode

2 Answers2