Утилиты

Использовать утилиты не обязательно, но в некоторых случаях они упрощают жизнь. Каждая функция StyleSheet maker принимает в качестве аргумента объект с утилитами.

key

Уникальный ключ таблицы стилей.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ key }) => {
    const selector = `.${key}-container_fullWidth`;
    return {
        [selector]: {
            width: '100%'
        }
    };
};

dash

Объединяет примитивы с помощью тире.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ dash }) => {
    const width = {
        none: '0',
        half: '50%',
        full: '100%'
    };
    const widthRules = Object.entries(width).reduce((acc, [key, val]) => {
        const selector = dash('w', key);
        acc[selector] = {
            width: val,
        };
        return acc;
    }, {});
    return {
        ...widthRules
    };
};

comma

Объединяет примитивы с помощью запятой.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ comma }) => {
    const fonts = ['Georgia', 'serif'];
    return {
        html: {
            fontFamily: comma(...fonts)
        }
    };
};

space

Объединяет примитивы с помощью пробела.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ space }) => {
    const borderStyle = 'solid';
    const borderWidth = {
        s: '2px',
        l: '4px'
    };
    return {
        '.container': {
            border: space(borderWidth.s, borderStyle)
        }
    };
};

range

Выполняет итерацию по массиву заданной длины.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ range }) => {
    const rules = range(5, (sz) => {
        return {
            [`.h-${sz}`]: {
                height: sz + 'rem'
            }
        };
    });
    return {
        ...rules
    };
};

each

Выполняет итерацию по парам "ключ-значение" объекта или значениям массива.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ each }) => {
    const rules = range(5, (sz) => {
        return {
            [`.h-${sz}`]: {
                height: sz + 'rem'
            }
        };
    });
    return {
        ...rules
    };
};

merge

Выполняет глубокое слияние объектов.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ merge }) => {
    const base = {
        body: {
            width: '100%'
        },
        div: {
            width: '100%',
            span: {
                width: '100%'
            }
        }
    };
    const custom = {
        body: {
            width: '100vw',
            height: '100%'
        },
        div: {
            span: {
                background: 'transparent'
            }
        }
    };
    return merge(base, custom);
};

when

Возвращает второй аргумент, если первый равен true.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ when }) => {
    const values = [1, 2, 3, 4, 5, 6];
    const rules = values.reduce((acc, value) => {
        return {
            ...acc,
            ...when(!(value % 2), {
                [`sz-${value}`]: {
                    width: value + 'rem',
                    aspectRatio: 1
                }
            })
        }
    }, {})
    return {
        ...rules
    };
};

vars

Формирует глобальные переменные.

Example

import { TStyleSheetMaker } from 'effcss';

type TGlobalVars = {
    sz: {
        m: string;
        l: string
    }
};

export const maker: TStyleSheetMaker = ({ vars }) => {
    return {
        '.sz-m': {
            width: vars<TGlobalVars>('sz.m')
        }
    };
};

time (^3.2.0)

Вычисляет значение времени в зависимости от глобальной переменной времени.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ time }) => {
    return {
        '.dur-2': {
            // if global root time is 200ms (by default),
            // then result will be 400ms
            transitionDuration: time(2)
        }
    };
};

size (^3.5.0)

Вычисляет значение размера в зависимости от глобальной переменной размера.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ size }) => {
    return {
        '.w-2': {
            // if global root size is 16px (by default),
            // then result will be 32px
            width: size(2)
        }
    };
};

angle (^3.5.0)

Вычисляет значение угла в зависимости от глобальной переменной угла.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ angle }) => {
    return {
        '.w-2': {
            // if global root angle is 30deg (by default),
            // then result will be 60deg
            transform: `skew(${angle(2)})`
        }
    };
};

bem

Формирует BEM-селектор с областью действия таблицы стилей.

Example

import { TStyleSheetMaker } from 'effcss';

export type TStyleSheet = {
    block: {
        '': {
            hidden: '';
        };
        elem: {
            sz: 's' | 'm';
        };
    };
};

export const maker: TStyleSheetMaker = ({ bem }) => {
    const block = bem<TStyleSheet>({
        block: {}
    });
    const blockHidden = bem<TStyleSheet>({
        block: {
            '': {
                hidden: ''
            }
        }
    });
    const elementSzS = bem<TStyleSheet>('block.elem.sz.s');
    const elementSzM = bem<TStyleSheet>({
        block: {
            elem: {
                sz: 'm'
            }
        }
    });
    return {
        [block]: {
            overflow: 'hidden'
        },
        [blockHidden]: {
            visibility: 'hidden'
        },
        [elementSzS]: {
            width: '2rem'
        },
        [elementSzM]: {
            width: '5rem'
        }
    };
};

