search

matvp91 / stylemug

CSS in JS with support for static / atomic CSS extraction.
MIT License
54 stars 2 forks source link

Translate px to em when compiler parses a fontSize property. #4

Open matvp91 opened 4 years ago

matvp91 commented 4 years ago

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.

d-pollard commented 4 years ago

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.

matvp91 commented 4 years ago

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