From 5a4357e6999ba2024022de94ab9f4623870e2d88 Mon Sep 17 00:00:00 2001 From: AntoineGautier Date: Mon, 17 Aug 2026 21:01:02 +0200 Subject: [PATCH 1/2] Pin line-height so it is independent of build order --- client/src/styles/vars.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/src/styles/vars.scss b/client/src/styles/vars.scss index 7028eed1..7166ca65 100644 --- a/client/src/styles/vars.scss +++ b/client/src/styles/vars.scss @@ -25,3 +25,13 @@ --footer-height: 5rem; } + +// normalize.css and pico.css both set `line-height` on the root element via +// zero-specificity `:where()` selectors, so whichever one is later in the +// compiled stylesheet wins. Production builds concatenate CSS modules in a +// different order than the dev server, which flips the winner and shrinks +// line-height app-wide. Pin it explicitly here (real specificity) so it +// can't lose to either vendor reset regardless of build order. +html { + line-height: var(--line-height); +} From 81bc81cc0ce827d43c35c8046cadfb5ae5a24282 Mon Sep 17 00:00:00 2001 From: AntoineGautier Date: Wed, 19 Aug 2026 10:52:43 +0200 Subject: [PATCH 2/2] Import Pico from SCSS instead of CSS --- client/src/styles/application.scss | 2 +- client/src/styles/vars.scss | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/client/src/styles/application.scss b/client/src/styles/application.scss index 6e696324..36ccb4b9 100644 --- a/client/src/styles/application.scss +++ b/client/src/styles/application.scss @@ -3,7 +3,7 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"); /* npm modules */ @import "~flexboxgrid"; -@import "~@picocss/pico/css/pico.css"; +@import "~@picocss/pico/scss/pico"; @import "./vars"; // themeing pico diff --git a/client/src/styles/vars.scss b/client/src/styles/vars.scss index 7166ca65..40e7e22d 100644 --- a/client/src/styles/vars.scss +++ b/client/src/styles/vars.scss @@ -26,12 +26,11 @@ --footer-height: 5rem; } -// normalize.css and pico.css both set `line-height` on the root element via -// zero-specificity `:where()` selectors, so whichever one is later in the -// compiled stylesheet wins. Production builds concatenate CSS modules in a -// different order than the dev server, which flips the winner and shrinks -// line-height app-wide. Pin it explicitly here (real specificity) so it -// can't lose to either vendor reset regardless of build order. +// normalize.css and Pico both set `line-height` on the root element via +// zero-specificity `:where()` selectors, so whichever ends up later in the +// compiled stylesheet wins the cascade — order that isn't guaranteed to match +// source order once webpack concatenates separate CSS modules. Pin it here +// with real specificity so it can't lose regardless of module order. html { line-height: var(--line-height); }