[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 🙂