Skip to content

Releases: Cascades-CSS/CSS-to-HTML

Version 0.3.1

09 Jul 23:47
@Gigabyte5671 Gigabyte5671
v0.3.1
ca7a183
Compare
Choose a tag to compare
Version 0.3.1 Pre-release
Pre-release

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.

Loading

Version 0.3.0

05 Jul 05:32
@Gigabyte5671 Gigabyte5671
v0.3.0
36f2885
Compare
Choose a tag to compare
Version 0.3.0 Pre-release
Pre-release

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.

Loading

Version 0.2.0

29 May 03:22
@Gigabyte5671 Gigabyte5671
v0.2.0
5ee52c7
Compare
Choose a tag to compare
Version 0.2.0 Pre-release
Pre-release

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.

Loading

Version 0.1.0

28 May 09:35
@Gigabyte5671 Gigabyte5671
v0.1.0
20c5850
Compare
Choose a tag to compare
Version 0.1.0 Pre-release
Pre-release

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>
Loading