SvelteKit で Master CSS を設定する

SvelteKit アプリに Master CSS を追加します。アドオンが Vite インテグレーションを登録し、ルートレイアウトから CSS エントリーをインポートするため、すべてのルートに共通のスタイルが届きます。

#インストール

1. #Master CSS を追加する

   既存の SvelteKit プロジェクトのルートで、Svelte CLI アドオンを実行します。静的レンダリングを設定し、既存のサーバーフックは変更しません。

   npx sv add @master/css-svelte-addon

2. #共通のエントリーを確認する

   アドオンはプロジェクトの CSS エントリーに @import '@master/css'; を追加し、src/routes/+layout.svelte からインポートします。レイアウト内の既存のスクリプト、子要素のレンダリング、ほかのインポートを保持してください。ほかのルートが読み込まないページに、グローバルなエントリーを置かないでください。

   vite.config.ts では masterCSS() と sveltekit(...) の両方を保持します。静的モードに Master CSS のクライアントフックやサーバーフックは不要です。

3. #Master CSS を使い始める

   開発サーバーを起動し、src/routes/+page.svelte を次の段落に置き換えます。src/routes/+layout.svelte に追加されたスタイルシートのインポートは保持してください。

src/routes/+page.svelte

<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>

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

#静的モードの設定を確認する

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

npm run buildnpm run preview

サーバーレンダリングが有効なら、JavaScript を無効にしても段落のパディング、角丸、浮き上がった面が保たれるはずです。別のルートでも、ルートレイアウトからエントリーが読み込まれるか確認してください。スタイルがない場合は、vite.config.ts の Master CSS プラグインと、ルートレイアウトの CSS インポートを確認します。

コンポーネントの <style> ブロックでは、ネイティブの宣言でプロジェクトのトークンを使えます。リセット、ネイティブのコンポーネントルール、生成されたユーティリティのために、グローバル CSS エントリーは読み込んだままにしてください。プロジェクトのコンテキスト外にある定義ファイルには @reference を使います。

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

既定の静的モードでは、Master CSS のフックは不要です。モードを変えても CSS エントリーを保持してください：

masterCSS({ mode: 'runtime' })

/// <reference types="@master/css/client" />import 'virtual:master-css-runtime'

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

export { handle } from '@master/css-svelte/hooks.server'

import { sequence } from '@sveltejs/kit/hooks'import { handle as masterCSS } from '@master/css-svelte/hooks.server'import { handle as application } from './hooks.application'export const handle = sequence(masterCSS, application)

/// <reference types="@master/css/client" />import manifest from 'virtual:master-css-manifest'import emittedGlobals from 'virtual:master-css-emitted-globals'import { createMasterCSSHandle } from '@master/css-svelte/hooks.server'export const handle = createMasterCSSHandle({  manifest,  emittedGlobals,  hydrationManifest: false})