css-to-html
v0.8.1
Published
Generate HTML documents from just CSS.
Downloads
72
Maintainers
Readme
CSS-to-HTML
Generate HTML documents from just CSS.
Give it a try on Cascades ✨
Usage
[!NOTE] CSS-to-HTML relies on some browser-only JS features, so it doesn't work in Node (yet).
If you want to use this in a Node project, please use a webdriver like Puppeteer.
With a Bundler
npm i css-to-html
import { cssToHtml } from 'css-to-html';
// From a CSS string:
const css = 'p { color: purple; }';
const html = await cssToHtml(css);
// Or from a style element:
const css = document.querySelector('style').sheet.cssRules;
const html = await cssToHtml(css);
Or as a Static Script
Download the latest script from the releases page. Then include the script in your site:
<script src="path/to/css-to-html.js"></script>
<script>
const css = 'p { color: purple; }';
cssToHtml(css).then(html => {
console.log(html);
});
</script>
Example
Input:
h1 {
content: 'Awesome!';
color: grey;
}
p > button.rounded {
content: 'Click here';
background: #fff;
border-radius: 8px;
}
p > button.rounded:hover {
background: #ddd;
}
a img#logo {
content: 'https://example.com/image';
display: block;
width: 1.5em;
height: 1.5em;
}
Output:
<body>
<h1>Awesome!</h1>
<p>
<button class="rounded">Click here</button>
</p>
<a><img src="https://example.com/image" id="logo"></a>
</body>
[!NOTE]
cssToHtml
always returns anHTMLBodyElement
. To get the string representation of the generated HTML, useinnerHTML
orouterHTML
. For example:const html = await cssToHtml('h1#greeting { content: "Hello!"; }'); console.log( html.innerHTML ); // '<h1 id="greeting">Hello!</h1>' console.log( html.outerHTML ); // '<body><h1 id="greeting">Hello!</h1></body>'
Options
An options object can be passed as the second argument to cssToHtml()
to customize the behavior of the HTML generator. (Values marked with * are default).
| Option | Values | Description |
| :----------- | :------------- | :---------- |
| duplicates
| preserve
| Preserve duplicate elements. Eg: button {} button {}
Will become: <button></button><button></button>
. |
| | remove
* | Remove duplicate elements. Eg: button {} button {}
Will become: <button></button>
. |
| fill
| fill
* | Fill the DOM with duplicate elements up to the desired location. Eg: span#fourth:nth-child(4) {}
Will become: <span></span><span></span><span></span><span id="fourth"></span>
. |
| | no-fill
| Don't fill. Eg: span#fourth:nth-child(4) {}
Will become: <span id="fourth"></span>
. |
| imports
| include
| Fetch imported stylesheets and include them in the HTML generation process. |
| | style-only
* | Ignore @import
rules when generating HTML. |
| mergeNth
| merge
* | Elements generated from :nth-
selectors will be merged with any similar element occupying the desired location. |
| | no-merge
| These elements will not be merged. |
| sanitize
| all
* | Sanitize the generated HTML using DOMPurify. |
| | imports
| Only sanitize the HTML generated from imported stylesheets. |
| | off
| Don't sanitize the generated HTML. |
import { cssToHtml, type Options } from 'css-to-html';
// An example options object (populated with default values).
const options: Options = {
duplicates: 'remove',
fill: 'fill',
imports: 'style-only',
mergeNth: 'merge',
sanitize: 'all'
};
const css = 'p { color: purple; }';
const html = await cssToHtml(css, options);