@atomico/hostcss

A small alternative to styled-components, allows the creation of static CSS with intelligent dynamic behavior.

let Button = styled("button")`
    background: var(--bg);
    &.is-checked {
        color: red;
    }
`;

<Button bg="tomato" checked />;

Hostcss was created to work with atomic, but you can use createStyled(createElement) to associate it with another library that works with pragma

state selector

Hostcss detects selectors that start with the prefix .is- and assumes that this is a property of the component.

let Button = styled("button")`
    &.is-primary {
        background: white;
        color: palevioletred;
    }
`;

<Button primary />;

dynamic properties

Hostcss detecta las custom properties y asume que esta es una propiedad del componente.

let Button = styled("button")`
    background: var(--bg);
    color: var(--theme-color);
`;

<Button bg="black" themeColor="black" />;