units

Группа функций CSS-units.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ units }) => {
    const { px, rem } = units;
    return {
        '.custom': {
            width: px(100),
            height: rem(1.5)
        }
    };
};

pseudo

Группа функций псевдоклассов/псевдоэлементов.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ pseudo }) => {
    const { h, aft, has, is } = pseudo;
    return {
        // .custom::after:hover
        [h(aft('.custom'))]: {
            color: 'transparent'
        },
        // .custom:hover
        ['.custom' + h]: {
            border: '2px solid gray'
        },
        // button:is(.custom):has(image)
        [has('image', is('.custom', 'button'))]: {
            cursor: 'pointer'
        }
    };
};

at

Группа функций at-rules.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ at }) => {
    const { cq, kf } = at;
    const query = cq('min-width: 5rem');
    const keyframes = kf();
    const property = pr();
    return {
        ...property.r,
        [keyframes.s]: {
            from: { width: '10px' },
            to: { width: property.v }
        },
        '.animated': {
            animationName: keyframes.k,
            animationDuration: '5s',
            animationIterationCount: 'infinite'
        },
        '.container': {
            containerName: query.c,
            containerType: 'inline-size',
            [property.k]: '30px'
        },
        [query.s]: {
            '.nested': {
                width: '100%'
            }
        }
    };
};

at.property (^3.6.0)

Формирует правило @property для области видимости таблицы.

Example

import { TStyleSheetMaker } from 'effcss';
// все имена @property не имеют никакого смысла - провайдер создаст их уникальными для каждого вызова утилиты
export const maker: TStyleSheetMaker = ({ at: { property } }) => {
    const firstProperty = property();
    const secondProperty = property({
        ini: '25px',
        inh: false,
        def: '10px' // будет использоваться в качестве резервного значения в выражении `var()`
    });
    const thirdProperty = property();
    return {
        ...firstProperty, // => @property --first-property-name {...}
        ...secondProperty,
        '.mod': firstProperty('150px'), // => '.mod': {'--first-property-name': '150px'}
        '.full': {
            ...secondProperty('100px'),
            ...thirdProperty('red'),
            aspectRatio: 1
        },
        '.cls': {
            width: firstProperty, // => width: `var(--first-property-name)`
            height: `calc(2 * ${secondProperty})` // => height: `calc(2 * var(--second-property-name,10px))`
        },
        '.cls2': {
            height: `calc(2 * ${secondProperty.fallback('35px')})`
        }
    };
};

at.keyframes (^3.6.0)

Формирует правило @keyframes для области видимости таблицы.

Example

import { TStyleSheetMaker } from 'effcss';
// все имена @keyframes не имеют никакого смысла - провайдер создаст их уникальными для каждого вызова утилиты
export const maker: TStyleSheetMaker = ({ at: { keyframes } }) => {
    const widthKf = keyframes({
        from: { width: '10px' },
        to: { width: '20px' }
    });
    const heightKf = keyframes({
        from: { height: '10px' },
        to: { height: '20px' }
    });
    return {
        ...widthKf, // => `@keyframes width-kf-name`: {...}
        ...heightKf,
        '.cls1': {
            ...widthKf()
        }, // => `.cls1`: {animationName: 'width-kf-name'}
        '.cls2': {
            animation: `3s linear 1s ${heightKf}` // => animation: `3s linear 1s height-kf-name`
        },
        '.cls3': heightKf({
            dur: '300ms',
            tf: 'ease'
        }) // => `.cls3`: {animation: `300ms ease height-kf-name`}
    };
};

at.scope (^3.7.0)

Формирует правило @scope.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ at: { scope } }) => {
    // установим корневой селектор
    const baseScope = scope.root('.base');
    // установим граничный селектор
    const limitedScope = baseScope.limit('.limit');
    return {
        // поместим правила в базовую область видимости
        ...baseScope({
            span: {
                textOverflow: 'hidden'
            }
        }),
        // поместим правила в ограниченную область видимости
        ...limitedScope({
            div: {
                width: '100%'
            }
        }),
        // поместим правила в ограниченную область видимости, исключая обе границы
        ...limitedScope.none()({
            p: {
                fontSize: '1.5rem'
            }
        }),
        // поместим правила в ограниченную область видимости, включая нижнюю границу
        ...limitedScope.low()({
            p: {
                fontSize: '2rem'
            }
        }),
        // поместим правила в ограниченную область видимости, включая обе границы
        ...limitedScope.both()({
            p: {
                fontSize: '0.5rem'
            }
        })
    };
};

at.media (^3.8.0)

