Almost three years ago I released css2xpath#, a port of Andrea Giammarchi’s project by the same name. Today, I’m excited to announce a new project, css2xpath Reloaded, which will supplant my previous project. css2xpath Reloaded does the same thing that css2xpath# did (convert CSS selectors to XPath selectors), but is instead based off of Ian Bicking’s excellent Python app (also somewhat confusingly named css2xpath).

Although more complicated, a benefit of using a parser is that your CSS selectors can be validated during conversion. It’s also a little bit easier to extend the code. And most importantly (for me at least) it was a lot of fun to write.

I’d consider the code to be beta quality at the moment; it’s lacking in documentation and rigorous testing. However, if you’re interested in testing it out, proceed to BitBucket.

The author uses css2xpath to aid in inlining CSS stylesheets. Here is an excerpt of the project (I trimmed the first two paragraphs):

This week I worked on adding confirmation emails to our quiz system and was introduced to the maddeningly fickle world of HTML emails…

I had hoped that the detailed confirmation emails could simply re-use the HTML that our system already generated, but after a few test emails it became apparent that most of that HTML relied heavily on external stylesheets which no email client would render. With mounting dread I foresaw the likelihood that I would have to write another rendering engine for emails rather than re-using the one we already had…

Willing to do almost anything to avoid this code duplication I wondered if I could take the HTML rendered by the existing quiz engine and just tweak it to get it work in our emails. So how hard would it be to write some code that took these external stylesheets and applied them as inline rules (which is supported to some degree by most email clients)? Not hard at all as it turns out.

I’ve created a quick, simple tool that converts CSS file references (like url(images/someimage.png)) to inline image data (like url('data:....')). Written in C#, and available as an open source download (see below), the tool is a point-and-click alternative to manually making the data URIs.

Screenshot

To use the tool, follow these three steps:

Open the CSS file you want to work with.

Resolve the image references that CSS Image Embedder finds to actual files. Use Manual Resolve to manually resolve a single reference, or Auto Resolve to automatically resolve multiple references.

Save the CSS file. The image references are automatically inlined when you save it.

While working with HtmlAgilityPack to build a web scrapper/crawler, I noticed something: I hate XPath. It’s big, clunky, and verbose. After a bit of searching, I found a neat online app: http://css2xpath.appspot.com/. As the name suggests, it converts CSS selectors to XPath selectors. The only problem is that I wanted a client-side solution.

A little more searching, and I find css2xpath. It accomplishes the same thing as the web service, but does it client side, in JavaScript. So, I ported it to C#. And here we are.

The original css2xpath, written by Andrea Giammarchi, is a single JavaScript function that uses a series of Regexes to transform a CSS selector, step-by-step, into an XPath selector. My version does the same thing, and uses the same Regexes and transformation functions, but is written in C#.

Housed in a single static class, the handful of functions contained within are easy to use. For example:

css2xpath.Transform('#id');

Is all that it takes. That expression will yield: //*[@id='anID'].

Other features include the ability for you to define your own transformation rules. See the link below for more information and how to download. Enjoy!