@dorilama/styled-components v0.2.1

Create functions that produce HTML content via with style attached. Currently uses µhtml and @dorilama/nano-css. Inspired by nano-css, goober, and all the other famous libraries.

Disclaimer

This is a demo project for learning purposes.

Usage

import { render, html } from "uhtml";
import { glob, css } from "@dorilama/nano-css";
import { setup, styled } from "@dorilama/styled-components";

setup({ css, html });

glob`:root{
    --font-size: 24px;
}`;

const color = "red";

const hello = styled.h1`
font-size: var(--font-size)
color: ${color}
background-color: ${(props) => props.bkg}
`;

render(document.body, hello("Hello world", { bkg: "yellow" }));

Security

This library allow to use arbitrary input as interpolations. User input used as style can lead to CSS injection. Read here to have an idea of the problem.