CSS モジュール スクリプトを使用してスタイルシートをインポートする

CSS モジュール スクリプトを使用して、JavaScript モジュールと同じ構文で CSS スタイルシートをインポートする方法について学びます。

Dan Clark

新しい CSS モジュール スクリプト機能を使用すると、JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込むことができます。作成可能なスタイルシートと同様に、スタイルシートをドキュメントまたはシャドウルートに適用できます。これは、CSS をインポートして適用する他の方法よりも便利でパフォーマンスが高い場合があります。

対応ブラウザ

CSS モジュール スクリプトは、バージョン 93 の Chrome と Edge でデフォルトで使用できます。

Firefox と Safari でのサポートはまだ利用できません。実装の進捗状況は、Gecko のバグと WebKit のバグで確認できます。

前提条件

CSS モジュール スクリプトを使用する

CSS モジュール スクリプトをインポートして、次のようにドキュメントまたはシャドウルートに適用します。

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

CSS モジュール スクリプトのデフォルト エクスポートは、インポートされたファイルの内容を含むコンストラクタブル スタイルシートです。他のコンストラクタブル スタイルシートと同様に、adoptedStyleSheets を使用してドキュメントまたはシャドウルートに適用されます。

JavaScript から CSS を適用する他の方法とは異なり、<style> 要素を作成したり、CSS テキストの JavaScript 文字列を操作したりする必要はありません。

CSS モジュールには、JavaScript モジュールと同じメリットもあります。

  • 重複除去: 同じ CSS ファイルがアプリケーション内の複数の場所からインポートされた場合でも、フェッチ、インスタンス化、解析は 1 回のみ行われます。
  • 評価の順序の一貫性: インポートする JavaScript が実行されている場合、インポートするスタイルシートがすでに取得され、解析されていることを前提とできます。
  • セキュリティ: モジュールは CORS で取得され、厳密な MIME タイプ チェックが使用されます。

インポート アサーション（「assert」の意味）

import ステートメントの assert { type: 'css' } 部分は、インポート アサーションです。これは必須です。指定しないと、import は通常の JavaScript モジュールのインポートとして扱われ、インポートされたファイルの MIME タイプが JavaScript 以外の場合、失敗します。

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

動的にインポートされたスタイルシート

動的インポートを使用して、type: 'css' インポート アサーションの新しい 2 番目のパラメータで CSS モジュールをインポートすることもできます。

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

@import ルールはまだ許可されていません

現在、CSS @import ルールは、CSS モジュール スクリプトなどのコンストラクタブル スタイルシートでは機能しません。コンストラクタブル スタイルシートに @import ルールが存在する場合、それらのルールは無視されます。

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

CSS モジュール スクリプトでの @import のサポートが仕様に追加される可能性があります。この仕様に関するディスカッションの進捗状況は、GitHub の問題で確認できます。