Vanilla Extract

このドキュメントは、クラシックRemixコンパイラを使用する場合にのみ関連します。Remix Viteを使用している場合は、Vanilla Extract Viteプラグインを使用してVanilla Extractを統合できます。

Vanilla Extractは、TypeScript（またはJavaScript）でCSSを記述できる、ゼロランタイムのCSS-in-TypeScript（またはJavaScript）ライブラリです。スタイルは別の*.css.ts（または*.css.js）ファイルに記述され、その中のすべてのコードはユーザーのブラウザではなく、ビルドプロセス中に実行されます。CSSバンドルのサイズを最小限に抑えたい場合は、Vanilla ExtractはSprinklesと呼ばれる公式ライブラリも提供しており、これにより、カスタムのユーティリティクラスセットと、それらにランタイムでアクセスするための型安全な関数を定義できます。

組み込みのVanilla Extractサポートを使用するには、まずアプリケーションにCSSバンドルをセットアップする必要があります。

次に、Vanilla Extractのコアスタイリングパッケージを開発依存関係としてインストールします。

npm install -D @vanilla-extract/css

次に、.css.ts/.css.jsファイル名規約を使用して、Vanilla Extractをオプトインできます。たとえば、以下のようにします。

import { style } from "@vanilla-extract/css";
 
export const root = style({
  border: "solid 1px",
  background: "white",
  color: "#454545",
});

import * as styles from "./styles.css"; // ここでは`.ts`は省略されています
 
export const Button = React.forwardRef(
  ({ children, ...props }, ref) => {
    return (
      <button
        {...props}
        ref={ref}
        className={styles.root}
      />
    );
  }
);
Button.displayName = "Button";