title: Why is css-nano (almost) not working?
body: <p><code>gulp-minify-css</code> <a href="https://www.npmjs.com/package/gulp-minify-css" rel="nofollow noreferrer">says its deprecated</a>, and points to <a href="https://github.com/ben-eb/gulp-cssnano" rel="nofollow noreferrer">gulp-css-nano</a> as its successor.</p>
  
  <p><strong>How come, I reach so much weaker results with cssnano?</strong></p>
  
  <p>I do the minifything (and beautify afterwards for readability):</p>
  
  <pre class="lang-js prettyprint-override"><code>gulp.task('teststyles-nano', [], function () {
      gulp.src('css/testcase.css')
      .pipe( nano() )
      .pipe( cssbeautify() )
      .pipe( rename('nano.css' ))
      .pipe( gulp.dest('./public/') );
  });
  
  gulp.task('teststyles-minify', [], function () {
      gulp.src('css/testcase.css')
      .pipe( minifyCss() )   // resp.  .pipe(minifyCss())
      .pipe( cssbeautify() )
      .pipe( rename('minify.css') )  // resp.  'minify.css'
      .pipe( gulp.dest('./public/') );
  });
  </code></pre>
  
  <p>Here's my <strong>testcase.css</strong>, with plenty of intentional stuff to optimize:</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
      margin: 0;
      padding: 0;
  }
  
  h1, h2, h3 {
      color: green;
      color: purple;  /* redundant in place */
      background-color: #caa;
  }
  html, body {  /* combine to above, remove duplicates? */
      margin: 0;   
      background-color: #aac;
  }
  
  /* group media queries,
     remove redundant rules and/or combine p, div */
  @media only screen and (max-width: 500px) {
      p { background-color: orange; }
  }
  @media only screen and (max-width: 500px) {
      p { background-color: purple; }
      div { background-color: purple; }
  }
  
  h1, h2, h3, h1, h2 { /* combine to above, remove double selectors */
      font-family: 'Helvetica Neue', Helvetica, Arial, Arial, Arial, sans-serif;
      font-weight: bold;
      color: orange;
      text-decoration: underline;
  
      margin-top: 10px;  /* screams combining */
      margin-right: 20px;
      margin-bottom: 10px;
      margin-left: 20px;
  }
  </code></pre>
  
  <p><code>minify.css</code> has pretty much all expected, where <code>nano.css</code> simply does not:</p>
  
  <p><a href="https://i.stack.imgur.com/doIbv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/doIbv.png" alt="side-by-side comparision"></a></p>
  
  <p>I am under Windows7, x64. Versions:</p>
  
  <pre><code>npm list --depth=0 | grep -i css
  ├── css-purge@1.1.1 extraneous
  ├── gulp-css-purge@1.0.27
  ├── gulp-cssbeautify@0.1.3
  ├── gulp-cssnano@2.1.1
  ├── gulp-minify-css@1.2.3
  </code></pre>
  
  <p>Thus I am pretty clueless, on such an isolated case.</p>