Responsive line-height with default parameters does not work

[pmendelski]

Hi. I'm using postcss-responsive-type@1.0.0.
I just wanted to use responsive line-height.

html {
  line-height: responsive;
}

Unfortunately it generates an error:

postcss-responsive-type: $FILE_PATH/default.css:5:1: this combination of units is not supported

and invalid css:

html {
  line-height: calc(1.2em + 0.6000000000000001 * ((100vw - undefined) / NaN));
}

@media screen and (min-width: 1280px) {
  html {
    line-height: 1.8em;
  }
}

@media screen and (max-width: 420px) {
  html {
    line-height: 1.2em;
  }
}

[madeleineostoja]

Hmm, not sure what's going on here. Tests should be catching this, I'll try to repro locally and look into it

[jenshedqvist]

I go the exact same problem with the same version. I've tested with px and em.

[ackushiw]

Adding the following solved it for me

  lower-line-height-range: 26em;
  upper-line-height-range: 80em;

[elliott-impression]

Bump. I get the same issue. I can work with px, however, when I use em values I get the same this combination of units is not supported error.

[iljapanic]

I get the same error when using em units but the CSS seems to compile correctly.

[iljapanic]

After playing around with the settings I would argue this is correct behaviour. If you set your font-size using px then you need to set your line-height with px as well and vice versa for em and rem.

A support for unitless line-height would be great.