Applies external CSS stylesheets to HTML emails to work with Gmail.
Styliner is a Node.js library that reads CSS rules from external stylesheets and converts them to inline
style="" attributes in an HTML document.
Styliner is intended for use with HTML emails. With it, you can write regular CSS or LESS (with the Styliner-less package) stylesheets, then merge them into your HTML and create emails that work with Gmail (which drops all
<style> tags). Unfortunately, though, you'll still need to use
<table>s to get complex layout.
You can also use advanced features ("dynamic rules") like
:hover selectors or media queries, and Styliner will leave them in a
<style> tag. This way, you can build interactive emails that will light up when viewed in an email client that supports
<style> tags, while still maintaining Gmail support.
In effect, you get graceful degradation for your email designs.
Styliner uses the Q promise library.
var styliner = baseDir options ;stylinerprocessHTMLhtmlSource directorythen ;//Pass filePath to processHTMLstylinerparseFilefilePaththen ;
baseDir parameter specifies the base directory for relative paths. When processing an HTML source file, you can optionally specify a directory for that source, and any relative paths within the file will be treated as relative to that directory (instead of relative to the
processHTML method returns a Q promise of the inlined HTML source.
You can pass an options hash as the second parameter to the
Styliner constructor with the following options: (all options default to false):
<style>tags for rules that cannot be inlined. This option will completely drop any dynamic CSS rules. (such as media queries, pseudo-elements, or
<style>tags instead of inlining static rules into elements. This results in smaller files, but will not work with Gmail.
<img>tags, and stylesheets will have this path prepended. For greater flexibility, pass a
url: function(path, type)
background: red;in one rule, and
background: linear-gradient(...)in a more specific rule, Styliner will replace the property from the first rule with the more specific one. This means that browsers that don't support
linear-gradient()won't see any background at all.
padding, shorthand inlined properties that are overridden by non-inlined non-shorthand counterparts will not be overridden correctly.
!importantin order to override the inlined static rule on the first element.
!important-ize the inline property in the second element, but that would leave an unfixable problem if there is another dynamic rule that should override that property on the second element.
!importantto override the already-
!important-ized less-specific soft-dynamic rule. It is then impossible to make the more-specific soft-dynamic rule override the inlined property.
important = trueafter the first pass.
!important2, etc), and changing Styliner to keep running additional passes and making overridden rules more and more important until it stabilizes.
.js to those rules.
Acid2 has the following issues:
background: red pink (which is an invalid value) incorrectly overrides the valid
background: yellow for
.parser, resulting in a white background.
This happens because parserlib does not validate the
background property at all. (this would be a complex validation rule to add)
width: 200 (which is an invalid value) incorrectly overrides the valid
width: 2em for
.parser, resulting in the element stretching to fit the browser.
This is fixed by parserlib#48, which has not been merged.
* html .parser incorrectly matches
.parser, resulting in a gray background.