Autoprefixer support for SASS compiler (#307)

* Fix source map decoding for babel compiler output

Babel compiler source mapping url contains `charset=utf-8;` before `base64,` part

* Update babel compiler arguments to work with Node 6

Breaking changes to `path` between Node 5 and 6: https://github.com/nodejs/node/wiki/Breaking-changes-between-v5-and-v6#path

* Update Node to 6.10.3 (32 bit)

* Fix wrong paths in scss source maps

Also fixes issue with node-sass on Node 6 (breaking changes to `path` module)

* Add autoprefix support to scss compiler

* Update appveyor image to Visual Studio 2017

* Clean up after minify tests

Author: Krusen

appveyor.yml

@@ -1,4 +1,4 @@
-os: Visual Studio 2017 RC
+image: Visual Studio 2017
 
 install:
   - ps: (new-object Net.WebClient).DownloadString("https://raw.github.com/madskristensen/ExtensionScripts/master/AppVeyor/vsix.ps1") | iex

build/build.cmd

@@ -16,14 +16,16 @@ call npm install --quiet ^
         less-plugin-autoprefix ^
         less-plugin-csscomb ^
         node-sass ^
+        postcss-cli ^
+        autoprefixer ^
         stylus ^
         handlebars ^
         > nul
 
-if not exist "node_modules\node-sass\vendor\win32-ia32-14" (
+if not exist "node_modules\node-sass\vendor\win32-ia32-48" (
     echo Copying node binding...
-    md "node_modules\node-sass\vendor\win32-ia32-14"
-    copy binding.node "node_modules\node-sass\vendor\win32-ia32-14"
+    md "node_modules\node-sass\vendor\win32-ia32-48"
+    copy binding.node "node_modules\node-sass\vendor\win32-ia32-48"
 )
 
 echo Deleting unneeded files and folders...

src/WebCompiler/Compile/BabelCompiler.cs

@@ -109,7 +109,7 @@ private void RunCompilerProcess(Config config, FileInfo info)
         private static string ConstructArguments(Config config)
         {
             //string relative = FileHelpers.MakeRelative(config.GetAbsoluteOutputFile().FullName, config.GetAbsoluteInputFile().FullName);
-            string arguments = $"--presets react";
+            string arguments = $"--presets react --out-file \"\"";
 
             var options = BabelOptions.FromConfig(config);
 

src/WebCompiler/Compile/SassCompiler.cs

@@ -88,13 +88,21 @@ private void RunCompilerProcess(Config config, FileInfo info)
                 WindowStyle = ProcessWindowStyle.Hidden,
                 CreateNoWindow = true,
                 FileName = "cmd.exe",
-                Arguments = $"/c \"\"{Path.Combine(_path, "node_modules\\.bin\\node-sass.cmd")}\" {arguments} \"{info.FullName}\"\"",
+                Arguments = $"/c \"\"{Path.Combine(_path, "node_modules\\.bin\\node-sass.cmd")}\" {arguments} \"{info.FullName}\" \"",
                 StandardOutputEncoding = Encoding.UTF8,
                 StandardErrorEncoding = Encoding.UTF8,
                 RedirectStandardOutput = true,
                 RedirectStandardError = true,
             };
 
+            // Pipe output from node-sass to postcss if autoprefix option is set
+            SassOptions options = SassOptions.FromConfig(config);
+            if (!string.IsNullOrEmpty(options.AutoPrefix))
+            {
+                start.Arguments = start.Arguments.TrimEnd('"') + $" | \"{Path.Combine(_path, "node_modules\\.bin\\postcss.cmd")}\" --use autoprefixer\"";
+                start.EnvironmentVariables.Add("BROWSERSLIST", options.AutoPrefix);
+            }
+
             start.EnvironmentVariables["PATH"] = _path + ";" + start.EnvironmentVariables["PATH"];
 
             using (Process p = Process.Start(start))
@@ -104,7 +112,9 @@ private void RunCompilerProcess(Config config, FileInfo info)
                 p.WaitForExit();
 
                 _output = stdout.Result;
-                _error = stderr.Result;
+                // postcss outputs "√ Finished stdin (##ms)" to stderr for some reason
+                if (!stderr.Result.StartsWith("√"))
+                    _error = stderr.Result;
             }
         }
 
