How to enable BundleTransformer.AutoPrefixer?

Sep 9, 2016 at 11:22 AM
Edited Sep 9, 2016 at 11:27 AM
Hello,

yesterday I installed BundleTransformer with the plugins sassAndScss, less, and autoprefixer in my ASP.NET MVC project, following the installation instructions. (Having both SCSS and LESS plugins installed is just a temporary step until we rewrite all LESS code to SCSS).

What I got working is: LESS and SCSS is compiled to CSS correctly. What doesn't work yet: I made a simple test.scss with body { filter: blur(2px); }. Autoprefixer should add a -webkit-filter property. Also, the <autoprefixer> config section seems to be ignored: there are no errors if I change the jsEngine to dummyEngine.

Am I missing something ?

Web.config:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <configSections>
    <sectionGroup name="bundleTransformer">
      <section name="core" type="BundleTransformer.Core.Configuration.CoreSettings, BundleTransformer.Core" />
      <section name="sassAndScss" type="BundleTransformer.SassAndScss.Configuration.SassAndScssSettings, BundleTransformer.SassAndScss" />
      <section name="less" type="BundleTransformer.Less.Configuration.LessSettings, BundleTransformer.Less" />
      <section name="autoprefixer" type="BundleTransformer.Autoprefixer.Configuration.AutoprefixerSettings, BundleTransformer.Autoprefixer" />
    </sectionGroup>
    <sectionGroup name="jsEngineSwitcher">
      <section name="core" type="JavaScriptEngineSwitcher.Core.Configuration.CoreConfiguration, JavaScriptEngineSwitcher.Core" />
      <section name="v8" type="JavaScriptEngineSwitcher.V8.Configuration.V8Configuration, JavaScriptEngineSwitcher.V8" />
    </sectionGroup>
  </configSections>
  <appSettings file="AppSettings.config">
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="PreserveLoginUrl" value="true" />
    <add key="ClientValidationEnabled" value="false" />
    <add key="UnobtrusiveJavaScriptEnabled" value="false" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.6" />
    <authentication mode="Forms">
      <forms loginUrl="~/Account/Login" timeout="60" cookieless="UseCookies" />
    </authentication>
    <sessionState mode="InProc" customProvider="DefaultSessionProvider" timeout="60" cookieName="sessid"/>
    <httpRuntime enableVersionHeader="false" maxRequestLength="65536" targetFramework="4.6" />
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules runAllManagedModulesForAllRequests="true" />
    <httpProtocol>
      <customHeaders>
        <remove name="X-Powered-By" />
        <add name="X-UA-Compatible" value="IE=edge" />
        <add name="X-Frame-Options" value="SAMEORIGIN" />
      </customHeaders>
    </httpProtocol>
    <staticContent>
      <remove fileExtension=".woff" />
      <remove fileExtension=".json" />
      <remove fileExtension=".less" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".less" mimeType="text/css" />
    </staticContent>
    <security>
      <requestFiltering>
        <hiddenSegments>
          <add segment="LibSassHost.Native" />
          <add segment="ClearScript.V8" />
        </hiddenSegments>
      </requestFiltering>
    </security>
    <handlers>
      <add name="SassAssetHandler" path="*.sass" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" resourceType="File" preCondition="" />
      <add name="ScssAssetHandler" path="*.scss" verb="GET" type="BundleTransformer.SassAndScss.HttpHandlers.SassAndScssAssetHandler, BundleTransformer.SassAndScss" resourceType="File" preCondition="" />
      <add name="LessAssetHandler" path="*.less" verb="GET" type="BundleTransformer.Less.HttpHandlers.LessAssetHandler, BundleTransformer.Less" resourceType="File" preCondition="" />
      <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="" />
    </handlers>
  </system.webServer>
  <system.codedom>
    <compilers>
      <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701" />
      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
    </compilers>
  </system.codedom>
  <bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd">
    <core>
      <css defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor" combineFilesBeforeMinification="true">
        <translators>
          <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" enabled="false" />
          <add name="SassAndScssTranslator" type="BundleTransformer.SassAndScss.Translators.SassAndScssTranslator, BundleTransformer.SassAndScss" />
          <add name="LessTranslator" type="BundleTransformer.Less.Translators.LessTranslator, BundleTransformer.Less" />
        </translators>
        <postProcessors>
          <add name="UrlRewritingCssPostProcessor" type="BundleTransformer.Core.PostProcessors.UrlRewritingCssPostProcessor, BundleTransformer.Core" useInDebugMode="false" />
          <add name="AutoprefixCssPostProcessor" type="BundleTransformer.Autoprefixer.PostProcessors.AutoprefixCssPostProcessor, BundleTransformer.Autoprefixer" useInDebugMode="true" />
        </postProcessors>
        <minifiers>
          <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
        </minifiers>
        <fileExtensions>
          <add fileExtension=".css" assetTypeCode="Css" />
          <add fileExtension=".sass" assetTypeCode="Sass" />
          <add fileExtension=".scss" assetTypeCode="Scss" />
          <add fileExtension=".less" assetTypeCode="Less" />
        </fileExtensions>
      </css>
      <js>
        <translators>
          <add name="NullTranslator" type="BundleTransformer.Core.Translators.NullTranslator, BundleTransformer.Core" enabled="false" />
        </translators>
        <minifiers>
          <add name="NullMinifier" type="BundleTransformer.Core.Minifiers.NullMinifier, BundleTransformer.Core" />
        </minifiers>
        <fileExtensions>
          <add fileExtension=".js" assetTypeCode="JavaScript" />
        </fileExtensions>
      </js>
    </core>
    <autoprefixer cascade="true" add="true">
      <jsEngine name="V8JsEngine" />
      <browsers>
        <add conditionalExpression="last 2 versions" />
      </browsers>
    </autoprefixer>
    <less javascriptEnabled="true">
      <jsEngine name="V8JsEngine" />
    </less>
  </bundleTransformer>
  <jsEngineSwitcher xmlns="http://tempuri.org/JavaScriptEngineSwitcher.Configuration.xsd">
    <core>
      <engines>
        <add name="V8JsEngine" type="JavaScriptEngineSwitcher.V8.V8JsEngine, JavaScriptEngineSwitcher.V8" />
      </engines>
    </core>
  </jsEngineSwitcher>
