将 CSS 作为内联样式“编译”为 HTML

Question

我正在编写一个电子邮件 HTML 模板，一些电子邮件客户端不支持<style>来指定 CSS。 应用 CSS 的唯一替代方法是使用内联样式（ style属性）。 是否有工具或库（Node.JS）用于将样式表应用于某些 HTML 并使用应用的样式取回 HTML？

该工具不必支持许多选择器； id、class 和元素名称选择器应该足以满足我的需要。

需要什么的例子：

// stylesheet.css
a { color: red; }

// email.html
<p>This is a <a href="http://example.com/">test</a></p>

// Expected result
<p>This is a <a href="http://example.com/" style="color: red;">test</a></p>

Answer 1

我认为果汁就是你要找的。

只需要它，然后将你的 html 和 css 传递给它，让它像这样为你做繁重的工作：

var juice = require('juice');
var inlinedcss = juice('<p>Test</p>', 'p { color: red; }');

它建立在许多成熟的库上，包括 mootools 的 slick，并支持广泛的选择器。

您可能还对node-email-templates感兴趣，它是 node.js 中动态电子邮件的一个很好的包装器。

Answer 2

这是可以完成您想要的活动的 javascript 项目：

• juice 。 1.7Mb 的依赖项。
• juice2 。 5.9Mb 的依赖项。 这是果汁的叉子，似乎比果汁包含更多的选择。 这个不会像果汁那样丢弃媒体查询。 按字母顺序对内联 css 规则进行排序。
• styliner 。 4.0Mb 的依赖项。 这一个使用承诺。 有几个与juice2 不同的选项。 有一个compact选项，其他人没有，可以缩小 html。 不像其他人那样读取 html 文件本身。 还扩展了margin和padding速记。 如果您以某种方式修改了您的本机对象（例如，如果您使用的是糖），我不建议在此问题解决之前使用它。

那么使用哪一种呢？ 好吧，这取决于您编写 CSS 的方式。 他们每个人对边缘情况都有不同的支持。 最好检查每个并做一些测试以完全理解。

Answer 3

谷歌搜索并找到了这个： http ： //inlinestyler.torchboxapps.com/

Answer 4

你可以使用jsdom + jquery来应用 $('a').css({color:'red'});

Answer 5

2020 解决方案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); });

Answer 6

另一种选择是回归基础。 如果您希望链接为红色，而不是

<a href="" style="color: red">my link</a>

做

<a href=""><font color="red">my link</font></a>

几乎所有浏览器，包括糟糕的黑莓浏览器，都可以处理。