css-to-html

v0.8.0

Published

2 months ago

Generate HTML documents from just CSS.

Downloads

0High
0Medium
0Low

gigabyte5671

css html generator converter

CSS-to-HTML

Generate HTML documents from just CSS.

Give it a try on Cascades ✨

Usage

[!NOTE] CSS-to-HTML relies on some browser-only JS features, so it doesn't work in Node (yet).
If you want to use this in a Node project, please use a webdriver like Puppeteer.

With a Bundler

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

Or as a Static Script

Download the latest script from the releases page. 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>

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 innerHTML or outerHTML. For example:
const html = await cssToHtml('h1#greeting { content: "Hello!"; }');
console.log( html.innerHTML ); // '<h1 id="greeting">Hello!</h1>'
console.log( html.outerHTML ); // '<body><h1 id="greeting">Hello!</h1></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 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. |

import { cssToHtml, type Options } from 'css-to-html';

// An example options object (populated with default values).
const options: Options = {
    duplicates: 'remove',
    fill: 'fill',
    imports: 'style-only',
    mergeNth: 'merge',
    sanitize: 'all'
};

const css = 'p { color: purple; }';
const html = await cssToHtml(css, options);

Published

Vulnerabilities

Links

Maintainers

Keywords