«Компилировать» CSS в HTML как встроенные стили

Question

Я пишу HTML-шаблон электронной почты, и некоторые почтовые клиенты не поддерживают <style> для указания CSS.Единственной альтернативой для применения CSS является использование встроенных стилей (атрибут style).Существует ли инструмент или библиотека (Node.JS) для применения таблицы стилей к некоторому HTML и возврата HTML с примененными стилями?

Инструмент не должен поддерживать много селекторов;Селекторы идентификаторов, классов и имен элементов должны быть достаточными для моих нужд.

Пример того, что нужно:

// 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, и поддерживает широкий диапазон селекторов.

Вам также могут быть интересны node-email-templates , которая является хорошей оболочкой для динамических писем в узле.

Answer 2

Вот живые проекты JavaScript, которые делают то, что вы хотите:

• juice.1.7Mb с зависимостями.
• juice2.5.9Mb с зависимостями.Это вилка сока, кажется, содержит больше вариантов, чем сок.Этот не отбрасывает медиа-запросы, как сок.Сортирует встроенные правила CSS по алфавиту.
• styliner.4.0Mb с зависимостями.Вместо этого он использует обещания.Есть пара разных вариантов, чем сок2.Имеет параметр compact, которого нет у других, что минимизирует HTML.Не читает сам HTML-файл, как это делают другие.Также расширяются margin и padding сокращения.И в случае, если вы каким-либо образом измените свои нативные объекты (например, если вы используете sugar ), я не рекомендую использовать это до , эта проблема будет решена.

Так какой из них использовать?Ну, это зависит от того, как вы пишете CSS.Каждый из них имеет различную поддержку для крайних случаев.Лучше проверь каждый и проверь несколько тестов, чтобы отлично понять.

Answer 3

Сделал поиск в Google и нашел это: http://inlinestyler.torchboxapps.com/

Answer 4

Вы можете использовать jsdom + jquery , чтобы применить $ ('a'). Css ({color: 'red'});

Answer 5

Другая альтернатива - вернуться к основам.Если вы хотите, чтобы ссылка была красной, вместо

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

do

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

Почти любой браузер, включая ужасный браузер BlackBerry, может справиться с этим.