レシピ

このセクションでは、EffCSS 機能を最大限に活用する方法を見ていきます。

スタイルシート作成関数の組み合わせ

StyleSheet maker 関数は純粋である必要はありません。他のスタイルシート作成関数を含む、他の関数の呼び出しを組み合わせることで、スタイルを収集できます。

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

メーカーファクトリ

テーマ変数を使用せずに、StyleSheet maker 関数内でスタイルを設定する必要がある場合があります。このような場合は、渡されたパラメータに基づいてメーカーを作成する StyleSheet maker creator 関数を記述できます。

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

このような機能を使用する場合は、メーカーのインスタンスを作成し、それを使用してスタイルシートを作成する必要があります。

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

メーカーの変更

スタイルを再計算する必要があるものの、セレクタ自体は変更できない場合があります。例えば、ユーザーがコンポーネントのサイズや色をインタラクティブに調整できる機能を提供する場合などです。EffCSSは各スタイルシートに対してStyleSheet maker関数を一度だけ呼び出すことを前提としていますが、remakeメソッドを使用すれば再計算を実現できます。このメソッドでは、元のメーカーへのリンクがあれば、異なるメーカーを使用することも可能です。

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

スタイルシートの作成者を変更する場合は、コード内に新しい作成者への参照のみが含まれていることを確認してください。元のバージョンにアクセスすると、固有のキーを持つ新しいスタイルシートが作成されます。

CSSプロパティの複数値指定

CSSプロパティによってはブラウザによってサポート状況が異なるため、複数のオプションを指定する必要がある場合があります。その場合は、値の順序を指定した配列を使用してください。

Example

import { TStyleSheetMaker } from 'effcss';

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

プリペアドCSSスタイル（^4.5.0）の使用

場合によっては、既にCSSが記述された文字列が手元にあることがあります。不要な変換や修正を避けるため、作成元からその文字列を返すことができます。

Example

import { TStyleSheetMaker } from 'effcss';

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

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