0から作るUXPin Merge + TypeScript + Storybookの環境 その2

これは何

CSS Modulesを使う準備

ライブラリのインストール

まずはこちらのコマンド。

1yarn add -D @types/css-modules storybook-css-modules-preset

https://www.npmjs.com/package/@types/css-modules

https://www.npmjs.com/package/storybook-css-modules-preset


@types/css-modulesの説明

TypeScript の環境でCSS Modulesを使うと、以下のようなエラーが出ます。

1Cannot find module './foo.module.css' or its corresponding type declarations.

これを解消するためにインストールしています。

中身は実質これだけなので、自分でd.tsをどこかに用意しても良いんですが……笑

1interface CSSModule {
2    /**
3     * Returns the specific selector from imported stylesheet as string.
4     */
5    [key: string]: string;
6}


Storybookの準備の続き

storybook-css-modules-presetをインストールしただけでは駄目なので、.storybook/main.jsを以下のように編集します。

01  module.exports = {
02    "stories": [
03      "../stories/**/*.stories.mdx",
04      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
05    ],
06    "addons": [
07      "@storybook/addon-links",
08-     "@storybook/addon-essentials"
09+     "@storybook/addon-essentials",
10+     "storybook-css-modules-preset"
11    ]
12  }

ライブラリを使わずmain.jsの中に以下のような記述をしても良いのですが、使う方が簡単なので今回は採用しています。

1webpackFinal: (config) => {
2  // webpackの設定
3}

https://storybook.js.org/docs/react/configure/webpack


UXPinの準備

uxpin.webpack.config.js を編集します。

01  {
02    test: /\.css$/,
03    use: [
04      {
05        loader: 'style-loader',
06      },
07      {
08        loader: 'css-loader',
09        options: {
10-         importLoaders: 2
11+         importLoaders: 2,
12+         modules: true
13        },
14      },
15    ],
16  },

css-loadermodules を true にするだけでOK。

CSS Modulesの適用

あとはひたすら同じ作業なので、Button.tsxを例にして説明します。

CSSのimportをCSS Modulesの作法にならって変更。

1- import './button.css';
2+ import styles from './button.module.css';

classNameが単なる文字列として指定されている箇所をCSS Modulesの作法にならって変更。

1- const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
2+ const mode = primary ? styles['storybook-button--primary'] : styles['storybook-button--secondary'];

ちなみに一般的には styles.foo の書式だと思いますが、今回のようにクラス名がケバブケースになっている場合は styles.['foo-bar'] とすることで回避可能です。

Typescript OK & NG
2021 12 08 15.15.56

そもそもハイフンで繋がなければ良いじゃん……というのはごもっともですが、ときには使えるテクニックかもしれません。

あとはひたすら同じ作業を繰り返していけば完成です!

ちなみに

前回の記事では uxpin.config.js からしれっと Page.tsx を抜いていました。

01module.exports = {
02  components: {
03    categories: [
04      {
05        name: 'General',
06        include: [
07          'stories/Button.tsx',
08          'stories/Header.tsx'
09          // StorybookのイニシャライズでPage.tsxも生成されているけど登録していない
10        ]
11      }
12    ],
13    webpackConfig: 'uxpin.webpack.config.js'
14  },
15  name: 'UXPin Merge + TypeScript + Storybook'
16}

じつは page.css の中では h2p などタグに対して直接スタイルを指定していたんですね。
そのためUXPinのGUIの画面のスタイルが崩れてしまいます。

その説明を前回の記事の時点でするのは話がややこしくなるな……と思って省略していました。

今回CSS Modulesを適用したので Page.tsx を登録しても問題なく動きます。

次回

今回はCSS Modulesを導入しましたが、筆者はCSS in JSの方が好みなため更に入れ替えます。使い慣れているのもあり、Emotionの導入を説明します。

この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。

この記事は、株式会社Incrementsの綿貫様にご執筆いただきました。元記事は、こちらから。

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you