em units are not working

[perrin4869]

I reproduced the problem here: https://github.com/perrin4869/responsive_type_test

I am getting the warning this combination of units is not supported [postcss-responsive-type] while attempting to process the following:

div {
    font-size: responsive 1.2em 1.4em;
}

[perrin4869]

OK, I figured out why this is impossible to do... might need some documentation for other people to avoid confusion maybe?

[madeleineostoja]

Yep the exact combination of units that can be used needs to be documented somewhere. You can use em units for sizing, you just have to use them for the range as well

div {
  font-size: responsive 1.2em 1.4em;
  font-range: 26em 80em;
}

[perrin4869]

Wait, actually, there's something I am failing to understand. Why can't:

.foo {
  font-size: responsive 3rem 6rem;
  font-range: 420px 1280px;
}

be converted simply to:

.foo {
  font-size: calc(3rem + 3 * ((100vw - 420px) / 860));
}

@media screen and (min-width: 1280px) {
  .foo {
    font-size: 6rem;
  }
}

@media screen and (max-width: 420px) {
  .foo {
    font-size: 3rem;
  }
}

[madeleineostoja]

there was definitely a reason for this, but it's been quite a while since I've worked on this repo and can't remember what it was for the life of me. I'll do a bit of digging...

[ackushiw]

I found a work around here: https://github.com/seaneking/postcss-responsive-type/issues/30#issuecomment-391818260