Angular で Master CSS を設定する

Angular のビルダーを保持し、Master CSS CLI で読み込み可能なスタイルシートを生成します。開発中は両方の監視プロセスを動かしてください。Master CSS が生成 CSS を更新し、Angular がそれをインポートするアプリを配信します。

この設定は、グローバルな src/styles.css、動作する npm start コマンド、対応する Node.js 24 がある、既存のブラウザーレンダリングの Angular アプリを前提とします。Angular の既定のエミュレートされたカプセル化を使い、グローバルスタイルがコンポーネントのテンプレートに届くようにします。Shadow DOM コンポーネントでは、自身のシャドウルート内にスタイルが必要です。

#インストール

1. #Master CSS を追加する

   Angular プロジェクトのルートでインストーラーを実行します：

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

   静的モードの設定では @master/css と @master/css-cli が追加されます。インストーラーの任意のツールやプレビューのオプションは、インストールを参照してください。

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

   インストーラーはプロジェクトのルートに Master CSS のソースエントリーを作成します：

   master.css

   @import '@master/css';

   既存の内容を保持したまま、Angular のグローバルスタイルシートに次のインポートも追加します：

   src/styles.css

   @import './master.generated.css';

   angular.json のアプリの build.options.styles 配列に src/styles.css を残してください。生成した CSS がページに届くかは、Angular のグローバルスタイル設定で決まります。標準と異なるワークスペース構成では、出力パスとインポートを合わせて調整します。

   @theme や @utility などの Master CSS の定義は master.css に置きます。Angular が使うのは生成後のネイティブ CSS で、通常の CSS ビルダーはこれらの定義をコンパイルしません。src/master.generated.css を編集したり、master.css に逆にインポートしたりしないでください。

3. #CSS を生成する

   一つのターミナルでスタイルシートを生成し、変更の監視を続けます：

   npx master-css generate --output src/master.generated.css --watch

   最初の生成が終わるのを待ってから、別のターミナルで Angular を起動します：

   npm start

   両方のプロセスを動かしたままにします。Angular の監視だけでは、クラスを追加しても Master CSS は再生成されません。

4. #Master CSS を使い始める

   ルートコンポーネントが参照するテンプレートに次のマークアップを追加します。Angular の現在の命名規則では通常 src/app/app.html ですが、既存のプロジェクトでは src/app/app.component.html の場合もあります。

   <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 Angular</p>

   生成された CSS

   @layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-weight-regular: 400;    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-md: 1rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .p-md {    padding: var(--spacing-md)  }  .w-fit {    width: fit-content  }}

   段落には中立色の面、細い境界線、小さな角丸、四辺に 1rem のパディングが付きます。

#結果を確認する

Angular アプリを開きます。段落の間隔と面が例と一致するはずです。テンプレートの p-md を p-lg に変えてください。両方の監視プロセスが動いていれば、パディングが 1rem から 1.5rem に増えます。更新を確認してから元に戻します。

スタイルが付かない場合は、順に接続を確認してください：

• Master CSS のターミナルで生成エラーを確認し、src/master.generated.css が存在することを確かめます。
• src/styles.css のインポートと、angular.json での同ファイルの登録を確認します。
• ブラウザーの開発者ツールで段落を調べ、一致するルールと、それを上書きするコンポーネントスタイルがないか確認します。

静的生成には、ソース内の完全なクラス文字列、または明示的なセーフリストが必要です。条件付きのクラス名も完全な形で記述し、動的な値には CSS カスタムプロパティを使ってください。生成出力にクラスがない場合は、クラス名の走査を参照します。

#デプロイ用にビルドする

Angular がアプリをパッケージする前に CSS を生成します：

npx master-css generate --output src/master.generated.cssnpm run build

CI でも同じ順序にします。古い生成ファイルの配信はスタイルの欠落を隠す場合があるため、新しく生成してから本番ビルドを確認してください。

静的とは CSS の生成段階を指します。ブラウザーでレンダリングする Angular アプリが HTML を作るには、引き続き JavaScript が必要です。

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

既定は静的レンダリングです。既知のソース文字列ではなく、ブラウザーの DOM 変更からクラスを生成する必要がある場合は、ランタイムレンダリングを使ってください。

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

@import '@master/css/base.css';

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