Recipes

In this section, we'll look at how to make the most of the EffCSS features.

Multiple values ​​for one key

Some CSS properties have different browser support, so you may need to specify several options. To do this, use arrays with the desired order of values:

import { customStyles } from 'effcss';

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

This works with objects too:

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

Generic font names

The font and fonts utilities allow you to specify a generic font name that will always be used as the last fallback value:

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

Standalone style generator

You can create a generator function separately and use it to dynamically generate a stylesheet:

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