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

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

ダン・クラーク
Dan Clark
X GitHub

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

対応ブラウザ

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

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 モジュールのインポートとして扱われ、インポートされたファイルに JavaScript 以外の MIME タイプがある場合は失敗します。

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 の問題で追跡します。