NaNpx values when using REM units

[dotnetCarpenter]

node_modules/.bin/cssnext -V: 1.8.4

I haven't been able to create a reduced test case to show this, so I'm dumping my entire css file here. Sorry for the lengthy post.
Running cssnext with the following command:
node_modules/.bin/cssnext example/**/*.src.css example/css/all.min.css

Note that node_modules/.bin/cssnext --no-rem example/**/*.src.css example/css/all.min.css obviously doesn't produce any NaN values.

On:

:root {
  --color-red: hsla(360, 100%, 35%, 1);
  --color-blue: hsla(215, 100%, 34%, 1);
  --animation-parameters: 1.3s ease-in-out 3s;
}

@font-face {
    font-family: 'nisesegaregular';
    src: url('../font/nisesega-webfont.eot');
    src: url('../font/nisesega-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/nisesega-webfont.woff2') format('woff2'),
         url('../font/nisesega-webfont.woff') format('woff'),
         url('../font/nisesega-webfont.ttf') format('truetype'),
         url('../font/nisesega-webfont.svg#nisesegaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@keyframes fadein {
  to {
      color: var(--color-red);
  }
}

@keyframes openleft {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-85deg);
  }
}
@keyframes removeblur {
  to { filter: blur(0); }
}

h1, h2, h3, h4, p {
  font-family: 'nisesegaregular';
  font-weight: normal;
}

html {
  font-size: 0.625vw;
}

body {
  overflow: hidden;
}
.dg-glass-container {
  position: absolute;
  z-index: -100;
  top: -1%;
  left: -1%;
  height: 102%;
  width: 102%;
  /*transform: translate(-1%, -1%);*/

  /*clip: rect(99% 99% 1% 1%);*/
  /*clip-path: polygon(100% 100%);*/

  filter: blur(0.3rem);
  will-change: filter;
  animation: removeblur var(--animation-parameters);
  animation-fill-mode: forwards;

  border: 2px solid red;
}
.dg-glass {
  height: 100%;
  width: 100%;

  background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../image/city-road-people-street.jpg');
}

.dg-content-container {
  position: absolute;
  width: 100%;
  perspective: 210rem;
}
.dg-content {
  transform-origin: 0 center;
  will-change: transform;
  animation: openleft var(--animation-parameters);
  animation-fill-mode: forwards;
}

h1 {
  color: var(--color-blue);
  font-size: 24rem;
  text-align: center;
  text-transform: uppercase;

  animation-duration: 1s;
  animation-name: fadein;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}

.byline {
  color: var(--color-blue);

  font-size: 6rem;
  text-align: center;
  text-transform: uppercase;

  animation-duration: 1s;
  animation-name: fadein;
  animation-fill-mode: forwards;
  animation-delay: 1s
}
.byline::first-line {
  font-size: 3rem;
  line-height: 6rem;
}
.byline a {
  color: inherit;
  text-decoration: none;
}

Produces:

@font-face {
    font-family: 'nisesegaregular';
    src: url('../font/nisesega-webfont.eot');
    src: url('../font/nisesega-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/nisesega-webfont.woff2') format('woff2'),
         url('../font/nisesega-webfont.woff') format('woff'),
         url('../font/nisesega-webfont.ttf') format('truetype'),
         url('../font/nisesega-webfont.svg#nisesegaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@-webkit-keyframes fadein {
  to {
      color: hsla(360, 100%, 35%, 1);
  }
}

@keyframes fadein {
  to {
      color: hsla(360, 100%, 35%, 1);
  }
}

@-webkit-keyframes openleft {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-85deg);
            transform: rotateY(-85deg);
  }
}

@keyframes openleft {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-85deg);
            transform: rotateY(-85deg);
  }
}
@-webkit-keyframes removeblur {
  to { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter'); -webkit-filter: blur(0); filter: blur(0); }
}
@keyframes removeblur {
  to { filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="0" /></filter></svg>#filter'); -webkit-filter: blur(0); filter: blur(0); }
}

h1, h2, h3, h4, p {
  font-family: 'nisesegaregular';
  font-weight: normal;
}

html {
  font-size: 0.625vw;
}

body {
  overflow: hidden;
}
.dg-glass-container {
  position: absolute;
  z-index: -100;
  top: -1%;
  left: -1%;
  height: 102%;
  width: 102%;
  /*transform: translate(-1%, -1%);*/

  /*clip: rect(99% 99% 1% 1%);*/
  /*clip-path: polygon(100% 100%);*/

  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4.8" /></filter></svg>#filter');

  -webkit-filter: blur(NaNpx);

          filter: blur(NaNpx);
  -webkit-filter: blur(0.3rem);
          filter: blur(0.3rem);
  will-change: filter;
  -webkit-animation: removeblur 1.3s ease-in-out 3s;
          animation: removeblur 1.3s ease-in-out 3s;
  -webkit-animation: removeblur 1.3s ease-in-out 3s;
          animation: removeblur 1.3s ease-in-out 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;

  border: 2px solid red;
}
.dg-glass {
  height: 100%;
  width: 100%;

  background-color: white;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../image/city-road-people-street.jpg');
}

.dg-content-container {
  position: absolute;
  width: 100%;
  -webkit-perspective: 210rem;
          perspective: 210rem;
}
.dg-content {
  -webkit-transform-origin: 0 center;
      -ms-transform-origin: 0 center;
          transform-origin: 0 center;
  will-change: transform;
  -webkit-animation: openleft 1.3s ease-in-out 3s;
          animation: openleft 1.3s ease-in-out 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

h1 {
  color: hsla(215, 100%, 34%, 1);
  font-size: NaNpx;
  font-size: 24rem;
  text-align: center;
  text-transform: uppercase;

  -webkit-animation-duration: 1s;

          animation-duration: 1s;
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.byline {
  color: hsla(215, 100%, 34%, 1);

  font-size: NaNpx;
  font-size: 6rem;
  text-align: center;
  text-transform: uppercase;

  -webkit-animation-duration: 1s;

          animation-duration: 1s;
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.byline:first-line {
  font-size: NaNpx;
  font-size: 3rem;
  line-height: NaNpx;
  line-height: 6rem;
}
.byline a {
  color: inherit;
  text-decoration: none;
}

Happy debugging! 👍

[MoOx]

It's probably a pixrem bug /cc @iamvdo

[ben-eb]

Smaller test case:

html {
  font-size: 0.625vw;
}

h1 {
  font-size: 6rem;
}

Output:

html {
  font-size: 0.625vw;
}

h1 {
  font-size: NaNpx;
  font-size: 6rem;
}

[dotnetCarpenter]

Thanks @ben-eb! I'll report that in pixrem

[MoOx]

Waiting for this robwierzbowski/node-pixrem#45

[MoOx]

Closed by robwierzbowski/node-pixrem@9ccf84f
Just uninstall and reinstall cssnext to get the patch.

[dotnetCarpenter]

Hmm just did to no avail.

[MoOx]

Can you double check you have node-pixrem 2.0.1 please ?

[dotnetCarpenter]

I can't have that since cssnext specifies pixrem 1.* https://github.com/cssnext/cssnext/blob/master/package.json#L41