Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

NaNpx values when font-size is set on the html element #45

Closed
dotnetCarpenter opened this issue Sep 10, 2015 · 4 comments
Closed

NaNpx values when font-size is set on the html element #45

dotnetCarpenter opened this issue Sep 10, 2015 · 4 comments

Comments

@dotnetCarpenter
Copy link

I have posted this issue in cssnext#210 but feel that it really belongs here.

cat node_modules/pixrem/package.json | grep version: "version": "2.0.0",
node_modules/.bin/postcss -v: postcss version 5.0.4

Thanks to @ben-eb I have reduced a test case that reproduce the issue.
Running postcss/pixrem with the following command:
node_modules/.bin/postcss -u pixrem and/or node_modules/.bin/cssnext

Smaller test case:

html {
  font-size: 0.625vw;
}

h1 {
  font-size: 6rem;
}

Output:

html {
  font-size: 0.625vw;
}

h1 {
  font-size: NaNpx; /* only happens when font-size is set on the html element */
  font-size: 6rem;
}
@dotnetCarpenter dotnetCarpenter changed the title NaNpx values when using REM units NaNpx values when font-size is set on the html element Sep 10, 2015
@dotnetCarpenter
Copy link
Author

Since you can't derive an absolute value from vh, vw, vmax, and vmin which are relative to the viewport, pre-runtime. I think pixrem should either throw a meaningful error or this must be a noop failing silently. I'm personal in favour of throwing, since it gives me an immediate response when preprocessing via either postcss -u pixrem or cssnext [--no-rem].

Note: by default the font-size of the root element (html) is 16px in all browsers on most systems. Even if you specify a percentage value, e.i. html { font-size: 62.5%; }, you can calculate the root font-size to be 10px.

@dotnetCarpenter
Copy link
Author

Other values that might be problamatic is ex and ch, unless you can read the font being used in a meaningful way. Doable but not simple. This is however another issue, but one to be mindful of.

ex
This unit represents the x-height of the element's font. On fonts with the 'x' letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.
ch
This unit represents the width, or more precisely the advance measure, of the glyph '0' (zero, the Unicode character U+0030) in the element's font.

@iamvdo
Copy link
Collaborator

iamvdo commented Sep 14, 2015

As Pixrem is one of the oldest PostCSS module, it needs to be rewritten to get better errors/warn messages, so for now, I'm in favor of failing silently to 16. All browsers that do support vw unit also support rem unit so this is not a big deal to fallback to 16 for older browsers.
Any opinion? cc @MoOx

@MoOx
Copy link
Contributor

MoOx commented Sep 14, 2015

All browsers that do support vw unit also support rem unit so this is not a big deal to fallback to 16 for older browsers.

indeed.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants