0から作るUXPin Merge + TypeScript + Storybookの環境 その2
これは何
- この記事は、綿貫様にご執筆いただきました。
- この記事はこちらの記事の続きとなり、UXPin Mergeを TypeScript とともに導入するための記事です。
- 前回はStorybookのイニシャライズで自動生成されたコードをそのまま使っていましたが、今回はそれらをCSS Modules化します
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-loader の modules を 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'] とすることで回避可能です。
そもそもハイフンで繋がなければ良いじゃん……というのはごもっともですが、ときには使えるテクニックかもしれません。
あとはひたすら同じ作業を繰り返していけば完成です！
ちなみに
前回の記事では 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 の中では h2 や p などタグに対して直接スタイルを指定していたんですね。
そのためUXPinのGUIの画面のスタイルが崩れてしまいます。
その説明を前回の記事の時点でするのは話がややこしくなるな……と思って省略していました。
今回CSS Modulesを適用したので Page.tsx を登録しても問題なく動きます。
次回
今回はCSS Modulesを導入しましたが、筆者はCSS in JSの方が好みなため更に入れ替えます。使い慣れているのもあり、Emotionの導入を説明します。
この記事からUXPinに興味をお持ちいただけた方は、 14日間の無料トライアルにサインアップして、今日からより是非ご利用を開始してみてください。また、UXPin Mergeをご希望の方は、こちらよりデモをご予約ください。
この記事は、株式会社Incrementsの綿貫様にご執筆いただきました。元記事は、こちらから。
