fix(lit): polyfill Constructable Stylesheet Objects (mdn#12811)

Polyfill for `CSSStyleSheet()` constructor etc, mainly for Safari < 16.4.

Required for webpack css-loader exportType "css-style-sheet".

Note: Async import is a compromise, as top-level await requires Safari 15+.

Author: caugner

client/src/app.tsx

@@ -37,6 +37,15 @@ import { Newsletter } from "./newsletter";
 import { Curriculum } from "./curriculum";
 import { useGA } from "./ga-context";
 
+if (!("adoptedStyleSheets" in Document.prototype)) {
+  // Polyfill for CSSStyleSheet() constructor etc, mainly for Safari < 16.4.
+  // Required for webpack css-loader exportType "css-style-sheet".
+  // Note: Async import is a compromise, as top-level await requires Safari 15+.
+  import(
+    /* webpackChunkName: "construct-style-sheets-polyfill" */ "construct-style-sheets-polyfill"
+  );
+}
+
 const AllFlaws = React.lazy(() => import("./flaws"));
 const Translations = React.lazy(() => import("./translations"));
 const WritersHomepage = React.lazy(() => import("./writers-homepage"));

package.json

@@ -103,6 +103,7 @@
     "compression": "^1.8.0",
     "compute-baseline": "^0.3.0",
     "concurrently": "^9.1.2",
+    "construct-style-sheets-polyfill": "^3.1.0",
     "cookie": "^0.7.2",
     "cookie-parser": "^1.4.7",
     "cross-spawn": "^7.0.6",

yarn.lock

@@ -5412,6 +5412,11 @@ connect-history-api-fallback@^2.0.0:
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
   integrity sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==
 
+construct-style-sheets-polyfill@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/construct-style-sheets-polyfill/-/construct-style-sheets-polyfill-3.1.0.tgz#c490abd79efdb359fafa62ec14ea55232be0eecf"
+  integrity sha512-HBLKP0chz8BAY6rBdzda11c3wAZeCZ+kIG4weVC2NM3AXzxx09nhe8t0SQNdloAvg5GLuHwq/0SPOOSPvtCcKw==
+
 [email protected], content-disposition@^0.5.2:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"