DEV Community

loading...

Hostcss, es una nueva alternativa al mundo de css-in-js

Matias Trujillo
・2 min read

Hostcss, es una nueva alternativa al mundo de css-in-js con un tamaño no mayor a 1kB, que permite renderizar CSS en el cliente o el servidor.

Ejemplo

He creado hostcss con algunas ideas de styled-components y goober

  1. funcion css
  2. css nesting
  3. css media queries
  4. css estados
  5. ayuda

función css

Esta función permite imprimir el css en el documento, con una clase única dentro de hostcss, cssretorna una función capas de manejar estados o resolver el nombre de clase del css impreso.

import { css } from "@atomico/hostcss";

let button = css`
    background: black;
    color: white;
    border: none;
    &:hover {
        transform: scale(1.1);
    }
    &--alert {
        background: var(--theme-color-alert, crimson);
    }
`;

document.querySelector("#button").className = button;
document.querySelector("#button-alert").className = button({alert:true});

css nesting

Es habitual el uso de nesting(anidamiento del css) al momento de generar reglas de estilo, hostcss cubre este aspecto, pero considere la siguiente regla:

no use selectores mutiles para nesting ejemplo & h1, &h2{...nesting}, use el patrón presentado en el siguiente ejemplo.

css`
    & button {
        & span {
            font-size: 30px;
        }
        & i {
            font-size: 50px;
            &:hover {
                background: red;
            }
        }
    }
`;

css media queries

Estos pueden ser anidados a la raíz o dentro de otros selectores del árbol.

css`
    & button {
        & i {
            font-size: 50px;
            @media (max-width: 320px) {
                font-size: 30px;
            }
        }
    }
`;

css estados

Recuerde el retorno de css es una función, esta permite resolver el nombre del estilo impreso y a su vez permite añadir estados a className.

let className = css`
    &--checked {
        background: teal;
        &:hover {
            color: white;
        }
    }
    &--active {
        background: black;
        &:hover {
            color: yellow;
        }
    }
`;

document.querySelector("button").className = className({
    checked: 1,
    active: 0
}); // <hash-classname> <hash-classname>--checked

Ejemplo codesanbox

El ejemplo adjunto enseña como usar Hostcss + Parcel + Atomico, considere esto solo un ejemplo ud puede usar Hostcss, con Preact, Atomico, Hyperapp, lit-html o React, sin problemas.

Ayuda

hostcss es una librería en nacimiento, falta acabar algunos test asociados a la generación del estilo, 🙏 favor comuníquese con migo mediante Twitter si gusta ser participe de esto, @uppercod

Discussion (0)

Forem Open with the Forem app