</configuration>
Coordinator
Sep 10, 2016 at 8:50 AM
Edited Sep 10, 2016 at 8:51 AM
Hello, Lutz!

Your web application is in debug mode. For BundleTransformer.Autoprefixer to work in debug mode, you need to make additional configuration. To save your time I recommend you to read “Running Autoprefixer with BundleTransformer / LESS in Debug mode” discussion on Stack Overflow.
Sep 12, 2016 at 8:31 AM
Edited Sep 12, 2016 at 8:38 AM
Hello Taritsyn!

Thank you very much for your quick help. I followed these instructions. I've set BundleResolver.Current = new CustomBundleResolver(); in my BundleConfig and added the http handlers JsAssetHandler and CssAssetHandler. I've also set defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor" on the /configuration/bundleTransformer/core/css element. It still doesn't work. No prefixes are added, even when I disable debug mode.

Also, the <autoprefixer> config section still seems to be completely ignored: no errors if I change the jsEngine to a wrong setting like dummyEngine.

What else could be the problem?
Coordinator
Sep 12, 2016 at 8:49 AM
Hello, Lutz!

Give an example of your App_Start/BundleConfig.cs file.
Sep 12, 2016 at 9:18 AM
Hello Taritsyn!

I finally got it working now :). The error was in my BundleConfig.cs, I changed Bundle to CustomStyleBundle:
public class BundleConfig
{

    public static void RegisterBundles(BundleCollection bundles)
    {
        BundleResolver.Current = new CustomBundleResolver();

        CustomStyleBundle testBundle = new CustomStyleBundle("~/Bundles/test");
        testBundle.Include("~/Content/wiki.scss");
        bundles.Add(testBundle);
        BundleTable.EnableOptimizations = true;
    }

}
Coordinator
Sep 12, 2016 at 9:27 AM
Excellent!