试一试Vite + StyleX

这篇文章的概要

Meta 社开发的 CSS in JS 库 StyleX 正式发布。

据报道，虽然在2021年已经提及了，但它似乎于2023年12月5日（当地时间）正式对公众开放。

由于我经常使用Vite，所以我想试试Vite和StyleX的组合。

Vite 准备就绪

首先，进行创建。

bun create-vite 

我选择了React、TypeScript和SWC。

StyleX 的准备工作

首先按照官方文件中所述的进行。

bun i @stylexjs/stylex

接下来，由于 Vite 使用了 Rollup，所以我尝试安装 @stylexjs/rollup-plugin 并运行，但是失败了。

这个问题正在讨论中，并且似乎正在创建 Pull Request，所以很快可能会得到官方支持。然而，截止到2023年12月11日，它还无法正常运行。

然而，经过调查发现有个人制作了插件，我非常感激地使用了它。

bun i -d vite-plugin-stylex

  import { defineConfig } from "vite";
  import react from "@vitejs/plugin-react-swc";
+ import styleX from "vite-plugin-stylex";

  export default defineConfig({
-   plugins: [react()],
+   plugins: [react(), styleX()],
  });

准备工作已经完成了。以下是依赖关系和版本的列表。

{
  // 省略
  "dependencies": {
    "@stylexjs/stylex": "^0.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vite-plugin-stylex": "^0.1.0"
  }
}

基本的写作方式 de

导入 stylex

import * as stylex from "@stylexjs/stylex";

使用 stylex.create() 来生成样式

const styles = stylex.create({
  foo: {
    color: 'red',
    fontSize: '2em'
  },
  bar: {
    backgroundColor: 'blue',
  },
});

可以使用 stylex.props() 进行处理。

{/* 個別に適用 */}
<div {...styles.props(styles.foo)}>foo</div>
<div {...styles.props(styles.bar)}>bar</div>

{/* あわせて適用 */}
<div {...styles.props(styles.foo, styles.bar)}>foo bar</div>

写作一般的风格

我們來對使用create-vite生成的App.tsx加入樣式。

  import { useState } from "react";
  import reactLogo from "./assets/react.svg";
  import viteLogo from "/vite.svg";
  import "./App.css";
+ import * as stylex from "@stylexjs/stylex";

+ const styles = stylex.create({
+   title: {
+     color: "#55c500",
+   },
+ });

  function App() {
    const [count, setCount] = useState(0);

    return (
      <>
        {/* 省略 */}
        <h1 {...stylex.props(styles.title)}>Vite + React</h1>
        {/* 省略 */}
      </>
    );
  }

  export default App;

虽然只是改变了颜色，但运行得很顺利。

以下是生成的代码。

<h1 class="App__styles.title x1g81dyc">Vite + React</h1>

.x1g81dyc {
    color: rgb(85, 197, 0);
}

我試著增加一點風格。

  const styles = stylex.create({
    title: {
      color: "#55c500",
+     fontSize: "5rem",
+     marginBlock: 0,
    },
  });

每个属性都似乎添加了一个类，生成的代码也有所变化。

<h1 class="App__styles.title x1g81dyc xn7rfii x10im51j">Vite + React</h1>

.x10im51j {
    margin-block: 0px;
}

.xn7rfii {
    font-size: 5rem;
}

.x1g81dyc {
    color: rgb(85, 197, 0);
}

在我之前提供的博客链接中，提到了“原子级类名”的设计。这种设计与Tailwind CSS的方法类似。

根据国家要求的风格进行写作

或许不需要特别介绍，但根据状态改变风格似乎也没有问题。

  const styles = stylex.create({
    title: {
      color: "#55c500",
      fontSize: "5rem",
      marginBlock: 0,
    },
+   button: {
+     backgroundColor: "#ddd",
+   },
+   active: {
+     backgroundColor: "#212121",
+     color: "white",
+   }
  });

{/* 中略 */}

  <button
    onClick={() => setCount((count) => count + 1)}
+   {...stylex.props(count > 0 ? styles.active : styles.button)}
  >
    count is {count}
  </button>

正在按照计划发生变化。

最後

因为版本尚不到1.0，所以害怕在正式应用中使用，但如果Meta发布的话，应该与React兼容良好，我也这样认为。

期望着并将继续观看。