CSSはサーバーにあるのに、ブラウザに届かない

キャッシュプラグインの多くに、「未使用CSSの削除」という機能があります。オンにするとページをスキャンし、どの要素にも使われていないセレクタをまとめて削って、軽くしたスタイルシートをブラウザに送ります。

たいていはありがたい機能です。問題は、判定が静的に行われることです。

読み取れない3つの書き方

1つ目は、ページビルダーの管理画面で付けたクラスです。編集画面の「追加クラス」欄に入れた名前は、テンプレートの中に出どころが見つからないので、使われていないと判断されます。

2つ目は、:root にだけ宣言したデザイントークンです。先に変数を定義しておいて、あとで使うつもりのもの。いまはまだどこからも参照されていないので、スキャナーから見ればデッドコードです。

3つ目は、スクリプトが実行時に付けるクラスです。スキャンはその前に終わっています。

手元にある証拠が、どれも問題ないと言っていました。

サーバー上のファイルには、その宣言があります。結合後のファイルを検索しても見つかります。開発者ツールでも、ファイルは正常に読み込まれ、ステータスコードは200です。

本当のことを返してくれたのは getComputedStyle() だけでした。ブラウザが最終的に使った値を教えてくれます。それまでの2回がすべてグリーンだったのは、「サーバー上のファイルに書いてある」ことを証拠にしていたからです。いまは検収のたびにこれで確かめています。

削除されてしまう種類の宣言は、プラグインからインラインスタイルで出力するように変えました。インラインスタイルは削除の処理を通りません。

WordPressでは、スタイルシート同士に依存関係を設定して、AをBの後に読み込ませることができます。以前は、依存関係さえ設定しておけば大丈夫だと思っていました。保証されるのは順番で、読み込まれること自体ではありませんでした。