0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

yuicompressorでCSSアニメーションをMinifyするとインスペクションでエラーが出る話

Posted at

フロントエンドに求められる内容が多くなるにつれ長い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%などの小数点+単位での数値指定の場合も起こる問題のようです。根本的解決にはソースからビルドするしかない現状。
コントリビューター、早く来てくれ!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?