CSS Inliner in Javascript (premailer)

Question

I use CKEDITOR 4 and I want to filter a HTML content to insert the style directly in the HTML Elements like MailChimp with its CSS inliner (http://beaker.mailchimp.com/inline-css). But I have to do in Javascript must, someone an idea?

I can use jQuery and PrototypeJs.

I can't use an external API.

My test jsFiddle with CKEditor (on paste) : http://jsfiddle.net/EpokK/utW8K/7/

In :

<style>
    .test {
       outline: 1px solid red;
    }
</style>
<div class="test">Hello</div>

Out :

<div style="outline: 1px solid red;">Hello</div>

I find this solution : http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js but this trick opens a tab and it is blocked by default in Firefox ...

API solution : http://premailer.dialect.ca/

Answer 1

Edit: Cleaning up my GH account from unfinished PoCs I removed the tool mentioned below, so the link leads to a 404. There's someone else's project, though, which may interest you: http://styliner.slaks.net/

---

I created simple CSS styles inliner - styliner.

It works on Firefox and Chrome. May also work on IE9+ and Safari 6, but I haven't tested it yet. This version does not need a new window - it uses iframe (so it may not work on IE - it always needs some tricks to make iframes work :).

It lacks support for CSS specificity, so at least for now, to use it, you would have to sort rules manually. But maybe I'll find some time to add this feature soon.

Answer 2

I'm not sure if this will help but I found this nice little jQuery/javascript method that can be embedded into a page - http://devintorr.es/blog/2010/05/26/turn-css-rules-into-inline-style-attributes-using-jquery/

I've edited it a little to support IE and also to support a page with multiple CSS files attached applying the styles in the correct order. The if(rules[idx].selectorText.indexOf("hover") == -1) line is necessary because jQuery (as of 1.8) can't use the :hover selector anymore apparently.

$(document).ready(function ($) {
            var rules;
            for(var i = document.styleSheets.length - 1; i >= 0; i--){
                if(document.styleSheets[i].cssRules)
                    rules = document.styleSheets[i].cssRules;
                else if(document.styleSheets[i].rules)
                    rules = document.styleSheets[i].rules;
                for (var idx = 0, len = rules.length; idx < len; idx++) {
                    if(rules[idx].selectorText.indexOf("hover") == -1) {
                        $(rules[idx].selectorText).each(function (i, elem) {
                            elem.style.cssText = rules[idx].style.cssText + elem.style.cssText;
                        });
                    }
                }
                $('style').remove();
                $('script').remove();
                $('link').remove();
            }
        });

The page can then be copy/pasted into the email body.