cssminでCSSが崩れたときの対処法

背景

しばらくいじっていなかったcssを更新する機会があったので、
grunt-contrib-cssminをnpm installしてcssをminifyすると一部のCSSが壊れスタイルが崩れた。
clean-cssのアップデートでおかしくなったっぽい。
最新版のclean cssでは複数プロパティをまとめて最適化しようとする様子。

.btn {
  text-indent: -15px;
  font-size: 16px;
  line-height: 44px;
  background: url(/img/site_images/btn-login-big.png) 190px 3px/32px 32px no-repeat #ee753e;
  border-color: #ee753e;
}

こんな風に壊れてしまったので、grunt-contrib-cssmin最適化のオプションをオフに。

cssmin: {
  options: {
    noAdvanced: true
  }
}

直った

.btn {
  text-indent: -15px;
  font-size: 16px;
  line-height: 44px;
  background: #ee753e url(/img/site_images/btn-login-big.png) no-repeat 190px 3px;
  background-size: 32px 32px;
  border-color: #ee753e;
}

予防策

npm shrinkwrapという機能で依存モジュールのバージョンを全て保存し固定できる。
頻繁に更新することが無ければこれで制限しておくのがよい。
（ただし、shrinkwrapも一部バグがあるのでご利用は慎重に。）

https://docs.npmjs.com/cli/shrinkwrap
http://blog.koba04.com/post/2014/03/03/npm-and-bower-semantic-version/