Post Image

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

By tomotaka@xenon.io on 7th 12月, 2021

これは何

CSS Modulesを使う準備

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

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

yarn 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を使うと、以下のようなエラーが出ます。

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

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

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

interface CSSModule {
    /**
     * Returns the specific selector from imported stylesheet as string.
     */
    [key: string]: string;
}


Storybookの準備の続き

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

  module.exports = {
    "stories": [
      "../stories/**/*.stories.mdx",
      "../stories/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
      "@storybook/addon-links",
-     "@storybook/addon-essentials"
+     "@storybook/addon-essentials",
+     "storybook-css-modules-preset"
    ]
  }

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

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

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


UXPinの準備

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

  {
    test: /\.css$/,
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
-         importLoaders: 2
+         importLoaders: 2,
+         modules: true
        },
      },
    ],
  },

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

CSS Modulesの適用

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

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

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

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

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

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

2021 12 08 15.15.56
2021 12 08 15.15.56

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

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

ちなみに

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

module.exports = {
  components: {
    categories: [
      {
        name: 'General',
        include: [
          'stories/Button.tsx',
          'stories/Header.tsx'
          // StorybookのイニシャライズでPage.tsxも生成されているけど登録していない
        ]
      }
    ],
    webpackConfig: 'uxpin.webpack.config.js'
  },
  name: 'UXPin Merge + TypeScript + Storybook'
}

じつは 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