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.
This is a demo project for learning purposes.
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" }));
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.