css圧縮時にエラーになる書き方

ウェブサイトのファイルサイズを少しでも小さくするために、cssやjsを圧縮するようにしています。

僕はエディターにBrackets を使っていて、cssやjsの圧縮はそのプラグインで自動的に行うようにしています。

それで圧縮された際に、うまく変換されずおかしな動きになる場合があったのでここにまとめておきます。

アニメーション @keyframe の 0%

@keyframes animation {
  0% {
    処理
  }
  100% {
    処理
  }
}

上記のような書き方をすると、0% と書いたところが 0 だけになってしまい、変な動きになってしまいました。

margin: 0%; とかは margin: 0 という風に % が不要なので、圧縮のフォーマットで % は削除する、というふうになっているのでしょう。

解決策としては

@keyframes animation {
  0.00% {
    処理
  }
  100% {
    処理
  }
}

0% としたいところを 0.00% としてあげるとうまくいきました。
0.0% でもなぜかダメだったので、0.00% としてあげるといいでしょう。

calc 内の足し算

calc(50vh + 10px);

こちらも圧縮すると無効になってしまいます。

+ の前後にスペースがないと無効になるようで、Bracketsプラグインで圧縮するとスペースが削除されてしまい、無効になっていました。

解決策としては

calc(50vh - -10px);

マイナスの値をマイナスすることで足し算にするというやり方です。
引き算はスペースなしでも大丈夫なようです。
なんでなんでしょう？