Zenn
🎨

Storybook で Vanilla-Extract の利用方法

2023/01/06に公開
React
Storybook
TypeScript
vanilla-extract
tech

Overview

オハコンバンニチハ、kiiiyoです。

Storybook で Vanilla-Extractでスタイリングしたコンポーネントを利用した際にレンダリングできないことがあり、対応した内容をご紹介します。

動作環境の構築

React(TypeScript)の動作確認

React(TypeScript)が実行できる環境を構築します。

npx create-react-app my-app --template typescript

インストール完了後、以下コマンドで立ち上げるか確認します。

npm run start

こちらの画面がたちあがればOKです。

Storybook(TypeScript)の動作確認

Storybook(TypeScript)が実行できる環境を構築します。

npx sb init

利用しているパッケージを読み込んで、Typescript用のStroybook環境を構築してくれます。
src ディレクトリ内に storiesディレクトリが生成されておりコンポーネント表示用の拡張子も.tsxとなっているが確認できます。

インストール完了後、以下コマンドで立ち上げるか確認します。

npm run stroybook

Storybookが表示されることが確認できました。

Vanilla-Extract をインストール

vanilla-extractを利用できるようにインストールします。

shell
npm install @vanilla-extract/css

インストールができたので、実際にコードにスタイリングしてみたいと思います。
Storybookを立ち上げ該当のPage.tsxが表示されている画面を確認します。

Pages in Storybook と表示されている文字の色を変更してみたいと思います。
Storybook用のファイルが格納されているディレクトリに以下スタイル用ファイルを作成します。

example.css.ts
# ./src/stories/example.css.ts

import { style } from '@vanilla-extract/css';

export const demo = style({
  color: 'red'
});

作成した example.css.ts を該当のコンポーネントにスタイル適用します。

Page.tsx
# ./src/stories/Page.tsx

import { Header } from './Header';
import './page.css';
+ import * as styles  from './example.css';

...

-         <h2>Pages in Storybook</h2>
+         <h2 className={styles.demo}>Pages in Storybook</h2>

理由としてVanilla-Extractで指定したコンポーネントが適切な Bundlerを利用してビルドされなかったことが原因になります。

Vanilla-Extract 側でいくつかプラグインとしてBundlerを提供してくれているのでそちらを利用します。

Bundler をインストール

Stroybookは、webpackを利用しているので、webpack-pluginを利用します。また各設定内容マージするためにwebpack-mergeも利用したいと思います。

npm install --save-dev @vanilla-extract/webpack-plugin webpack-merge

Stroybookの設定

VanillaExtractPluginを読み込んで、webpackFinalの箇所で設定内容マージする用に修正しました。

main.js
# .storybook/main.js

+ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
+ const { merge } = require('webpack-merge')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
+  },
+  webpackFinal: async (config) =>
+   merge(config, {
+    plugins: [new VanillaExtractPlugin()]
+  })
}

スタイル適用の確認

Storybookを立ち上げて確認してみます。

Page.tsxコンポーネントが表示され、テキストのスタイルが赤に変更されているのが確認できました。
これでStroybook側で、Vanilla-Extractを利用するのができました。

まとめ

Stroybookで、Vanilla-Extract利用するまでの流れをご紹介しました。
どなたかのお役にたてば幸いです😁🙌

Discussion