Vanilla Extract

本文档仅在使用 Classic 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 is a zero-runtime CSS-in-TypeScript (or JavaScript) library that lets you use TypeScript as your CSS preprocessor. Styles are written in separate *.css.ts (or *.css.js) files and all code within them is executed during the build process rather than in your user's browser. If you want to keep your CSS bundle size to a minimum, Vanilla Extract also provides an official library called Sprinkles that lets you define a custom set of utility classes and a type-safe function for accessing them at runtime.

要使用内置的 Vanilla Extract 支持，首先确保你已在应用中设置了 CSS 打包。

¥To use the built-in Vanilla Extract support, first ensure you've set up CSS bundling in your application.

然后，将 Vanilla Extract 的核心样式包安装为开发依赖。

¥Then, install Vanilla Extract's core styling package as a dev dependency.

npm install -D @vanilla-extract/css

然后，你可以通过 .css.ts/.css.js 文件名约定选择使用 Vanilla Extract。例如：

¥You can then opt into Vanilla Extract via the .css.ts/.css.js file name convention. For example:

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