title: How to optimize redundant selectors with gulp-cssnano (or else)
body: <p>[<code>gulp-minify-css</code> says quite cleary, that is has been deprecated in favor of <a href="https://github.com/ben-eb/gulp-cssnano" rel="nofollow">gulp-cssnano</a>.]</p>
  
  <p>I am quite happy with thi css minification of cssnano, except for two things..</p>
  
  <ul>
  <li>identical selectors with no interference otherwise do not get merged, i.e. <code>body, html</code> or <code>h1, h2, h3</code>  in the sample below</li>
  <li>identical media query-‘brackets’ are not joined into one big query bracket, i.e. <code>@media only screen and (max-width:500px)</code></li>
  <li>even certain overrulings even on the very same selectors and precedence are not pruned (i.e. color:orange over green for <code>h1,h2,h3</code>)</li>
  </ul>
  
  <p><strong>Any advice, how to achieve this optimisation with <a href="http://cssnano.co" rel="nofollow">cssnano.co</a> ?</strong> (or another minification gulp task to chain into)</p>
  
  <pre><code>body,html{
    margin:0;
    padding:0;
  }
  h1,h2,h3{
    color:green;
    background-color:#caa;
  }
  @media only screen and (max-width:500px){
    p{
      background-color:orange;
    }
  }
  @media only screen and (max-width:500px){
    div,p{
      background-color:purple;}
  }
  body,html{
    margin:0;
    padding:0;
    background-color:#aac;
  }
  h1,h2,h3{
    font-weight:700;
    color:orange;
    text-decoration:underline;
  }
  html{
    background:orange;
  }
  
  h1,h2,h3{
    font-weight:700;
  }
  p{
    text-decoration:none;
    color:#eee;
  }
  </code></pre>
  
  <p>(This example is coming from three rather trivial files, merged together. core:false to keep whitespace. Turning it on removes whitespace, but does not fix the mentioned issues. )</p>