Utilidades

No es necesario usar utilidades, pero en algunos casos simplifican el trabajo. Cada función de StyleSheet Maker recibe como argumento un objeto con utilidades.

key

Clave de hoja de estilo única.

Example

import { TStyleSheetMaker } from 'effcss';

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

dash

Une tipos primitivos con un guion.

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

Une tipos primitivos con coma.

Example

import { TStyleSheetMaker } from 'effcss';

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

space

Combina elementos primitivos con el espacio.

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

Itera sobre un array de una longitud específica.

Example

import { TStyleSheetMaker } from 'effcss';

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

each

Itera sobre las entradas de los objetos o los valores de los arrays.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ each }) => {
    const rules = each(
        {
            '.sz-1': '1rem',
            '.sz-2': '2rem',
            '.sz-3': '3rem',
            '.sz-4': '4rem',
            '.sz-5': '5rem'
        },
        (k, v) => {
            return {
                [k]: {
                    width: v
                }
            };
        }
    );
    return rules;
};

merge

Realiza una fusión profunda de objetos.

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

Devuelve el segundo argumento si el primero es verdadero.

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

Resuelve variables globales.

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)

Calcula el valor del tiempo en función de la variable de tiempo global.

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)

Calcula el valor del tamaño en función de la variable de tamaño global.

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)

Calcula el valor del ángulo en función de la variable de ángulo global.

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

Resuelve el selector BEM con ámbito.

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

Grupo de funciones de unidades CSS.

Example

import { TStyleSheetMaker } from 'effcss';

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

pseudo

Grupo de funciones de pseudoclase/pseudoelemento.

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

Grupo de funciones de reglas @.

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)

Resuelve la regla @property con ámbito.

Example

import { TStyleSheetMaker } from 'effcss';
// all the @property names don't make any sense - the provider will create them unique for each utility call
export const maker: TStyleSheetMaker = ({ at: { property } }) => {
    const firstProperty = property();
    const secondProperty = property({
        ini: '25px',
        inh: false,
        def: '10px' // will be used as reserve value in `var()` expression
    });
    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)

Resuelve la regla @keyframes con ámbito.

Example

import { TStyleSheetMaker } from 'effcss';
// all the @keyframes names don't make any sense - the provider will create them unique for each utility call
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)

Resuelve la regla @scope.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ at: { scope } }) => {
    // set root selector
    const baseScope = scope.root('.base');
    // set limit selector
    const limitedScope = baseScope.limit('.limit');
    return {
        // put rules in base scope
        ...baseScope({
            span: {
                textOverflow: 'hidden'
            }
        }),
        // put rules in limited scope 
        ...limitedScope({
            div: {
                width: '100%'
            }
        }),
        // put rules in limited scope excluding bounds
        ...limitedScope.none()({
            p: {
                fontSize: '1.5rem'
            }
        }),
        // put rules in limited scope including low bound
        ...limitedScope.low()({
            p: {
                fontSize: '2rem'
            }
        }),
        // put rules in limited scope including both bounds
        ...limitedScope.both()({
            p: {
                fontSize: '0.5rem'
            }
        })
    };
};

at.media (^3.8.0)

Resuelve la regla @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)

Resuelve la regla @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)

Resuelve la regla @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

Grupo de funciones de 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)

Instancia de la clase Palette. Permite usar colores del formato oklch con valores predefinidos de luminosidad, croma y tono.

Example

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = ({ palette }) => {
    // `palette.fg` returns foreground color, while `palette.bg` returns background color.
    // Background and foreground have different lightness and chroma values for each variant.
    // Hue variants are `pri`, `sec`, `suc`, `inf`, `war`, `dan`.
    // Chroma variants are `grey`, `pale`, `base`, `rich`
    // Lightness variants are `xs`, `s`, `m`, `l`, `xl`.
    // Lightness options increase as you approach contrast (0 in light mode and 1 in dark mode), so `xs` = 0.48, `xl` = 0.24 in dark mode background and `xs` = 0.78, `xl` = 0.98 in light mode background
    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

Grupo de funciones de límite de ancho.

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)

Instancia de la clase Coeficiente. Permite utilizar rangos de coeficientes con variables globales predefinidas.

Example

import { TStyleSheetMaker } from 'effcss';

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

Utilidades ​

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) ​

Utilidades

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)