プロジェクトの依存ライブラリをアップデートする苦行をやっているのですが、その最中で遭遇し解決した事象の話をば。
PostCSSを使っているのですが、その中で postcss-custom-media をv8からv10に上げた時にそれは起きました。
まず、以下のようなPostCSS設定ファイルがあり、
これがv8 -> v9でのbreaking changesにて importFrom が削除されたので、修正する必要がありました。
これについては、以下の内容を参考に postcss-global-data を使う形で解決しました。
各ComponentにCSSファイルが配置されていて、そこで @custom-media を利用しているのですが、 postcss-global-data を使って別途作成した media-queries.css を読み込ませて解決。
しかしここでふと気付いたわけです。「tsと共有している 100px をどうしよう・・・」と。
tsからはこのような形で呼び出していたのです。困った・・・
この問題を解決するためにいろいろ試しました。
最初に postcss-css-variables を使って media-queries.css に設定している @custom-media で指定しているピクセル数をcss variablesに置き換えていけるかな？と思ったらmedia queryでcss variablesが使えないことでダメでした。（知らなかった・・・）
次に、 postcss-extract で atrule として custom-media を抜き出してexportしたものをts側で利用しようとしたけどなんかダメだった。
どういう風にダメだったかというと atrule[name="custom-media"] といった形式で抜き出そうとしたものの、取得結果を見ると空となってしまいどうしてもここを解決することができませんでした🤔
で、最後に試したのが postcss-design-tokens で、これが見事に刺さりました。これを使ってCSS内でデザイントークンを利用すればcss variablesではないのでいけないか？と思い、使ってみた経緯です。
利用例としては以下のような感じ。
これで具合が良かったのはts側からは design-tokens.json を読み込むだけでOKなのでめっちゃ楽ってとこでしたね。で、 @custom-media も @media で使う際にcss variablesで怒れることがなく、万事解決しました！
まとめ
蓋を開けてみればPlugin知ってるか知らないかの話だったんですが、PostCSSのPlugin多すぎ問題があるのでなかなか難しいところではあります。
あとはmedia queryでcss variables使えないのは純粋に知らなかったので、これは大反省です・・・
この記事見かけてなかったら一生彷徨ってたかもしれないので感謝🙏
