hostcss v0.1.0

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

imports

// for @atomico/core
import styled from "hostcss/atomico";
// for Preact
import styled from "hostcss/preact";
// for React
import styled from "hostcss/react";
// keyframes
import { keyframes } from "hostcss";

Hostcss was created to work with atomico, 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" />;

template component

styled supports the delivery of a functional component as an argument to structure the return as a template

function Template(props, host) {
	return (
		<div {...host(props)}>
			<button>{props.children}</button>
		</div>
	);
}

export default styled(Template)`
	width: 200px;
	height: 200px;
	& button {
		background: teal;
	}
`;

The second parameter is required to generate with this the host's className and customProperties

nested

The nested hostcss is based on the draft standard.

/** ❌ **/
width: 200px;
button {
	background: color;
}
/** ✔️ **/
width: 200px;
& button {
	background: color;
}

I recommend avoiding the use of the BEM pattern inside hostcss.