Releases: Cascades-CSS/CSS-to-HTML
Version 0.8.3
- Updates various dependencies (a6e7b22)
Version 0.8.2
Version 0.8.1
Version 0.8.0
Static Script
CSS-to-HTML can now be used as a static script.
To do so, download css-to-html.js from the assets section below. 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>Make sure to check the releases page frequently for updates.
Version 0.7.1
Version 0.7.0
Nested Selectors
The CSS nesting module and the nesting selector are now supported. For example, the following CSS:
main {
display: flex;
& section {
content: 'A';
}
.message:is(.warning) {
color: orange;
}
}Will now produce:
<body>
<main>
<section>A</section>
</main>
</body>Version 0.6.2
Updates DOMPurify dependency to 3.1.4, bringing with it support for Popover API attributes.
Version 0.6.1
Fixes a bug that allowed certain element attributes to run external scripts before the element was actually added to the DOM.
Important
If you were already relying on the sanitization options provided in v0.6.0 it is recommended that you update to v0.6.1 immediately.
Version 0.6.0
Sanitization
Generated HTML output is now sanitized by default. This should lower the risk of any XSS vulnerabilities arising from use with user generated or copy-pasted CSS. For example, the following CSS:
img[onload="console.log('foo')"] {
content: 'malicious.png';
}
script {
content: 'fetch("http://malicious.com/").then(() => alert(1));';
}When un-sanitized will produce:
<body>
<img src="malicious.png" onload="console.log('foo')">
<script>
fetch("http://malicious.com/").then(() => alert(1));
</script>
</body>But when sanitized will instead produce:
<body>
<img src="malicious.png">
<script></script>
</body>Options
If you're using CSS-to-HTML as part of a framework or build process, elements like this may actually be desired. For cases like this, a new option has been added to configure the sanitization behaviour:
| Option | Values | Description |
|---|---|---|
sanitize |
all * |
Sanitize the generated HTML using DOMPurify. |
imports |
Only sanitize the HTML generated from imported stylesheets. | |
off |
Don't sanitize the generated HTML. |
Breaking Changes
Important
Because sanitization is enabled by default, certain CSS inputs may produce different HTML outputs than before.
It is recommended to double-check your use case before updating.
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. |