Strange Compile Issue - Githubissues

Getting a very strange issue, when compiling the critical output. For some reason it's nesting selectors inside selectors, with normal CSS.

This is part of the source CSS that gets fed into Critical:

.icon {
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon--pencil::before {
  content: "\e600";
}

.icon--lock::before {
  content: "\e601";
}

.icon--external-arrow::before {
  content: "\e602";
}

.icon--location::before {
  content: "\e603";
}

.icon--spinner::before {
  content: "\e604";
}

.icon--search::before {
  content: "\e605";
}

.icon--cancel-circle::before {
  content: "\e606";
}

.icon--checkmark::before {
  content: "\e607";
}

.icon--arrow-left::before {
  content: "\e608";
}

.icon--map::before {
  content: "\e609";
}

.icon--calendar::before {
  content: "\e60b";
}

.icon--users::before {
  content: "\e60c";
}

.icon--minus::before {
  content: "\e60d";
}

.icon--plus::before {
  content: "\e60e";
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

The icon classes are not part of the critical path, but are getting included for some reason. The keyframe syntax is required (it's used later for a loading spinner), so I'm not sure if maybe it's getting confused by that, and for some reason pulling in a load of preceding classes, but breaking them...

Anyway, here is what Critical outputs. Note the search, checkmark, calendar and minus classes.


.icon--pencil::before {
  content: "\e600";
}

.icon--lock::before {
  content: "\e601";
}

.icon--external-arrow::before {
  content: "\e602";
}

.icon--location::before {
  content: "\e603";
}

.icon--spinner::before {
  content: "\e604";
}

.icon--search::before {

.icon--checkmark::before {

.icon--map::before {
  content: "\e609";
}

.icon--calendar::before {

.icon--minus::before {

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 62.5rem;
}

.container comes from later in the source CSS, and is correct, but obviously, because of those unclosed classes, the CSS is invalid, so none of the CSS after them gets parsed (which is most of the critical path stuff), until the full CSS file loads later and everything starts working.

I'm pretty lost on this one. Any help appreciated!

filamentgroup / grunt-criticalcss

Strange Compile Issue #13