Skip to content
.NET wrapper around the Andrey Sitnik's Autoprefixer.
JavaScript C# CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
images
licenses
src/AutoprefixerHost
test/AutoprefixerHost.Tests
.gitattributes
.gitignore
AutoprefixerHost.sln
CHANGELOG.md
LICENSE.txt
README.md

README.md

Autoprefixer Host for .NET NuGet version Download count

.NET wrapper around the Andrey Sitnik's Autoprefixer.

Installation

This library can be installed through NuGet - https://nuget.org/packages/AutoprefixerHost. Since the original library is written in JavaScript, you will need a JS engine to run it. As a JS engine is used the JavaScript Engine Switcher library. For correct working, you need to install one of the following NuGet packages:

After installing the packages, you will need to register the default JS engine.

Usage

When we create an instance of the Autoprefixer class by using the constructor without parameters:

var autoprefixer = new Autoprefixer();

Then we always use a JS engine registered by default. In fact, a constructor without parameters is equivalent to the following code:

var autoprefixer = new Autoprefixer(JsEngineSwitcher.Current.CreateDefaultEngine);

This approach is great for web applications, but in some cases the usage of JS engine registration at global level will be redundant. It is for such cases that the possibility of passing of the JS engine factory to the constructor is provided:

var autoprefixer = new Autoprefixer(new ChakraCoreJsEngineFactory());

You can also use a delegate that creates an instance of the JS engine:

var autoprefixer = new Autoprefixer(() => new ChakraCoreJsEngine());

It should also be noted, that this library does not write the result of processing to disk. Process method of the Autoprefixer class return the result of processing in the form of an instance of the ProcessingResult class. Consider in detail properties of the ProcessingResult class:

Property name Data type Description
ProcessedContent String Processed content.
SourceMap String Source map.
Warnings IList<ProblemInfo> List of the warnings.

Consider a simple example of usage of the Process method:

using System;
using System.Collections.Generic;

using AutoprefixerHost;
using AutoprefixerHost.Helpers;
using JavaScriptEngineSwitcher.ChakraCore;

namespace AutoprefixerHost.Example.ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            const string inputContent = @".example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}";
            var options = new ProcessingOptions
            {
                Browsers = new List<string> { "last 4 version" },
                SourceMap = true
            };

            try
            {
                using (var autoprefixer = new Autoprefixer(new ChakraCoreJsEngineFactory(), options))
                {
                    ProcessingResult result = autoprefixer.Process(inputContent, "style.css",
                        "style.out.css", "style.out.css.map", inputSourceMapContent: string.Empty);

                    Console.WriteLine("Processed content:{1}{1}{0}{1}", result.ProcessedContent,
                        Environment.NewLine);
                    Console.WriteLine("Source map:{1}{1}{0}{1}", result.SourceMap, Environment.NewLine);
                }
            }
            catch (AutoprefixerLoadException e)
            {
                Console.WriteLine("During loading of Autoprefixer an error occurred. See details:");
                Console.WriteLine();
                Console.WriteLine(AutoprefixerErrorHelpers.GenerateErrorDetails(e));
            }
            catch (AutoprefixerProcessingException e)
            {
                Console.WriteLine("During processing of CSS code an error occurred. See details:");
                Console.WriteLine();
                Console.WriteLine(AutoprefixerErrorHelpers.GenerateErrorDetails(e));
            }
            catch (AutoprefixerException e)
            {
                Console.WriteLine("During working of Autoprefixer an unknown error occurred. See details:");
                Console.WriteLine();
                Console.WriteLine(AutoprefixerErrorHelpers.GenerateErrorDetails(e));
            }
        }
    }
}

First we create an instance of the Autoprefixer class, in the constructor of which we pass the JS engine factory and processing options. Let's consider in detail properties of the ProcessingOptions class:

Property name Data type Default value Description
Browsers IList<String> "> 0.5%", "last 2 versions", "Firefox ESR", "not dead" List of queries for target browsers.
Cascade Boolean true Flag for whether to create nice visual cascade of prefixes.
Add Boolean true Flag for whether to add new prefixes.
Remove Boolean true Flag for whether to remove outdated prefixes.
Supports Boolean true Flag for whether to add prefixes for @supports parameters.
Flexbox FlexboxMode enumeration All Mode that defines should Autoprefixer add prefixes for flexbox properties. Can take the following values:
  • All - add prefixes for flexbox properties for all browsers
  • None - prevent adding prefixes for flexbox properties
  • No2009 - add prefixes for flexbox properties only for final and IE 10 versions of specification
