Bootstrap 4. CSS minification produces wrong results

Question

I have installed Bootstrap 4.0-alpha with Bower and now I have a dist directory with precompiled bootstrap.css and bootstrap.min.css. In development environment I try to use not compressed version, but minified version within deployment. I use Laravel Elixir to run my tasks. After compressing, some bootstrap styles has been changed. For example, h1 tag has got "margin-top: 0.67em" (it has happened, because "margin-top: 0px" has got lower priority). Of course, I can simply use precompressed file from dist directory which is complitely fine. But if it's an issue of my minifier, I am afraid that it will lead to the wrong results in further development.So my question is why it's happening?

Answer 1

The Bootstrap build chain uses grunt-contrib-css which uses clean-css (version 3.4.6)

In the Gruntfile.js the option noAdvanced: true had been set. As far as i do understande this is not an option for grunt-contrib-css neither clean-css. Instead advanced: false should be set:

cssmin: {
  options: {
    // TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
    //    and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
    compatibility: 'ie9',
    keepSpecialComments: '*',
    sourceMap: true,
    advanced: false
  },