Recetas

En esta sección, veremos cómo sacar el máximo partido a las funciones de EffCSS.

Múltiples valores para una misma clave

Algunas propiedades CSS tienen diferente compatibilidad con distintos navegadores, por lo que es posible que deba especificar varias opciones. Para ello, utilice matrices con el orden de valores deseado:

import { customStyles } from 'effcss';

customStyles(() => {
    return {
        '.cls': {
            textDecoration: ['underline', 'underline dotted'] 
        } // -> .cls{text-decoration:underline;text-decoration:underline dotted;}
    };
});

Esto también funciona con objetos:

import { customStyles } from 'effcss';

customStyles(() => {
    return {
        '@font-face': [
            {
                fontFamily: '"Bitstream Vera Serif Bold"',
                src: 'url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2")'
            },
            {
                fontFamily: '"MyHelvetica"',
                src: 'local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("MgOpenModernaBold.woff2")',
                fontWeight: 'bold'
            }
        ] // -> @font-face { /* Bitstream Vera Serif Bold */} @font-face { /* MyHelvetica */};
    };
});

Nombres de fuentes genéricas

Las utilidades font y fonts permiten especificar un nombre de fuente genérico que siempre se utilizará como último valor de reserva:

import { font, customStyles } from 'effcss';

const base = font({
    src: `url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2")`,
    genericName: 'sans-serif'
});

const alt = font({
    src: `url("/fonts/roboto-regular.woff2") format("woff2"), url("/fonts/roboto-regular.woff") format("woff")`,
    weight: 400,
    style: 'normal',
    display: 'swap'
});

customStyles(() => {
    return {
        body: {
            fontFamily: base() // -> fontFamily: "base font name", sans-serif;
        },
        '.alt': {
            fontFamily: alt('"Inter"') // -> fontFamily: "alt font name", "Inter";
        },
        '.base-with-fallbacks': {
            fontFamily: base(alt, '"Inter"') // -> fontFamily: "base font name", "alt font name", "Inter", sans-serif;
        }
    }
})

Generadora de estilo independiente

Puedes crear una función generadora por separado y usarla para generar dinámicamente una hoja de estilos:

import type { Generator } from 'effcss';
import { attributes, classNames } from 'effcss';

type Card = {
    w: 's' | 'm' | 'l';
    blur: true;
    card: {
        variant: 1 | 2;
        rounded: true;
    }
}

const stylesGenerator: Generator<Card> = (selectors) => {
    const {w, card, blur} = selectors;
    return {
        [w.s]: {
            width: '12px'
        },
        [blur.true]: {
            filter: 'blur(5px)'
        },
        [card]: {
            background: 'white'
        },
        [card.variant[1]]: {
            width: 'auto',
            display: 'block',
            padding: '12px',
            '&:hover': {
                cursor: 'pointer'
            }
        },
        // and so on
    }
};

export const createStylesheet = (type: 'attr' | 'cls') => {
    if (type === 'attr') return attributes(stylesGenerator);
    else return classNames(stylesGenerator);
};

Reglas CSS sin bloque de declaración

Para usar una regla sin bloque de declaración, solo necesitas pasar una cadena vacía como valor:

const custom = customStyles(() => ({
    '@layer base, utils': '', // -> @layer base, utils;
    '@layer base': {
        '.cls': {
            fontWeight: 'bold'
        }
    }
}));