I am writing an e-mail HTML template, and some e-mail clients do not support for specifying CSS. The only alternative for applying CSS is to use
I think juice is what you're looking for.
Simply require it, then pass it your html and css and let it do the heavy lifting for you like this:
var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');
It builds on a number of mature libraries including mootools' slick, and supports a broad range of selectors.
You may also be interested in node-email-templates, which is a nice wrapper for dynamic emails in node.
2020 solution https://www.npmjs.com/package/inline-css
var inlineCss = require('inline-css');
var html = "<style>div{color:red;}</style><div/>";
inlineCss(html, options)
.then(function(html) { console.log(html); });
Another alternative is to go back to basics. If you want a link to be red, instead of
<a href="" style="color: red">my link</a>
do
<a href=""><font color="red">my link</font></a>
Almost any browser, including the terrible BlackBerry browser can handle that.
You could use jsdom + jquery to apply $('a').css({color:'red'});
Here's the alive javascript projects that does what you want:
compact
option that other ones don't have that minifies the html. Doesn't read the html file itself as others do. Also extends margin
and padding
shorthands. And in case you somehow modify your native objects(like if you are using sugar) I don't suggest using this till this issue is resolved.So which one to use? Well it depends on the way you write CSS. They each have different support for edge cases. Better check each and do some tests to understand perfectly.
Did a google search and found this: http://inlinestyler.torchboxapps.com/