Zenn
🎃

Vite × React × StyleXを使ってみた

2025/02/19に公開
React
UI
Vite
stylex
tech

こんにちは！普段フロントエンド開発をしているまるです🙌
今回はタイトルにもあるようにVite × React × StyleXを「使ってみてどうだったか」や「導入方法」などがお伝えできればなと思っています！
※ViteとReactの導入や使い方がわかっている前提でお話しします。

そもそもStyleXとは

Meta社のプロダクトで利用されているCSS-in-JSです。
動的にスタイルを生成してくれたり、コンポーネントベースのスタイルの管理などの特徴があります。
StyleXについての書き方などの詳しい内容はドキュメントを読んでください。

https://stylexjs.com/docs/learn/

StyleXの導入

今回はTypescript、Reactを使用するViteのセットアップが終わっている前提です。

①StyleXのインストール

npm install --save @stylejs/stylex

②vite-plugin-stylexのインストール

npm install --save-dev vite-plugin-stylex
# or
yarn add --dev vite-plugin-stylex
# or
pnpm add --save-dev vite-plugin-stylex

②StyleXのstylesを入れる
main.tsxにimportするcssファイルに追記します。

index.css
@stylex stylesheet;

...自分で作成したスタイル

③configにプラグイン追加

vite.config.ts
...
import stylex from 'vite-plugin-stylex';

export default defineConfig({
    plugins:[react(),stylex()]
})

これでStyleXのセットアップは完了です！

Viteのpluginについて

導入時に出てきた「vite-plugin-stylex」ですが、現在(2025/2/19)はViteのv6に対応していません。
Pull-requestsは出ているのであとは承認されれば…という段階みたいです。早くしてほしいですね。
さらにこのプラグインはリポジトリのREAD.mdにも書いてありましたが、開発段階のようです。
私がちょこっと使った限りでは特に問題はありませんでしたが、予期せぬ事故があるかもしれません。

StyleXのドキュメントにはもう一つViteのプラグインがあるのですが、すでに読み取り専用となっており、非公式となっています。

余談1　Storybookを追加してみた

Vite × React × StyleX × Storybookにしてみました。
追加でやったことといえば.storybook/main.tsにimportするglobal.cssにViteと同じようにstylesを追加しただけです。

global.css
@stylex stylesheet;
...自分で作成したスタイル

これでStyleXを使った表示がされる(はず)です。

余談2 classNameとstyleに分けてみた

あるコンポーネントで親コンポーネントからclassNameやstyleを引数として渡したかったのでStyleXのスタイルを分けてみました。

import {testStyles} from './Test.style';
import cx from 'clsx';
function Test(style:React.CSSModules){
    const styles = stylex.props(
      testStyles.root,
      disabled && testStyles.disabled,
      { ...style }
    );
    return (
        <div 
            style={{...styles.style}}
            className={cx(styles.className,className)}
        >   
            Test
        </div>
    )
}

思った通りの動きをしたのでこれでもできるはず…

使ってみて

Vite × React × StyleXを採用するのはpluginがViteの最新バージョンに対応していないことなどでまだ使うには早かったかなという印象でした。

pluginが更新されて使えるようになれば一からstyleを作りたい時にはとても便利だと思います。

皆さんも気になったらNext.jsなどのpluginもあるので使ってみてくださいね！

Discussion