Vanilla Extract

此文件僅在使用傳統 Remix 編譯器時才相關。如果您正在使用 Remix Vite，則可以使用 Vanilla Extract Vite 插件整合 Vanilla Extract。

Vanilla Extract 是一個零執行階段的 CSS-in-TypeScript（或 JavaScript）函式庫，可讓您將 TypeScript 用作 CSS 預處理器。樣式寫在個別的 *.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"; // Note that `.ts` is omitted here

export const Button = React.forwardRef(
  ({ children, ...props }, ref) => {
    return (
      <button
        {...props}
        ref={ref}
        className={styles.root}
      />
    );
  }
);
Button.displayName = "Button";