レシピ

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

1つのキーに複数の値を指定する

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

import { customStyles } from 'effcss';

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

これはオブジェクトにも適用できます。

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

汎用フォント名

font および fonts ユーティリティを使用すると、常に最後のフォールバック値として使用される汎用フォント名を指定できます。

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

スタンドアロンのスタイルジェネレーター

ジェネレーター関数を個別に作成し、それを使ってスタイルシートを動的に生成できます。

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

宣言ブロックなしのCSSルール

宣言ブロックなしでルールを使用するには、値として空の文字列を渡すだけです。

const custom = customStyles(() => ({
    '@layer base, utils': '', // -> @layer base, utils;
    '@layer base': {
        '.cls': {
            fontWeight: 'bold'
        }
    }
}));