staticcss
v1.0.1
Published
Module that statically applies css to html and inlines all styles (full CSS3 support), useful for email
Downloads
2
Readme
StaticCSS
StaicCSS is node module that inlines all CSS styles into style
attribute of element, which is very useful in emails. Provides full CSS3 support.
For example:
test.css
a {
text-decoration: none;
}
div.a div.b:first-child {
color: red;
}
test.html
<link rel="stylesheet" type="text/css" href="test.css">
<a href="#somelink">Some link</a>
<div class="a">
<div>
<div class="b">First</div>
<div class="b">Last</div>
</div>
</div>
Result in:
output.html
<a href="#somelink" style="text-decoration:none">Some link</a>
<div>
<div>
<div class="b" style="color:red">First</div>
<div class="b">Last</div>
</div>
</div>
Features
- Full CSS3 support including
- Attributes matching, like
[attr=value]
,[attr~=value]
, etc - All pseudo elements like
:first-child
,nth-element
and evennth-of-type
. Dynamic pseudo elements (like:visited
) blocks style since it is impossible to embed them intostyle
attribute. - Pseudo classes:
::before
,::after
- Attributes matching, like
<style>
blocks inside HTML- External CSS files references in
<link>
tag
Installation
npm install -g staticcsss
Usage
var staticcss = require('staticcss');
/**
* If youdon't use external CSS files and declare all styles in <style> block in * HTML you can just pass html code to translate
*/
var result = staticcss.apply({
html: '<div>sample html</div>'
});
/**
* If you use external CSS files @root paramater specifies path for CSS files,
* so if you write <link rel="stylesheet" type="text/css" href="dir/my.css">
* path from <link> tag will be appended to path specified in @root param.
*/
var result = staticcss.apply({
html: '<div>sample html</div>',
root: '/path/to/your/css/files'
});
/**
* If you want to execute code that uses the same CSS files periodically you can
* consider create cssLoader one time and then pass it to .apply function so that
* you will not reparse CSS files again (especially if you use big CSS files like
* Bootstrap)
*/
var cssLoader = new staticcss.CachedCssLoader({root:'/path/to/your/css/files'});
var result = staticcss.apply({
html: '<div>sample html</div>',
loader: cssLoader
});
Command line usage
You can play with it from command line, or just precompute your mail tempaltes so that you won't need to process them at runtime and use with whatever programming language your want).
Command:
staticss some.html
will output processed html file.
License
StaticCSS is licensed under MIT license. Basically you can do whatever you want to with it.