[Feature Request] Convert rem|em values to pixel values

[franky47]

I have a use case for a function that transform relative (em, rem) units into pixel values. Basically the opposite of what the em and rem functions do.

The reason behind this is that I use rem units throughout my styles for consistent UI component design, and I came across an issue where SVG elements sized with rem units don't work across all browsers.

As an example, Chrome renders ok with rem units:

But Firefox doesn't :

They do however seem to work with em units, but since that's dependent on whatever context the component is used in, it does not seem solid for my use case.

The API could look something like this:

import { px } from 'polished'

const valueInPx = px('3rem')

If it seems like a good idea, I could give a try to implementing it. Suggestions for naming and API are welcome !

[peterjcaulfield]

I just hit a bug where rem values aren't working for height and width attributes for svgs in firefox on windows so I need to convert the rem value to px to solve. I looked at the polished docs for a helper and saw the rem helper but no px helper and ended up here.

Why was this closed without comment?

[amorphius]

I have similar needs

[bhough]

Reopening for evaluation...

[bhough]

We've released v4.1.0 which includes a remToPx helper for converting rem values to px. This was the primary use case we saw the most support for.

We will continue to monitor future feature requests for a helper that covers em or other values. We will be closing this issue permanently, so please create a new request if this doesn't cover your use case.