Releases: Cascades-CSS/CSS-to-HTML
Version 0.5.0
Async
The generator function now runs asynchronously. You can call it using the await keyword or .then():
const html = await cssToHtml(css);Or:
cssToHtml(css).then(html => console.log(html));Attributes
Attribute selectors are now supported. For example:
label[for="username"] input#username[type="text"][required] {
content: 'Username';
border-radius: 0.2em;
}Will become:
<label for="username">
<input id="username" type="text" placeholder="Username" required>
</label>Imports
An imports option has been added.
| Option | Values | Description |
|---|---|---|
imports |
include |
Fetch imported stylesheets and include them in the HTML generation process. |
style-only * |
Ignore @import rules when generating HTML. |
Version 0.3.1
Grouped selectors are now supported. For example:
h1,
p {
content: 'Hello';
margin: 0;
}Will become:
<h1>Hello</h1>
<p>Hello</p>Generation of elements from nth selectors (with fill enabled) has been improved and is now more inline with the CSS spec.
Input:
span:nth-child(5) {
color: red;
}
div.first:first-child {
content: 'a';
}
span.last:last-child {
content: 'b';
}
span:last-child {
content: 'c';
}Old output:
<div class="first">a</div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span class="last">b</span>
<span>c</span>This breaks the styles applied by span.last:last-child.
New output:
<div class="first">a</div>
<span></span>
<span></span>
<span></span>
<span class="last">c</span>All styles are respected.
Our testing methodology is now greatly improved, using Playwright for test-driven development on Chromium, Firefox, and Webkit.
Version 0.3.0
nth selectors are now supported 🎉
This includes:
:first-child:nth-child:last-child:first-of-type:nth-of-type:last-of-type
This also introduces a new "fill" behaviour where missing elements are filled in up to the desired nth level. For example:
article section:nth-child(5) p {
content: 'Fifth section.';
font-style: italic;
}Will produce:
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section>
<p>Fifth section.</p>
</section>
</article>Filling in these missing elements allows nth selector styles to still be applied, regardless of neighbouring elements.
This behaviour can be prevented by calling with fill set to 'no-fill':
cssToHtml(css, { fill: 'no-fill' });Note: Cascading is always maintained.
Version 0.2.0
Duplicate elements will now be removed from the HTML output by default. For example:
button {
content: 'Click me';
display: flex;
color: red;
}
/* ... */
button {
content: 'Click here';
color: blue;
}Will produce:
<button>Click here</button>This behaviour can be prevented by calling with duplicates set to 'preserve':
cssToHtml(css, { duplicates: 'preserve' });Note: Cascading is always maintained.
Version 0.1.0
Generate HTML documents from just CSS.
Usage
From a CSS string.
import { cssToHtml } from 'css-to-html';
const css = 'p { color: purple; }';
const html = cssToHtml(css);Or from a style element:
import { cssToHtml } from 'css-to-html';
const css = document.querySelector('style').sheet.cssRules;
const html = 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>