Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

macaron-css から UnoCSS に書き換える #949

Open
3 tasks
cp-20 opened this issue Aug 13, 2024 · 0 comments · May be fixed by #951
Open
3 tasks

macaron-css から UnoCSS に書き換える #949

cp-20 opened this issue Aug 13, 2024 · 0 comments · May be fixed by #951
Assignees
@cp-20
Labels
area/dashboard Dashboard(UI)に関連するタスク kind/dev 開発に関するタスク

Comments

@cp-20
Copy link
Contributor

cp-20 commented Aug 13, 2024 •
edited
Loading

背景

macaron-css には次のようなメリットデメリットがある

  • pros
    • コンポーネントに対して variant を簡単に設定できる
    • 共通コンポーネントを書きやすい
  • cons
    • 全てのスタイルに対して命名する (コンポーネント化する) 必要がある
    • スタイルの記述箇所とjsx部分が離れていてわかりにくい/変更が面倒
    • 現状使っているヘッドレスコンポーネントライブラリ Kobalte との相性が悪い

置き換え先の UnoCSS はだいたいこの逆の性質を持っているが、デメリットがそこまで大きくないので採用した

やること

目的: maracon-css を消して UnoCSS に全部書き換える

  • UnoCSS をセットアップする
  • macaron-css で書かれている部分をスタイリングされた div に置き換える
    • 1度しか使われてないようなコンポーネントはインライン化してしまう
  • macaron-css を抜いて見た目が壊れていないことを確認する
@cp-20 cp-20 added area/dashboard Dashboard(UI)に関連するタスク kind/dev 開発に関するタスク labels Aug 13, 2024
@cp-20 cp-20 self-assigned this Aug 13, 2024
@cp-20 cp-20 linked a pull request Aug 18, 2024 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cp-20 cp-20

Labels
area/dashboard Dashboard(UI)に関連するタスク kind/dev 開発に関するタスク
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

macaraon-css を UnoCSS に置き換える traPtitech/NeoShowcase
1 participant
@cp-20