Astro で Master CSS を設定する

共通の CSS エントリーで Astro サイトに Master CSS を接続します。インテグレーションは静的、ランタイム、プログレッシブ配信に対応し、ページのレンダリングは引き続き Astro が担います。

#インストール

1. #Master CSS を追加する

   既存の Astro プロジェクトのルートでインストーラーを実行します。既定の静的モードは、完全なクラス文字列を走査して通常の CSS を出力します。

   npm create @master/css@2.0.0 -- --framework astro --yes

2. #スタイルシートを接続する

   インストーラーは独立した CSS エントリーを作成します：

   src/styles/global.css

   @import '@master/css';

   ページまたはレイアウトの frontmatter からインポートします。共通レイアウトは、それを使うすべてのページにスタイルを配信します。astro.config.mjs では、プロジェクトの既存のインテグレーションとともに Master CSS を登録したままにしてください。

3. #Master CSS を使い始める

   開発サーバーを起動します。ページの frontmatter から src/styles/global.css をインポートし、段落を追加します。複数のページで必要なら、共通レイアウトに同じインポートを置いてください。

src/pages/index.astro

---import '../styles/global.css'---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Hello Master CSS</title>  </head>  <body>    <p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">      Hello World    </p>  </body></html>

ニュートラルなサーフェス、細い枠線、小さな角丸、各辺に 1rem の内側余白を持つ例です。

#設定を確認する

npm run dev を実行し、p-md を p-lg に変えて、パディングが 1rem から 1.5rem に増えるか確認します。元に戻してから、本番のページをテストします：

npm run buildnpm run preview

JavaScript を無効にして再読み込みします。段落のパディング、角丸、浮き上がった面が保たれるはずです。スタイルがない場合は、ページまたはレイアウトが global.css をインポートし、Astro の設定に Master CSS インテグレーションが含まれるか確認します。独自の定義やスコープ付きスタイルはグローバルスタイルを参照してください。

#CLI で静的 CSS をビルドする

Astro インテグレーションの代替として使います。ほかのインテグレーションは残して astro.config.mjs から Master CSS の登録を削除し、ページやレイアウトの global.css インポートも削除します。CLI をインストールします：

npm install -D @master/css-cli@2.0.0

プロジェクトのルートにソースエントリーを作成します。プロジェクトの定義もここに置いてください：

@import '@master/css';

ページまたは共通レイアウトの <head> から、生成したスタイルシートにリンクします：

<link rel="stylesheet" href="/master.css" />

Astro をビルドする前に CSS を生成します：

npx @master/css-cli generate "src/**/*.{astro,html,js,jsx,ts,tsx,vue,svelte}" --output public/master.cssnpm run buildnpm run preview

開発中は生成コマンドに --watch を加え、別のターミナルで npm run dev を実行します。Astro は public/ をビルド出力へコピーするため、生成したスタイルシートと付随するインポートを一緒にデプロイしてください。ベースパスが設定されたサイトでは、そのパスをスタイルシート URL の先頭に付けます。JavaScript を無効にして段落を確認してください。

#別のレンダリングモードを選ぶ

既定は静的モードです。ほかのモードではインテグレーションがページにランタイムスクリプトを挿入するため、別途ブラウザーの起動コードは不要です：

npm create @master/css@2.0.0 -- --framework astro --mode runtime --yes

document.querySelector('#master-check').classList.add('underline')

npm create @master/css@2.0.0 -- --framework astro --mode progressive --yes