CSS

各ユニットはデフォルトでは1つのCSSファイルを持ちます。各ユニットのCSSファイルは、ロードしてユニットに適用される必要があります。BitsmistJSではCSSの適用に標準技術のConstructable Stylesheetsを採用しており、設定に記述することで、共通のCSSと各ユニット専用のCSSといった複数の構造化されたCSSをユニットに適用することができます。また、複数のCSSを切り替えて使ったり、逆にCSSを全く使用しないユニットを作ることもできます。これらの機能はStylePerkによって処理されます。

BitsmistJSでは、通常の<style>タグを使用したスタイルのロードと適用もできますが、Constructable Stylesheetsを使って、よりコンポーネント化することが可能です。Shadow DOMの使用時には、必須の機能です。

ユニットは初期化中に“basic.transform”スペルを使い、beforeTransform・doTransform・afterTransformイベントをトリガーします。StylePerkはbeforeTransformで共通CSSをロード・適用するイベントハンドラをインストールし、doTransformでユニット専用CSSをロード・適用するイベントハンドラをインストールします。

設定でどのCSSをロード・適用するのかを指定することができます。その場合、自動的にConstructable Stylesheetsが使用されます。設定には、どうやってCSSをロードするか、どのCSSを適用するか等を記述します。CSSの設定には大きく分けると、複数のユニットから使用される共通CSSの設定と、ユニット固有のCSSの設定があります。

複数のユニットから使用される共通CSSに関する設定は、グローバル設定の“system.styles”セクションに記述します。StylePerkは自身の初期化時（各ユニットがロードされる前）に、共通CSSのロードを開始します。

BITSMIST.v1.Unit.use("setting.merge", {
    "system": {
        "style": {
            "options": {
                "apply": ["reset", "common", "site"],
            },
            "styles": {
                "reset": {
                    "type": "URL",
                    "URL": "/css/reset.css",
                },
                "common": {
                    "type": "URL",
                    "URL": "/css/common.css",
                }
            }
        }
    }
}

また共通CSSのロード完了後に、“apply”オプションで指定された共通CSSを、documentに対して適用します。

StylePerkの設定は“style”セクションに記述します。StylePerkに対する設定や、適用する共通CSSは“style.options”セクションに、各CSSに関する設定は“style.styles”セクション配下にCSS名をキーに記述します。キー名は後述のCSSの切り替え時に指定する名前となります。デフォルトのCSSに関する情報は“default”セクションに記述します。なお“default”セクションが存在しない場合は、デフォルトのファイルをロードします。

_getSettings()
{
    return {
        "style": {
            "options": {
                "styleRef": True,
                "apply": [ "common", "wrapper" ]
            },
            "styles": {
                "default": {
                    "type": "URL",
                    "rootNode": "/units/default.html"
                },
                "style2": {
                    "apply": ["common2"],
                    "type": "CSS",
                    "rootNode": "div {'background-color':'black'}"
                }
            }
        }
    }
}

“style.options.apply”に記述された共通CSSは、どのCSSを使用しても適用されます。“styles.<styleName>.apply”に記述された共通CSSは、そのCSSに切り替えた時のみ適用されます。

Shadow DOMを使わない場合、Construtable Stylesheetsを使わずに、従来の方法でスタイルを適用することもできます。Constructable Stylesheetsを使用したくない場合は、各ユニットの設定でデフォルトCSSを使わない設定にしておき、<style>タグなどで、スタイルをロードします。

グローバル設定に記述することで、全ユニットがCSSを使わないようにすることができます。

BITSMIST.v1.Unit.use("setting.merge", {
    "style": {
        "options": {
            "styleRef": false,
        },
    }
}

StylePerkはbeforeTransformとdoTransformイベントでCSSをロードし、適用します。

CSSのロード元としては、ファイル・固定のCSSの2種類からロードすることができます。何も設定を記述しない場合、デフォルトのパスとファイル名を使ってCSSファイルをロードします。

“system.style.options.path”と“style.options.path”を繋げたものが、デフォルトのパスとして使用されます。もし設定が存在しない場合はそれぞれ、“system.unit.options.path”と“unit.options.path”が代わりに使用されます。

また、タグ名に拡張子“css”をつけたファイル名を、デフォルトのファイル名として使用します。

もし、ロードするパスやファイル名を変更したい場合は、設定に記述します。

_getSettings()
{
    return {
        "style": {
            "options": {
                "path": "my-stylepath",
                "fileName": "my-stylefile",
            },
        }
    }
}

URLを使用したい場合は、skinRefオプションを使用します。

_getSettings()
{
    return {
        "style": {
            "options": {
                "styleRef": "https://example.com/my-stylepath/my-stylefile.html",
            },
        }
    }
}

または“styles.default”セクションに記述します。

_getSettings()
{
    return {
        "style": {
            "styles": {
                "default": {
                    "type": "URL",
                    "URL": "https://example.com/my-stylepath/my-stylefile.css",
                },
            }
        }
    }
}

もし、ユニットがCSSファイルを全く持たない場合、設定にそう記述する必要があります。

_getSettings()
{
    return {
        "style": {
            "options": {
                "styleRef": false,
            },
        }
    }
}

そうでないと、ユニットがデフォルトのCSSファイルをロードしようとして404エラーが発生し、初期化が中断してしまいます。

設定にCSSを記述することで、そのCSSをユニットに対し使用します。Webpackなどを使用すれば、CSSは外部ファイルに記述しておきながら、一つのファイルにまとめることも可能です。

_getSettings()
{
    return {
        "style": {
            "styles": {
                "default": {
                    "type": "CSS",
                    "CSS": "div {'background-color':'black'}"
                },
            }
        }
    }
}

ロードされた共通CSSはbeforeTransform、ユニット専用CSSはdoTransformイベントで適用されます。HTMLも同じdoTransformイベントで適用されますが、StylePerkの方が優先度が高いためCSSが先に適用されます。さらに、まだTemplateクローン状態であるノードに対して適用するため、FOUCが派生しません。

HTMLと同じく、“basic.transform”スペルを使用することで、複数のCSSを状況に応じて切り替えることができます。その際、初期化と同じようにCSSのロードと適用が行われます。スペルの引数には切り替え先のCSS名を指定します。

this.cast("basic.transform", {"styleName": "style2"});

CSSを切り替えて使用する場合、あらかじめ設定の“style.styles”セクションに、切り替え先のCSSの設定を記述しておく必要があります。

_getSettings()
{
    return {
        "style": {
            "styles": {
                "style2": {
                    "type": "CSS",
                    "HTML": "div {'background-color':'pink'}"
                },
            }
        }
    }
}