npm: heroicons, postcss-import, framer-motion のアップデート メモ (Breaking Changes)

1. heroicons v1 → v2

Release v2.0.0 · tailwindlabs/heroicons

• アイコンの変更。v1 と v2 は異なるアイコンと見なし、好みの方を使えば良いとある
• スタイルが２つ(Outline, Solid) から３つ(+ Mini)に増えた
  • Before: import { ... } from '@heroicons/react/solid'
  • After: import { ... } from '@heroicons/react/24/solid' or import { ... } from '@heroicons/react/20/solid'
  • Before: import { ... } from '@heroicons/react/outline'
  • After: import { ... } from '@heroicons/react/24/outline'
• アイコン名の変更 → 上の URL の一覧を参照

---

2. postcss-import v1 → v2

fix import with layer by romainmenke · Pull Request #496 · postcss/postcss-import

Before

@import url('foo.css') layer(A) (min-width: 320px)

After

@media (min-width: 320px) {
  @layer A {
    /* imported styles */
  }
}

---

3. framer-motion v6 → v7

Upgrade guides | Framer for Developers

• react@18 対応
• Framer Motion は、手動変更しなくても大丈夫っぽい
• Framer Motion 3D ユーザーは、React Three Fiber を ^8.2.2 にアップグレードする必要あり