Recetas

En esta sección, veremos cómo aprovechar al máximo las funciones de EffCSS.

Composición de creadores

La función StyleSheet maker no tiene por qué ser pura; puedes recopilar estilos combinando llamadas a otras funciones, incluyendo otros creadores.

Example

import { TStyleSheetMaker } from 'effcss';
import { type TFirstMaker, firstMaker } from 'firstMakerLib';
import { type TSecondMaker, secondMaker } from 'secondMakerLib';

export type TCompositeMaker = TFirstMaker & TSecondMaker;

export const compositeMaker: TStyleSheetMaker = (utils) => {
    return {
        ...firstMaker(utils),
        ...secondMaker(utils)
    };
};

Fábrica de plantillas

En ocasiones, es necesario configurar estilos dentro de la función StyleSheet maker sin usar variables de tema. En este caso, se puede describir la función StyleSheet maker creator, que creará una plantilla a partir de los parámetros proporcionados.

Example

import { TStyleSheetMaker } from 'effcss';

export type TMakerCreator = (params: {
    sizes: {
        s: number;
        m: number;
        l: number;
    };
    max: number;
    min: number;
}) => TStyleSheetMaker;

export const DEF_PARAMS = {
    sizes: {
        s: 2.5,
        m: 5,
        l: 7.5
    },
    min: 0,
    max: 10
};

export const createMaker: TMakerCreator = (params = DEF_PARAMS) => (utils) => {
    const {
        sizes,
        max,
        min
    } = params;
    return {
        // css
    };
};

Al utilizar esta función, deberá crear una instancia del creador y usarla para crear una hoja de estilos.

Example

import { type TConfiguredMaker, createMaker } from './maker';
export type TConfiguredMaker;
export const maker = createMaker({
    sizes: {
        s: 1,
        m: 4,
        l: 10
    },
    min: 0,
    max: 12
});

Cambio de creadores

A veces es necesario recalcular los estilos, pero los selectores deben permanecer iguales. Por ejemplo, si ofrece al usuario la posibilidad de ajustar el tamaño y el color de un componente de forma interactiva, aunque EffCSS solo requiere una llamada a la función StyleSheet maker para cada hoja de estilo, puede recalcularla utilizando el método remake. Este método incluso permite usar creadores diferentes si se dispone de un enlace al original.

Example

import { TStyleSheetMaker } from 'effcss';

const original: TStyleSheetMaker = () => ({
    // css
});
const substitute: TStyleSheetMaker = () => ({
    // css
});
const [originalResolver] = consumer.use(original); // use original
const substituteResolver = consumer.remake(substitute, original); // now substitute creates the original selectors
console.log(originalResolver('block.elem.mod').toString() === substituteResolver('block.elem.mod').toString()); // true - identical selectors

WARNING

Si va a cambiar el creador de la hoja de estilos, asegúrese de que su código contenga únicamente referencias al nuevo creador. Cualquier acceso a la versión original dará como resultado la creación de una nueva hoja de estilos con su propia clave única.

Múltiples valores para una propiedad CSS

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

Example

import { TStyleSheetMaker } from 'effcss';

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

Uso de estilos CSS predefinidos (^4.5.0)

En ocasiones, ya dispones de una cadena con estilos CSS predefinidos. Puedes devolverla desde el generador para evitar conversiones y transformaciones innecesarias.

Example

import { TStyleSheetMaker } from 'effcss';

const css = '.cls{text-decoration:underline;}';

const maker: TStyleSheetMaker = () => {
    return css;
};