Webpack・Rspack・Rsbuild で Master CSS を設定する

Webpack、Rspack、Rsbuild のアプリに Master CSS を組み込みます。三つとも @master/css-webpack を使い、CSS エントリーが定義を供給し、プラグインがユーティリティルールを生成し、HTML プラグインが出力をページにリンクします。エントリーと HTML テンプレートがある、動作するアプリから始めてください。

#インストール

1. #Master CSS を追加する

   既存の Webpack、Rspack、Rsbuild プロジェクトのルートで、--framework webpack、rspack、rsbuild のいずれかを指定してインストーラーを実行します。既定の静的モードは、プラグインを登録して src/index.css を作成します。

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

2. #CSS エントリーをインポートする

   インストーラーは @import '@master/css'; を含む src/index.css を作成します。既存のマウントコードを保持し、アプリの JavaScript または TypeScript エントリーからインポートしてください。ユーティリティを必要とするすべてのページで読み込まれるよう、グローバルエントリーを使います。

   src/index.js

   import './index.css'

3. #HTML テンプレートを検出対象に加える

   段落を独立した index.html テンプレートに置く場合は、@source で検出対象に加えます。パスは src/index.css からの相対パスです。HTML プラグインが別のテンプレートを使う場合は調整してください。コンポーネント内のクラスはモジュールの依存関係から検出されます。

   src/index.css

   @import '@master/css';@source '../index.html';

4. #Master CSS を使い始める

   HTML テンプレートまたはフレームワークのコンポーネントに段落を置き、開発サーバーを起動します。独立したテンプレートを編集したら、開発サーバーの再ビルドが完了してからページを再読み込みします。

index.html

<!doctype html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Master CSS with Webpack</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 の内側余白を持つ例です。

#バンドラーの設定

インストーラーが書き込むのは、Master CSS に関する設定です。フレームワークのプラグイン、エントリー、HTML 生成を保持して既存の設定に統合し、プラグインは一度だけ登録してください。

#Webpack

生成したスタイルシートの配信には、ネイティブの CSS 処理と HtmlWebpackPlugin が必要です：

import HtmlWebpackPlugin from 'html-webpack-plugin'import MasterCSSPlugin from '@master/css-webpack'export default {  entry: './src/index.js',  experiments: { css: true },  module: {    rules: [{ test: /\.css$/i, type: 'css/auto' }]  },  plugins: [    new HtmlWebpackPlugin({ template: './index.html' }),    new MasterCSSPlugin({ mode: 'static' })  ]}

#Rspack

Rspack は、同じ Webpack 互換プラグインを組み込みの CSS サポートと HtmlRspackPlugin とともに使います：

import { HtmlRspackPlugin } from '@rspack/core'import MasterCSSPlugin from '@master/css-webpack'export default {  entry: './src/index.js',  module: {    rules: [      {        test: /\.css$/i,        type: 'css/auto'      }    ]  },  plugins: [    new HtmlRspackPlugin({ template: './index.html' }),    new MasterCSSPlugin({ mode: 'static' })  ]}

#Rsbuild

Rsbuild は tools.rspack フックでプラグインを登録します。フレームワークのプラグインとアプリをマウントするエントリーは保持してください。このフックは Master CSS の処理だけを追加します。

import { defineConfig } from '@rsbuild/core'import MasterCSSPlugin from '@master/css-webpack'export default defineConfig({  tools: {    rspack(config) {      config.plugins ||= []      config.plugins.push(new MasterCSSPlugin({ mode: 'static' }))      return config    }  }})

React のスターターでは、src/App.tsx に段落を置きます：

export default function App() {  return (    <p id="master-check" className="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>  )}

#設定を確認する

まず開発サーバーの実行中に、ソースの p-md を p-lg に変えます。段落のパディングが 1rem から 1.5rem に増えるはずです。確認後、元に戻します。

使うバンドラーに対応するコマンドでビルドします：

出力ディレクトリーを HTTP サーバーで配信します。段落に 1rem のパディング、浮き上がった面、角丸があるはずです。静的モードのユーティリティはリンクした CSS から供給され、Master CSS ランタイムは使いません。JavaScript を無効にしても HTML テンプレートの内容にはスタイルが残りますが、クライアントレンダリングのフレームワークは内容の作成に JavaScript が必要です。

HTML プラグインは、スタイルシートのリンクと必要なランタイムスクリプトを出力します。開発サーバーの静的ディレクトリーから直接配信したファイルには、それらは追加されません。CSS のリクエストがない場合は、まず HTML 生成を確認します。読み込まれてもユーティリティがない場合は、CSS エントリー、ネイティブ CSS 処理、プラグインの登録を確認してください。

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

既定は静的モードです。プラグインの mode オプションで別の配信方法を選び、HTML プラグインがそのランタイムスクリプトを組み込みます：

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

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