Re-renovate Autoprefixer (included in Nuxt.js)

[mcdmaster]

👏 解決する issue / Resolved Issues

• close [Suggestion] Autoprefixer@10 への対応方針 #5432

📝 関連する issue / Related Issues

• Update dependency autoprefixer to v10 #5431

⛏ 変更内容 / Details of Changes

nuxt@2.14.5 以降への変更対応

• Autoprefixer の nuxt バンドルに伴い、本プロジェクトでの独自 load & config をやめる
• 併せて nuxt.config.ts を修正
• これの結果、Autoprefixer のバージョンコントロール漏れによる互換性リスクの軽減が期待される

[参考資料等]

• https://github.com/postcss/autoprefixer
• https://nuxtjs.org/api/configuration-build/#postcss

Note: Nuxt.js has applied PostCSS Preset Env. By default it enables Stage 2 features and Autoprefixer, you can use build.postcss.preset to configure it.

• (追記) https://qiita.com/shohei_ot/items/5fbc7641fa2ebae9c911
  ※ビルドチェックで、メモリ不足を訴えるエラーへの対処に苦労させられました。
  エラーの内容、および実施したワークアラウンドは、上記記事と同じです。ご参考にしてください

📸 スクリーンショット / Screenshots

・バンドルされる Autoprefixer のバージョンは 9.8.6 だそうです。これなら互換性やバージョンのリスクは、Autoprefixer@10 をイキナリ展開するのよりも軽減されますね

・nuxt-ts generate でなく nuxt generate でイケるよ、みたいなことを言われています。
やってみましたけれども（ yarn generate:dev ）、ダメでした。
よってここは変更しません

・こちらは yarn dev-no-axe の起動画面

[kaizumaki]

@mcdmaster すみません、プレビューを見ましたが、cssがうまくあたっていないようです。本来グレーの文字色のところが緑になっていました。さらに同じセレクタが大量に吐き出されているようです。

以下はWindows10 Chrome最新版でみたものです。IE11でも同様でした。

[mcdmaster]

実は、そこいらあたりが私もよくわかっていない、そしてよく見落とす部分でもあります。ほとんど、画面の中央なのにです。

たとえば、nuxt.config.ts の 67 行目近辺、あるいは旧 109 行目あたりは、tsconfig.json で定義する表現を使わず AS-IS で置いておくのが正しいのでしょうか。
このあたりのお作法（？）、もしくはそれへのリファレンスをご存じでしたら、ぜひご教示をお願いいたします。もちろん、私も探してみます

[mcdmaster]

@kaizumaki
どうやら、@nuxtjs/style-resources というライブラリを途中で入れたときに、そやつが悪さをしていたようです。
取り除いたところ、正常動作を見ました。（スクショをご覧ください）

@nuxtjs/style-resources は、けっこういろんなところで言及されています。
でも、実績がそこそこあるからと言っても、たとえば Nuxt との親和性はどうかとか、いろいろ考える余地はありますね。
今後は、注意深くあることとします

[kaizumaki]

@mcdmaster プレビュー見ました。よくなりましたね！概ねいい感じなのですが、ひとつ「テーブルを表示」のアコーディオンの挙動が気になっています（アコーディオンを閉じるとき、テーブル部分が上方向に飛び上がっているように見える）。このPRを私の手元にfetchしてみましたが、いまいち原因がわかりません。
試しに最新のdevelopmentを取り込んでみてもらえますか？ 🙏
それと yarn lint --fix をしてコミットしておいてもらえると助かります。

以下、ちょっとわかりにくいですがiPhoneのキャプチャ動画です。

[mcdmaster]

@kaizumaki いろいろありがとうございます。
コミット時の lint --fix については、フックを入れるとよさげです。
それまでは、手動でやらせていただきましょう。

それはさておき。
テーブルを閉じる際に跳ね上がるように見える現象は、あいにく私のところでは未だ確認できていません。
デスクトップ PC で見た限りなので、モバイル・エミュレータやなんかを使って遠からず確認を試みます。

あと、このテーブル開閉時の違和感については、あるいは eslint --fix のフックをもしもコミット・プロセスに入れる場合についても、それらは別個の新規イシューにした方がいいかと思います。
テーブル跳ね上がり現象を放置したまま本 PR をリリースするのは、たしかに問題ありです。
ただ、私の今回の作業がテーブル開閉 UI に何か影響があるかと言えば、私の方では答を持ち合わせていません。もっと言うなら、今回の作業がそうした方面に影響を及ぼすとさえ私は端から思っていません。

とはいえ、「何か」が変わったのはどうやら事実なので、別途時間を掛けて調査＆対応することを提案します

[mcdmaster]

@kaizumaki
やはり PC（デスクトップ）環境だと、すくなくとも私のところでは、おっしゃるような現象の再現性が乏しいようです。「テーブルを表示」のオン／オフを切り替えても、動画で示していただいたような思いがけない画面のズレは見られません。
差し支えなければ、新イシューを起票していただくのは可能でしょうか？

仮にその現象がモバイル限定だったとしても、ユーザの利用形態を想定すれば看過できないことは承知しています。
私のところで現象を確認できれば、ほかならぬ私が前のコメントで提案したように新イシューをポストできるのですけど、それも叶いません。

あ、コミット時の lint hooks の件は、こちらも新イシュー（改善案）としてポストしておきます

[kaizumaki]

@mcdmaster いろいろ検証いただいてありがとうございます 🙇‍♀️
https://dev-covid19-tokyo.netlify.app/ と https://deploy-preview-5443--dev-covid19-tokyo.netlify.app/ を比較してみたところ、後者は以下のcssが追加されていました。

.expand-transition-enter-active,.expand-transition-leave-active {
    transition: .3s cubic-bezier(.25,.8,.5,1)!important
}

.expand-transition-move {
    transition: transform .6s
}

.expand-x-transition-enter-active,.expand-x-transition-leave-active {
    transition: .3s cubic-bezier(.25,.8,.5,1)!important
}

.expand-x-transition-move {
    transition: transform .6s
}

以上はVuetifyのcssのようです。
nuxtのVuetifyのリポジトリでは「production modeでアニメーションが効かない」というissue（ nuxt-community/vuetify-module#233 ）が立っています。つまり現状の対策サイトの挙動のほうがバグだった、というわけです。ちなみにVuetifyの本家では !important をつけるという方法で対応していますね（ vuetifyjs/vuetify@d23ca5d ）。まさしくそれが上記のcssです。

私も現状のほうがバグだったと知って、さてどうしようか迷っています 😅 ちょっと考えさせてください。 @mcdmaster さんも何かアイディアあれば 🙏

[kaizumaki]

@mcdmaster いろいろ考えまして、Vuetifyの v-expansion-panels のcssにカード側を合わせる方向でいこうと思いました。
components/cards/CardRow.vue を以下のように修正していただいていいでしょうか 🙏
https://github.com/kaizumaki/covid19/pull/1/files#diff-2aba96bb30062e2621e1ba95268b4623
方針としては、カードのheight制御をmax-heightに変更し、transitionを加えるというものです。
あまりスマートではありませんが、私が確認している見た目の不具合は解消されると思います。

[kaizumaki]

ご対応ありがとうございます。LGTM!