"Compile" CSS into HTML as inline styles

Question

I am writing an e-mail HTML template, and some e-mail clients do not support <style> for specifying CSS. The only alternative for applying CSS is to use inline styles (style attribute). Is there a tool or library (Node.JS) for applying a stylesheet to some HTML and getting back the HTML with the styles applied?

The tool does not have to support many selectors; id, class, and element name selectors should be sufficient for my needs.

Example of what is needed:

// 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>

Jed Watson · Accepted Answer · 2012-10-21 15:36:18Z

23

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.

answered Oct 21, 2012 at 15:36

Jed Watson

20.4k3 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farid Nouri Neshat · Accepted Answer · 2015-01-14 10:41:38Z

Here's the alive javascript projects that does what you want:

juice. 1.7Mb with dependencies.
juice2. 5.9Mb with dependencies. This is a fork of juice, seems to be containing more options than juice. This one doesn't drop media queries as juice does. Sorts inline css rules alphabetically.
styliner. 4.0Mb with dependencies. This one uses promises instead. Have a couple of different options than juice2. Has a 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.

Mr. Smit · Accepted Answer · 2020-03-26 08:42:51Z

4

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); });

answered Mar 26, 2020 at 8:42

Mr. Smit

2,5723 gold badges34 silver badges47 bronze badges

2 Comments

Pratik Patel Over a year ago

What will be the values for options?

Eduardo Hernandez Over a year ago

Only required option is url so if you use local file would be { url: "file://path_to_resolve_relative_references"}

generalhenry · Accepted Answer · 2011-02-04 05:21:01Z

3

You could use jsdom + jquery to apply $('a').css({color:'red'});

answered Feb 4, 2011 at 5:21

generalhenry

17.3k4 gold badges51 silver badges63 bronze badges

5 Comments

staticsan Over a year ago

That requires the email client to support javascript. Not a given, unfortunately.

Lèse majesté Over a year ago

@staticsan: jsdom is intended as serverside javascript, so I don't think email client support is an issue.

David Tang Over a year ago

@staticsan, the OP mentioned Node.JS specifically. Great idea generalhenry. +1

staticsan Over a year ago

Hmm. Okay, I missed the Node.js reference in the OP. Also, googling jsdom didn't tell me that it is intended as serverside JS. I suspect there has been a collision of assumptions. (Going away now...)

strager Over a year ago

This looks like the solution I'll be going with. Unless I can find a CSS parser, I'll have to manually apply styles (which shouldn't be too much trouble).

Sean · Accepted Answer · 2011-02-04 05:33:46Z

-1

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.

answered Feb 4, 2011 at 5:33

Sean

7863 silver badges10 bronze badges

1 Comment

strager Over a year ago

Yes, but I would still need to process all these HTML documents to transform "normal" CSS into using <font>.

Collectives™ on Stack Overflow

"Compile" CSS into HTML as inline styles

5 Answers 5

Comments

Comments

2 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related