[v4] Switch default breakpoints to rem

[barvian]

This was seemingly considered/planned for v4 (mentioned by @adamwathan in #8378), but I didn't see it in the codebase. Feel free to delete this PR if plans changed! I used rem instead of em because the functionality seems to be the same, and it's consistent with the spacing and type scales.

[barvian]

Yikes, not sure how I missed those tests. Fixing now.

[barvian]

I'm getting a bunch of indentation-related changes between the test snapshots and the test results, i.e.

- ::file-selector-button {
-   appearance: button;
- }
+   ::file-selector-button {
+     appearance: button;
+   }

Any ideas how to address this? Sorry if it's obvious, I haven't used vitest before.

[adamwathan]

No worries fixed them! I usually just run pnpm run tdd and press u in the terminal to update the snapshots automatically, then check the diff to make sure the updates all seem correct to me 👍

[florianbouvot]

@barvian @adamwathan No issue with rem unit?
I remember this about em unit for Media Queries: https://adamwathan.me/dont-use-em-for-media-queries/

[adamwathan]

@florianbouvot In my testing everything seems to work now in modern browsers, but the fastest way to find out if there's a problem is to release it 😄

[barvian]

@barvian @adamwathan No issue with rem unit? I remember this about em unit for Media Queries: https://adamwathan.me/dont-use-em-for-media-queries/

I've used rem breakpoints in production sites with extensive browser testing and haven't seen any issues 🙂

[yeliex]

actually, breakpoints are relative to window viewport size, and not affected by font size or other contents on your page.

in that situation, it is better to keep behavior as traditional, just keep it in px. it is not hard to extend to use rem as someone's requirements, but definitely not for most cases.

It is of course works well to use rem when keeps real size with 16px as the root font-size default, but strange to definition of breakpoint and takes more understand cost.