Формирует правило @media.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ at: { media } }) => {
    const firstQuery = media.or('width < 600px', 'width > 1000px');
    const secondQuery = media.and(firstQuery, 'orientation: landscape');
    return {
        // @media (width < 600px) or (width > 1000px) {...}
        ...firstQuery({
            '.cls': {
                width: '100%'
            }
        }),
        // @media ((width < 600px) or (width > 1000px)) and (orientation: landscape) {...}
        ...secondQuery({
            '.cls': {
                width: '50%'
            }
        })
    };
};

at.container (^3.9.0)

Формирует правило @container.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ at: { container } }) => {
    const firstQuery = container.or('width < 600px', 'width > 1000px');
    const secondQuery = container.named.and('width > 100px');
    return {
        '.container': {
            ...secondQuery // container: cust-cq-1 / normal 
        },
        // @container (width < 600px) or (width > 1000px) {...}
        ...firstQuery({
            '.cls': {
                width: '100%'
            }
        }),
        // @container cust-cq-1 (width > 100px) {...}
        ...secondQuery({
            '.cls': {
                width: '50%'
            }
        })
    };
};

at.startingStyle (^3.11.0)

Формирует правило @starting-style.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ at: { startingStyle } }) => {
    return {
        '.target': {
            transition: 'background-color 1.5s',
            backgroundColor: 'green',
            ...startingStyle({opacity: 0})
        },
        ...startingStyle({
            '.target': {
                backgroundColor: 'transparent'
            }
        })
    };
};

color

Группа функций для работы с цветом.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ units }) => {
    const { create, fadeout } = color;
    let baseColor = create();
    baseColor = baseColor.c(0.2);
    const additionalColor = fadeOut(baseColor);
    return {
        '.custom': {
            background: additionalColor + '',
            color: baseColor.s
        }
    };
};

palette (^3.4.0)

Экземпляр класса палитры. Он позволяет использовать цвета в oklch с предопределенными значениями яркости, цветности и оттенка.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ palette }) => {
    // `palette.fg` возвращает цвет переднего плана, в то время как `palette.bg" возвращает цвет фона.
    // Фон и передний план имеют разные значения яркости и цветности для каждого варианта.
    // Вариантами оттенков являются `pri`, `sec`, `suc`, `inf`, `war`, `dan`.
    // Вариантами цветности являются `grey`, `pale`, `base`, `rich`
    // Вариантами яркости являются `xs`, `s`, `m`, `l`, `xl`.
    // Параметры яркости увеличиваются по мере приближения к контрасту (0 в светлом режиме и 1 в темном режиме), поэтому "xs" = .48, "xl" = 0.24 на темном фоне и "xs" = 0.78, "xl" = 0.98 на светлом фоне
    return {
        '.palette-complex': {
            color: palette.fg.gray.inf.l,
            backgroundColor: palette.bg.pale.sec.xl,
            borderColor: palette.fg.rich.xs.suc.alpha(0.75)
        }
    };
};

limit

Группа функций ограничения ширины.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ limit }) => {
    const{ down, between } = limit;
    return {
        // @media (max-width: 48rem)
        [down('md')]: {
            flexGrow: 1
        },
        // '@container (min-width: 30rem) and (max-width: 80rem)
        [between('xs', 'xl', '')]: {
            flexShrink: 0
        }
    };
};

coef (^3.5.0)

Экземпляр класса коэффициентов. Позволяет использовать диапазоны коэффициентов с предопределенными глобальными переменными.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ coef, size }) => {
    return each(coef.$2_.short, (k, v) => ({
        [`.size-` + k]: {
            width: size(v)
        }
    }));
};

Утилиты ​

key ​

dash ​

comma ​

space ​

range ​

each ​

merge ​

when ​

vars ​

time (^3.2.0) ​

size (^3.5.0) ​

angle (^3.5.0) ​

bem ​

units ​

pseudo ​

at ​

at.property (^3.6.0) ​

at.keyframes (^3.6.0) ​

at.scope (^3.7.0) ​

at.media (^3.8.0) ​

at.container (^3.9.0) ​

at.startingStyle (^3.11.0) ​

color ​

palette (^3.4.0) ​

limit ​

coef (^3.5.0) ​

Утилиты

key

dash

comma

space

range

each

merge

when

vars

time (^3.2.0)

size (^3.5.0)

angle (^3.5.0)

bem

units

pseudo

at

at.property (^3.6.0)

at.keyframes (^3.6.0)

at.scope (^3.7.0)

at.media (^3.8.0)

at.container (^3.9.0)

at.startingStyle (^3.11.0)

color

palette (^3.4.0)

limit

coef (^3.5.0)