Cocoon で CSS をカスタマイズしているときに、突然、ある行の CSS の修正が反映されなくなり、原因不明だったが、今日やっと原因が判明した。
CSS カスタマイズをしているときに、稀にインデントに使われる空白部分がおかしくなってしまうようだ。
問題が起きる文字列と問題が起きない文字列を比較してみたところ、問題が起きる方では、先頭部分に NBSP (C2A0) が含まれていた。
テキストを目視しただけでは、違いは全くわからない。
$ cat OK.txt
border-bottom: 1px dashed #ccc;
$ cat NG.txt
border-bottom: 1px dashed #ccc;hexdump してみると、NG.txt の方は c2 a0 とあり、NBSP が含まれている。
$ hexdump -C OK.txt
00000000 20 20 20 20 62 6f 72 64 65 72 2d 62 6f 74 74 6f | border-botto|
00000010 6d 3a 20 31 70 78 20 64 61 73 68 65 64 20 23 63 |m: 1px dashed #c|
00000020 63 63 3b 0a |cc;.|
00000024$ hexdump -C NG.txt
00000000 20 c2 a0 20 c2 a0 62 6f 72 64 65 72 2d 62 6f 74 | .. ..border-bot|
00000010 74 6f 6d 3a 20 31 70 78 20 64 61 73 68 65 64 20 |tom: 1px dashed |
00000020 23 63 63 63 3b 0a |#ccc;.|
00000026修正が反映されない問題が起きた場合は、一旦インデント部分の空白を削除して、対策をとることにした。
あとは、公開前に一度 Visual Studio Code にコピペして、自動整形したものを書き戻すと、良さそうだ。
キャッシュが原因だと考え、キャッシュをすべてクリアしたりしてみたが直らず、今日やっと原因に辿り着いた。
これは結構はまっている人はいるんじゃないかと・・