@@ -115,7 +125,7 @@ private static string ConstructArguments(Config config)
             SassOptions options = SassOptions.FromConfig(config);
 
             if (options.SourceMap || config.SourceMap)
-                arguments += " --source-map=false --source-map-embed=true";
+                arguments += " --source-map-embed=true";
 
             arguments += " --precision=" + options.Precision;
 

src/WebCompiler/Compile/SassOptions.cs

@@ -20,6 +20,10 @@ protected override void LoadSettings(Config config)
         {
             base.LoadSettings(config);
 
+            var autoPrefix = GetValue(config, "autoPrefix");
+            if (autoPrefix != null)
+                AutoPrefix = autoPrefix;
+
             if (config.Options.ContainsKey("outputStyle"))
                 OutputStyle = config.Options["outputStyle"].ToString();
 
@@ -55,6 +59,13 @@ protected override string CompilerFileName
             get { return "sass"; }
         }
 
+        /// <summary>
+        /// Autoprefixer will use the data based on current browser popularity and
+        /// property support to apply prefixes for you.
+        /// </summary>
+        [JsonProperty("autoPrefix")]
+        public string AutoPrefix { get; set; } = "";
+
         /// <summary>
         /// Path to look for imported files
         /// </summary>

src/WebCompiler/Node/binding.node

@@ -2,6 +2,7 @@
 using System.IO;
 using System.Linq;
 using System.Text;
+using System.Text.RegularExpressions;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
 using WebCompiler;
 
@@ -35,9 +36,10 @@ public void CompileScss()
             Assert.IsTrue(File.Exists("../../artifacts/scss/test.css"));
             Assert.IsTrue(first.CompiledContent.Contains("/*# sourceMappingURL=data:"));
             Assert.IsTrue(result.ElementAt(1).CompiledContent.Contains("url(foo.png)"));
+            Assert.IsTrue(result.ElementAt(1).CompiledContent.Contains("-webkit-animation"), "AutoPrefix");
 
             string sourceMap = DecodeSourceMap(first.CompiledContent);
-            Assert.IsTrue(sourceMap.Contains("../scss/test.scss"), "Source map paths");
+            Assert.IsTrue(sourceMap.Contains("scss/test.scss"), "Source map paths");
         }
 
         [TestMethod, TestCategory("SCSS")]
@@ -80,10 +82,10 @@ public void MultiLineComments()
 
         public static string DecodeSourceMap(string content)
         {
-            string ident = "sourceMappingURL=data:application/json;base64,";
-            if (content.Contains(ident))
+            Match match = Regex.Match(content, @"sourceMappingURL=data:application/json;.*base64,");
+            if (match.Success)
             {
-                int start = content.IndexOf(ident) + ident.Length;
+                int start = match.Index + match.Length;
                 string map = content.Substring(start).Trim('*', '/');
                 byte[] data = Convert.FromBase64String(map);
                 return Encoding.UTF8.GetString(data);

src/WebCompiler/Node/node.7z

@@ -11,6 +11,13 @@ public class CssMinifierTests
     {
         private const string processingConfigFile = "../../Minify/artifacts/css/";
 
+        [TestCleanup]
+        public void Cleanup()
+        {
+            File.Delete("../../Minify/artifacts/css/site.css");
+            File.Delete("../../Minify/artifacts/css/site.min.css");
+        }
+
         /// <summary>
         /// Tests that '.min' is automatically appended to a minified file name.
         /// </summary>

src/WebCompilerTest/Compile/ScssTest.cs

@@ -11,6 +11,13 @@ public class JavaScriptMinifierTests
     {
         private const string processingConfigFile = "../../Minify/artifacts/javascript/";
 
+        [TestCleanup]
+        public void Cleanup()
+        {
+            File.Delete("../../Minify/artifacts/javascript/site.js");
+            File.Delete("../../Minify/artifacts/javascript/site.min.js");
+        }
+
         /// <summary>
         /// Tests that '.min' is automatically appended to a minified file name.
         /// </summary>