What is the best way to process external CSS stylesheets and inject into inline CSS elements?

Question

I am going to be writing a PHP mailing list system. Ideally, I would like for the templates styles to be easy to manage. In my current system, I have the styles all hardcoded in the template like this:

<a href="http://blah/blah/blah" style="color: #a8a8a8;">click here</a>

This works alright until the person managing the template decides that they want to change the color of the link text. What I'd really like is to have something process the HTML and style definitions and output the HTML with the appropriate HTML.

What I am hoping for is something that will take the following input:

<style type="text/css">
a {
    color: #a8a8a8;
}
</style>
<a href="http://blah/blah/blah"&gt;click here</a>

... and generate...

<a href="http://blah/blah/blah" style="color: #a8a8a8;">click here</a>

... such that if the stylesheet is updated, the "rendered" HTML will all reflect these changes.

It would be great if this could be used with either inline <style></style> tags or by using external CSS links.

I'm doing this because my experience has shown that some (most? all?) of the webmail clients I have used do not appear to honor style information, external or otherwise. If I've missed something here and there is a more simple way to do this, would love to hear about those suggestions too. :)

EDIT I did some more queries and found another Stackoverflow question that discusses CSS Selectors and I think I will try to use something like phpQuery to handle this.

Answer 1

Update: I rewrote this after I realized I misunderstood your question.

You could code up a PHP script that translates all the style blocks into hard-coded styles for each HTMLElement. The pseudo code could be:

1. load up an XML parser for the HTML email generated by your mailing list program
2. xpath get all "style" nodes
3. for each node, parse for the id and/or class of the CSS style (you'll need some regexes for these)
4. for each id and/or class found, look up that node by attribute id or class (using xpath) and append to the existing value of the style attribute

Answer 2

I decided to look into handling this with phpQuery. I believe it provides the cleanest solution to my problem.

Answer 3

I'm using emogrifier for this. It works well, it converts all CSS to XPath selectors and then uses PHP's DOMXPath (us.php.net/manual/en/class.domxpath.php) to query the nodes and append the style attributes, and then output the HTML with CSS inlined.

Only problem I'm having with it is that DOMXPath doesn't seem to like the XPath queries it generates for selectors that select for multiple classes/ids on the same element, ie:

#nav_home.current a .ir {
...
}

which generates

//*[@id="nav_home"]*[contains(concat(" ",@class," "),concat(" ","current"," "))]//a//*[contains(concat(" ",@class," "),concat(" ","ir"," "))]

which apparently DOMXPath doesn't like. But except for those selectors, it seems to work great.

So I need to either learn XPath and fix its XPath generator, or find another XPath generator, or maybe I'll try and incorporate this PHPQuery thing as well.