Grid GridMode enumeration None Mode that defines should Autoprefixer add IE 10-11 prefixes for Grid Layout properties. Can take the following values:
  • None - prevent Autoprefixer from outputting CSS Grid translations
  • Autoplace - enable Autoprefixer grid translations and include autoplacement support
  • NoAutoplace - enable Autoprefixer grid translations but exclude autoplacement support
IgnoreUnknownVersions Boolean false Flag for whether to do not raise error on unknown browser version in the Browsers property.
Stats String Empty string Custom usage statistics in JSON format for > 10% in my stats browsers.
SourceMap Boolean false Flag for whether to enable source map generation.
InlineSourceMap Boolean false Flag for whether to embed sourceMappingUrl as data uri.
SourceMapIncludeContents Boolean false Flag for whether to include contents in maps.
OmitSourceMapUrl Boolean false Flag for whether to disable sourceMappingUrl in css output.

Then we call the Process method with the following parameters:

  1. content - CSS code.
  2. inputPath (optional) - path to input CSS file. Needed for generation of source map.
  3. outputPath (optional) - path to output CSS file. Needed for generation of source map.
  4. sourceMapPath (optional) - path to source map file.
  5. inputSourceMapContent (optional) - content of an input source map from an previous processing step (for example, Sass compilation). Will be considered in the next example.

Then output result of processing to the console. In addition, we provide handling of the following exception types: AutoprefixerLoadException, AutoprefixerProcessingException and AutoprefixerException. In the Autoprefixer Host, exceptions have the following hierarchy:

  • AutoprefixerException
    • AutoprefixerLoadException
    • AutoprefixerProcessingException

You can use the Autoprefixer with a Sass compiler from the LibSass Host library as follows:

using System;
using System.Collections.Generic;

using AutoprefixerHost;
using AutoprefixerHost.Helpers;
using JavaScriptEngineSwitcher.ChakraCore;
using LibSassHost;
using LibSassHost.Helpers;

namespace LibSassAndAutoprefixerHost.Example.ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            const string inputContent = @"$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
$border-color:  #73AD21;

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

@mixin no-select {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    font: 100% $font-stack;
    color: $primary-color;
    @include no-select();
}

.rounded-box {
    @include border-radius(5px);
    border: 1px solid $border-color;
    padding: 10px;
}";

            try
            {
                var compilationOptions = new CompilationOptions { SourceMap = true };
                CompilationResult compilationResult = SassCompiler.Compile(inputContent,
                    "style.scss", "style.css", options: compilationOptions);

                var processingOptions = new ProcessingOptions
                {
                    Browsers = new List<string> { "last 4 version" },
                    SourceMap = true
                };

                using (var autoprefixer = new Autoprefixer(new ChakraCoreJsEngineFactory(), processingOptions))
                {
                    ProcessingResult result = autoprefixer.Process(compilationResult.CompiledContent,
                        "style.css", "style.out.css", inputSourceMapContent: compilationResult.SourceMap);

                    Console.WriteLine("Processed content:{1}{1}{0}{1}", result.ProcessedContent,
                        Environment.NewLine);
                    Console.WriteLine("Source map:{1}{1}{0}{1}", result.SourceMap, Environment.NewLine);
                }
            }
            catch (SassException e)
            {
                Console.WriteLine("During working of Sass compiler an error occurred. See details:");
                Console.WriteLine();
                Console.WriteLine(SassErrorHelpers.GenerateErrorDetails(e));
            }
            catch (AutoprefixerException e)
            {
                Console.WriteLine("During working of Autoprefixer an error occurred. See details:");
                Console.WriteLine();
                Console.WriteLine(AutoprefixerErrorHelpers.GenerateErrorDetails(e));
            }
        }
    }
}

In principle, this code does not need comments. The only thing worth noting is that we pass to the Process method a CSS code and source map, which were obtained as a result of the compilation of SCSS code.

Who's Using Autoprefixer Host for .NET

If you use the Autoprefixer Host for .NET in some project, please send me a message so I can include it in this list:

You can’t perform that action at this time.