これはなに？

Nested CSS Minifier

シチュエーションはかなり限定的ですが、最近のブラウザはSassではなくCSSをネストして記述しても解釈してくれるようになりました。

.hoge{
  .fuga{
    color:#000;
  }
}

ただし、ネスト書式に未対応のブラウザやコードを圧縮したいといった場合に、自分が普段使いしているminifyツール（VS Codeの拡張機能含む）で実行すると、書式が崩れたりしてうまくminifyできないことがありました。

勿論、どうせminifyさせるならSassで書けよとか、あるいは初めからネスト形式で書くなとか突っ込みどころはあるのですが。。。

そのため、ネストされたフォーマットを一度フラット化し、そのうえで改めてminify、その際にCSS内に背景画像にsvgでhttps://などが入る場合もコメントアウトだと誤検知しないように正しく置き換えるように調整させるなど、いくつかの条件を与えてClaude codeでポン出ししてツールを用意しました。

中身はHTMLとJSのみで動作しており、ソースコードの変換をブラウザ上で実行するだけのものとなりますので、よかったら使ってみてみてください。

それにしてもこの精度のものがプロンプトのみで数分で出力できるの、さすがにやばいですね。

実際のプロジェクトで使うにはその後のメンテ等、コードへの理解がないといけないのでコードが書けなくてもいいなんてことにはならないけど、文字を書かなくなることで漢字を忘れてしまう、みたいな感じで頻度が下がると関数を忘れたりといった弊害が出そう。