NaNpx values when using REM units #210

dotnetCarpenter · 2015-09-10T09:53:52Z

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! 👍

The text was updated successfully, but these errors were encountered:

MoOx · 2015-09-10T12:27:14Z

It's probably a pixrem bug /cc @iamvdo

ben-eb · 2015-09-10T13:10:31Z

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 · 2015-09-10T17:40:44Z

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

MoOx · 2015-09-13T18:35:35Z

Waiting for this robwierzbowski/node-pixrem#45

MoOx · 2015-09-18T09:05:43Z

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

dotnetCarpenter · 2015-09-18T15:12:47Z

Hmm just did to no avail.

MoOx · 2015-09-18T15:14:55Z

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

dotnetCarpenter · 2015-09-18T15:21:15Z

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

dotnetCarpenter · 2015-09-18T15:47:06Z

Unfortunately the unit test fails with microtime@1.5.0, which is a dev dependency of cssnext. It's unrelated to PR#217 though.

Hmm seems there is some info about telling travis to use GCC 4.8 and here. I don't have time to do more but wanted to share the info.

Of course the Windows issue seems to be totally unrelated: https://ci.appveyor.com/project/MoOx/cssnext/build/279

jednano · 2015-09-18T16:45:22Z

@dotnetCarpenter see #209 (diff)

jednano · 2015-09-18T17:15:44Z

See #219 for fixing unrelated issues to this PR.

MoOx · 2015-09-18T17:19:03Z

This will have to wait #202 :/
@dotnetCarpenter my best advice: #202 (comment)

dotnetCarpenter mentioned this issue Sep 10, 2015

NaNpx values when font-size is set on the html element robwierzbowski/node-pixrem#45

Closed

MoOx added type: bug status: blocked labels Sep 13, 2015

MoOx closed this as completed Sep 13, 2015

MoOx reopened this Sep 13, 2015

MoOx removed the status: blocked label Sep 18, 2015

MoOx closed this as completed Sep 18, 2015

dotnetCarpenter added a commit to dotnetCarpenter/cssnext that referenced this issue Sep 18, 2015

update pixrem to version 2.*, since 2.0.1 fixes a bug - fixing MoOx#210

e484056

MoOx added the status: blocked label Sep 18, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

NaNpx values when using REM units #210

NaNpx values when using REM units #210

dotnetCarpenter commented Sep 10, 2015

MoOx commented Sep 10, 2015

Uh oh!

ben-eb commented Sep 10, 2015

Uh oh!

dotnetCarpenter commented Sep 10, 2015

Uh oh!

MoOx commented Sep 13, 2015

Uh oh!

MoOx commented Sep 18, 2015

Uh oh!

dotnetCarpenter commented Sep 18, 2015

Uh oh!

MoOx commented Sep 18, 2015

Uh oh!

dotnetCarpenter commented Sep 18, 2015

Uh oh!

dotnetCarpenter commented Sep 18, 2015

Uh oh!

jednano commented Sep 18, 2015

Uh oh!

jednano commented Sep 18, 2015

Uh oh!

MoOx commented Sep 18, 2015

Uh oh!

Uh oh!

NaNpx values when using REM units #210

NaNpx values when using REM units #210

Comments

dotnetCarpenter commented Sep 10, 2015

MoOx commented Sep 10, 2015

Uh oh!

ben-eb commented Sep 10, 2015

Uh oh!

dotnetCarpenter commented Sep 10, 2015

Uh oh!

MoOx commented Sep 13, 2015

Uh oh!

MoOx commented Sep 18, 2015

Uh oh!

dotnetCarpenter commented Sep 18, 2015

Uh oh!

MoOx commented Sep 18, 2015

Uh oh!

dotnetCarpenter commented Sep 18, 2015

Uh oh!

dotnetCarpenter commented Sep 18, 2015

Uh oh!

jednano commented Sep 18, 2015

Uh oh!

jednano commented Sep 18, 2015

Uh oh!

MoOx commented Sep 18, 2015

Uh oh!