stylemug icon indicating copy to clipboard operation
stylemug copied to clipboard

Translate px to em when compiler parses a fontSize property.

Open matvp91 opened this issue 4 years ago • 2 comments

We should eventually be able to configure the babel plugin with the following setting:

{
  baseFontSize: 16,
}

When the compiler parses a fontSize rule, the following transformation should be applied:

fontSize: 16 // translates to 1em
fontSize: 14 // translates to 0.875em

If no baseFontSize setting is found, no translation should happen.

matvp91 avatar May 14 '20 14:05 matvp91

it should probably be REM that we use; looks like this is how facebook does it

source: https://engineering.fb.com/web/facebook-redesign/

specific quote:

By using rems, we can respect user-specified defaults and are able to provide controls for customizing font size without requiring changes to the stylesheet. Designs, however, are usually created using CSS pixel values. Manually converting to rems adds engineering overhead and the potential for bugs, so we have our build tool do this conversion for us.

d-pollard avatar May 15 '20 15:05 d-pollard

I'll probably default to rem and have the user define a unit in the babel config if needed.

matvp91 avatar May 15 '20 16:05 matvp91