2023」の第17日目です。Xのテンプレートのテストについて検討してみた」に書いたような研究調査活動もよくやっています。今日はフロントエンド寄りの話を書きたいと思います。Webサイトリニューアル時に「HTMLImporterプラグイン」を利用して現在公開しているページをCMSに取り込む、という作業はよくあります。その際、現在公開しているページのコンテンツ部分をどう扱うかはいろいろパターンがあるかと思いますが、「現在公開しているページのCSSをそのまま適用する」とした場合に移行するCSSファイルの内容に苦しめられることがあります。要素セレクタを利用してスタイルが定義されている場合です。「これmain要素内に新たに掲載することになったコンポーネントにもスタイルが当たってしまうじゃん...」と。CSSファイルが少なければ手で編集して対応することもできるのですが、HTMLImporterプラグインを利用するケースではたいていページ数がかなりあり、かつページ単位でCSSファイルを用意しているケースもあるので、変更しなければならないCSSファイル数もかなりの数になることがあります。(なお、これは実話です。)「これはどうしたものか...」と悩んだのですが、実際にしなければならないことは「移行するCSSファイルで定義されているスタイルの適用範囲をエディタの部分に限定すること」しかありません。そこでひらめいたのが「PostCSSを利用してCSSセレクタにクラス名(.p-migrateContent)を足そう」ということです。「Autoprefixer」のようなプラグインがあるからきっと何とかなるはず、と考えました。できあがったPostCSSのプラグインがこの後掲載するコードです。mainだけのセレクタの場合、mainを.p-migrateContentに置き変えるmainから始まるセレクタの場合、mainの後ろに.p-migrateContentを足す要素セレクタの頭に.p-migrateContentを足すheader・aside・footerに対する定義は削除するといった処理をしています。要素セレクタのみに.p-migrateContentを足すと意図しない詳細度(Specificity)になって崩れる可能性を避けるために、IDを含まないセレクタには全て.p-migrateContentを足してみました。postcss.config.jsを実行することで動作します。]}処理前後のCSSファイルの差分を表示すると以下のようになります。複数ファイルをまとめて処理するには、recursive-readdir-syncを利用してファイルを読み込みPostCSSプラグインを実行していきます。サンプルコードを示します。(もしかするとChatGPTに書いてもらったかも。Plugin」が参考になりました。この記事がHTMLImporterプラグインを利用したページ移行作業時のヒントになれば幸いです。Styles」の実装が進めば今回のような作業(エディタ部分のスタイル適用)はかなり楽になると思います。