フロントエンドに求められる内容が多くなるにつれ長いCSSにならざるを得ない昨今、皆様いかがお過ごしでしょうか。CSSのみで出来ることが多くなった反面CSSファイルが数千行になることも珍しくなくなってきていますが、その際に活躍してくれるyuicompressor。Macで人気があるらしいCodeKitなんかもCSS/JS圧縮エンジンにはyuicompressorが使用されているそうです。
/* 圧縮前 */
.some-class {
width: 100px;
color:#333;
}
.other-class {
width: 100px;
color:#aaa;
}
/* 圧縮後 */
.some-class{width:100px;color:#333}.other-class{width:100px;color:#aaa}
このように可読性の高いメンテナンスしやすいCSSファイルから、スペース・改行や不要なセミコロンなどを取り除いて容量を減らしてくれるスグレモノです。(導入記事は他の方へお任せします)
0rem、0%などの不要な単位も取り除き文字数を減らすことで圧縮をしてくれるのですが、
CSSでキーフレームアニメーションを使用するときにちょっとだけ不便が。
@keyframes custom-ease-in {
0% {
margin-left: 100vw;
opacity: 0;
}
1% {
margin-left: 10vw;
opacity: 0;
}
100% {
margin-left: 12vw;
opacity: 1;
}
}
よくあるイーズインの処理ですね。これをyuicompressorで圧縮すると・・・
@keyframes custom-ease-in {0{margin-left: 100vw;opacity: 0}1%{margin-left: 10vw;opacity:0}100%{margin-left: 12vw;opacity:1}}
問題なくCSSとして動作してくれるのですが、コードインスペクションで0
がエラー表示になります。(少なくともPHPStormではなる。)git commit
する度に出てくる「エラーあるけど確認しとく?」的なダイアログが作業意欲をマッハで削ぎます。
この問題はGitHubの公式レポジトリでも何年も前から度々話題に登っており既にコードは修正されているのですが、コントリビューターが修正バイナリを配布していないため実質未解決になっています。自前でJavaをコンパイルしてもいいですが、0%
をfrom
へ置き換えることでエラー回避できます。
@keyframes custom-ease-in {
from {
margin-left: 100vw;
opacity: 0;
.....
これで気持ちよくコミットできますね!
ちなみにこの問題は10.0%
などの小数点+単位での数値指定の場合も起こる問題のようです。根本的解決にはソースからビルドするしかない現状。
コントリビューター、早く来てくれ!