0.5.0 • Published 8 months ago
css-to-html v0.5.0
CSS-to-HTML
Generate HTML documents from just CSS.
npm i css-to-htmlUsage
From a CSS string.
import { cssToHtml } from 'css-to-html';
const css = 'p { color: purple; }';
const html = await cssToHtml(css);Or from a style element:
import { cssToHtml } from 'css-to-html';
const css = document.querySelector('style').sheet.cssRules;
const html = await cssToHtml(css);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>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. | |
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. |