css-to-html
TypeScript icon, indicating that this package has built-in type declarations

0.6.2 • Public • Published

CSS-to-HTML

Unit Tests npm version npm npm bundle size

Generate HTML documents from just CSS.

Give it a try on Cascades

Usage

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);

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 an HTMLBodyElement. To get the string representation of the generated HTML, use outerHtml. For example:

const html = await cssToHtml('h1#greeting { content: "Hello!"; }');
console.log( html.outerHtml );

Output:

'<h1 id="greeting">Hello!</h1>'

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.

Package Sidebar

Install

npm i css-to-html

Weekly Downloads

8

Version

0.6.2

License

MIT

Unpacked Size

45.9 kB

Total Files

18

Last publish

Collaborators

  • gigabyte5671