Рецепты

В этом разделе мы рассмотрим, как максимально эффективно использовать возможности EffCSS.

Несколько значений для одного ключа

Некоторые свойства CSS поддерживаются разными браузерами, поэтому вам может потребоваться указать несколько параметров. Для этого используйте массивы с желаемым порядком значений:

import { customStyles } from 'effcss';

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

Это работает и с объектами:

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 */};
    };
});

Названия семейств шрифтов

Утилиты font и fonts позволяют указать название семейства шрифтов, которое всегда будет использоваться в качестве последнего резервного значения:

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;
        }
    }
})

Автономная функция-генератор стилей

Вы можете создать функцию-генератор отдельно и использовать её для динамической генерации таблицы стилей:

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);
};