fix: CSS for older browsers

Author: andre-dietrich

layouts/partials/essentials/style.html

@@ -45,24 +45,48 @@
 
 {{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}
 
+{{/* Tailwind v4 output (cascade layers, nesting, oklch, range media queries) is
+  ignored by old browsers such as the PocketBook e-reader. Build a transpiled copy
+  for them, see postcss.config.js and assets/css/legacy.css. The lazy styles are
+  bundled in, so their unlayered rules keep winning over Tailwind's layers. */}}
+{{ $stylesLegacy := slice $styles $stylesLazy (resources.Get "css/legacy.css") | resources.Concat "css/style-legacy.css" | css.PostCSS }}
+
 {{ if hugo.IsProduction }}
   {{ $styles = $styles | minify | fingerprint }}
   {{ $stylesLazy = $stylesLazy | minify | fingerprint }}
+  {{ $stylesLegacy = $stylesLegacy | minify | fingerprint }}
 {{ end }}
 
 
 <!-- link main style -->
 <link
+  id="main-style"
   href="{{ $styles.RelPermalink }}"
   integrity="{{ $styles.Data.Integrity }}"
   rel="stylesheet" />
 
 <!-- link lazy style -->
 <link
+  id="lazy-style"
   defer
   async
   rel="stylesheet"
   href="{{ $stylesLazy.RelPermalink }}"
   integrity="{{ $stylesLazy.Data.Integrity }}"
   media="print"
   onload="this.media='all'; this.onload=null;" />
+
+<!-- swap to legacy style (includes the lazy style) if cascade layers are unsupported;
+  force with ?legacy-css -->
+<script>
+  if (!window.CSSLayerBlockRule || /[?&]legacy-css\b/.test(location.search)) {
+    var lazyStyle = document.getElementById("lazy-style");
+    var legacyStyle = document.createElement("link");
+    legacyStyle.rel = "stylesheet";
+    legacyStyle.href = "{{ $stylesLegacy.RelPermalink }}";
+    lazyStyle.parentNode.insertBefore(legacyStyle, lazyStyle);
+    lazyStyle.onload = null;
+    lazyStyle.media = "not all";
+    document.getElementById("main-style").media = "not all";
+  }
+</script>

package.json

@@ -30,6 +30,8 @@
     "autoprefixer": "^10.4.21",
     "caniuse-lite": "^1.0.30001724",
     "postcss": "^8.5.6",
+    "postcss-cli": "^12.0.0",
+    "postcss-preset-env": "^11.5.4",
     "prettier": "^3.5.3",
     "prettier-plugin-go-template": "0.0.15",
     "prettier-plugin-tailwindcss": "^0.6.11",