◆ Chrome 84 から replace 中の @import で throw されるように
◆ CSS Modules で ES Modules の仕組みで CSS をロードできるようになるのが原因みたい
  ◆ import したら CSSStyleSheet を取得
  ◆ CSS 内の @import の扱いも変わる

WebComponents で CSS を効率的に扱うときに使う CSSStyleSheet には replace と replaceSync メソッドがあります
replace の方は非同期で Promise を返します
また @import を使って CSS ファイルをロードすることができました

この機能が Chrome 84 で使えなくなるようです
https://chromestatus.com/feature/4735925877735424

deprecated は 82 からのようですが 82 をキャンセルして 83 を早期リリースみたいな話もあってので 83 から?

理由は replace と replaceSync が非対称で さらに CSS Modules で @import の扱いが変わる予定もあってこれもまた現在の replace と非対称だからだそうです

同期関数と非同期関数なので非同期処理の @import が非同期関数の方でだけ使えるのは別に非対称でもいいんじゃないのと思います
それより気になるのが CSS Modules で @import が変わるというところです

CSS Modules というとそれぞれの CSS ファイルがモジュールになるように クラス名に重複しない一意な文字を付けて 同じクラス名でも別モジュールだと別のクラス名になるように事前処理するものが思い浮かびます
JavaScript でその CSS ファイルをインポートすると自動でつけられたクラス名を取得できるので それを HTML に設定します
これは プリプロセスなので Webpack や Parcel を使う前提のものです
あくまでサードパーティツール内の話で ブラウザが扱う Web 標準とは別物です

他にも CSS Modules というのがあるのかなと調べてみるとこれのようです
https://github.com/w3c/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md

もともとはこれで Edge で提案されたもののようです
https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/CSSModules/v1Explainer.md


簡単に見たところ 標準でも ESModules の import で css ファイルを扱えるようにするみたいです
import は default で CSSStyleSheet を取得できるようです
そのまま document や Shadow Root の adoptedStyleSheets に設定できます

import styles from "styles.css"
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles]

これはかなり良さそうですね!