web: build polyfills into separate file, load first

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/templates/base/skeleton.html

@@ -14,6 +14,7 @@
         <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
         <script src="{% url 'authentik_api:javascript-catalog' %}?v={{ ak_version }}"></script>
+        <script src="{% static 'dist/adoptedStyleSheets.js' %}?v={{ ak_version }}" type="module"></script>
         {% block head %}
         {% endblock %}
     </head>

web/rollup.config.js

@@ -25,10 +25,6 @@ const resources = [
 const isProdBuild = process.env.NODE_ENV === "production";
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 function manualChunks(id) {
-    if (id.includes("construct-style-sheets-polyfill")) {
-        // Keep polyfills in the main file so they are loaded when dependencies are loaded
-        return "vendor-poly";
-    }
     if (id.includes("node_modules")) {
         if (id.includes("codemirror")) {
             return "vendor-cm";
@@ -63,6 +59,33 @@ export default [
             clearScreen: false,
         },
     },
+    // Polyfills (imported first)
+    {
+        input: [
+            "construct-style-sheets-polyfill"
+        ],
+        output: [
+            {
+                format: "es",
+                dir: "dist",
+                sourcemap: true,
+            }
+        ],
+        plugins: [
+            cssimport(),
+            typescript(),
+            externalGlobals({
+                django: "django",
+            }),
+            resolve({ browser: true }),
+            commonjs(),
+            sourcemaps(),
+            isProdBuild && terser(),
+        ].filter(p => p),
+        watch: {
+            clearScreen: false,
+        },
+    },
     // Main Application
     {
         input: "./src/interfaces/AdminInterface.ts",

web/src/interfaces/AdminInterface.ts

@@ -1,5 +1,3 @@
-import "construct-style-sheets-polyfill";
-
 // Elements that are used by SiteShell pages
 // And can't dynamically be imported
 import "../elements/CodeMirror";

web/src/interfaces/admin/index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
         <script src="/api/jsi18n/"></script>
+        <script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
         <script src="/static/dist/AdminInterface.js" type="module"></script>
         <title>authentik</title>
     </head>

web/src/interfaces/flow/index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
         <script src="/api/jsi18n/"></script>
+        <script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
         <script src="/static/dist/FlowInterface.js" type="module"></script>
         <title>authentik</title>
     </head>