title: Express-minify cannot load file CSS file. Removing part of it will make it work
body: <p>I've installed the <code>express-minify</code> middleware but for some reason it seems to cause an error whilst loading the attached css file.</p>
  
  <p>I have tried validating the CSS with an online service and it doesn't give me any error.</p>
  
  <p>I have tried to debug by removing all elements leaving one at the time and when I hit <code>.mainmenu tr td:hover:not(.mainmenu_item_selected)</code> it fails.</p>
  
  <p>So removing everything from <code>.mainmenu tr td:hover:not(.mainmenu_item_selected)</code> to the end of the file will make it work (Obviously without all the other required styles).</p>
  
  <p>I have even tried to recreate the file and also name it differently without any success.</p>
  
  <p>The express logs are showing me: <code>GET /stylesheets/gctl.css 200 4.954 ms - -</code> meaning that the file should be served correctly.</p>
  
  <p>Its a standard installation as per npm website:</p>
  
  <pre><code>var minify = require('express-minify');
  app.use(minify());
  </code></pre>
  
  <p><strong>File (saved as gctl.css)</strong></p>
  
  <p>In main page (Using PUG): <code>link(rel='stylesheet' href='/stylesheets/gctl.css')</code></p>
  
  <p><strong>CSS file:</strong></p>
  
  <pre><code>html, body, * {
      font-family: 'Raleway', sans-serif;
      margin: 0;
  }
  
  .centered {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }
  
  .loginform {
      text-align:center;
      vertical-align:middle; 
      width: 30%;
      height: 50%;
  }
  
  .closenewitem {
      cursor: pointer;
  }
  
  /* Tooltip overide settings */
  div.tooltip-inner {
      max-width: 500px;
  }
  
  /* Remove outlines such as in chrome */
  input:focus {
      outline: 0;
  }
  
  /* all input text align center*/
  input, textarea, label {
      text-align: center;
      cursor: pointer;
      font-weight: 400;
  }
  
  /* Labels for help add help class to them */
  label.help:hover {
      color: red;
  }
  
  /* Logo CSS */
  .logo {
      position: absolute;
      cursor: pointer;
      top: 4px;
      height: 40px; 
  }
  
  /* menu css */
  .mainmenu {
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: lightgray;
      margin-left: -15px;
      height: 100%;
      width: 100%;
  }
  
  .mainmenu tr td {
      padding: 10px;
  }
  
  .mainmenu tr td:hover:not(.mainmenu_item_selected) {
      border-right-color: red;
      border-right-style: solid;
      border-right-width: 3px;
      color: black;
      cursor: pointer;
      background-color: #f0f0f0; /*#f9eafc*/
  }
  
  /* Selected menu item */
  .mainmenu_item_selected {
      border-right-color: black;
      border-right-style: solid;
      border-right-width: 3px;
      background-color: lightgray; /*#f7faff*/
      font-weight: 700;
      color: black;
  }
  
  .mainmenu tr td span {
      padding-left: 2px;
  }
  
  /* Footer div for additions to DB*/
  .footer {
      overflow: scroll;
      position: absolute;
      bottom:  0px;
      height: auto;
      min-height: 50%;
      padding-bottom: 20px;
      background-color: #f6f6f6;
      border-top-color: lightgray;
      border-top-style: solid;
      border-top-width: 1px;
      width: 100%;
  }
  
  .fixed-button {
      position: absolute;
      top: 4px;
      right: 4px;
  }
  
  /* Error handling CSS */
  .customerror {
      border-color: red;
      border-width: 2px;
      background-color: #ffcccf;
      font-weight: bold;
  }
  
  /* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
  .dsk-panel:hover {
      -webkit-box-shadow: -1px 5px 15px 0px lightgray;
      -moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
      box-shadow: -1px 5px 15px 0px lightgray;
  }
  
  .desktop-icon {
      width: 60px;
      opacity: 0.6;
  }
  </code></pre>
  
  <p>I'm stuck and have no clue on what is causing the problem!</p>