This repository has been archived by the owner on Feb 27, 2024. It is now read-only.
共通CSSの作成とFooterの置き換えを実施 #272
Merged
+1,083
−114
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
keitakn
commented
May 25, 2023
| @@ -7,6 +7,7 @@ const config: StorybookConfig = { | |||
| '@storybook/addon-essentials', | |||
| '@storybook/addon-interactions', | |||
| '@storybook/addon-a11y', | |||
| 'storybook-css-modules', | |||
There was a problem hiding this comment.
.storybook/preview.ts で src/styles/globals.css をimport出来なかったのでこれを追加。
去年の6月から更新がないのが若干不安だが公式ブログで紹介されているのとwebpackの設定を追加するよりは良いと思ったので追加した。
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issueURL
#271
Done の定義
スクリーンショット or Storybook の URL
https://62729802bbcc7d004a663d4c-vullagndfw.chromatic.com/?path=/story/components-footer--view-in-japanese
変更点概要
src/styles/mixins.tsと同様のCSSを定義したsrc/styles/globals.cssを作成。その上でsrc/components/Footer/Footer.tsxをCSS Modulesを使った形に置き換え。https://www.chromatic.com/build?appId=62729802bbcc7d004a663d4c&number=638 でデザイン崩れが発生していない（ビジュアルリグレッションテストに差分がない）のでデザインの置き換えには成功している。
ちなみに
typed-css-modulesというpackageを使ってCSS Modulesの型定義を生成している。npm run generate:css-typesとする事で全てのCSSの型定義を生成する。一応生成した型定義はFormatterをかけてコミットしてあるが万が一コミット忘れがあった場合に備え、CIでBuild前に
npm run generate:css-typesを実行するようにしている。これで万が一存在しないクラス名にアクセスしてしまっている場合でもCIの失敗により気がつく事が出来る。
今のままだと
src/styles/globals.cssをpackage利用者がimportしないといけないようになっている。CSS Modulesの変数などを利用すれば回避出来るかもだが、設定の調査に時間がかかりそうだったので一旦はこの形で進める。
レビュアーに重点的にチェックして欲しい点
現時点で方向性に問題がないか意見が欲しい:pray:
補足情報
インラインコメントに記載。
以下に補足情報をまとめてある。
https://zenn.dev/link/comments/adf8a9f8a2159f