brands: migrate custom CSS to brands

authentik/brands/api.py

@@ -49,6 +49,7 @@ class Meta:
             "branding_title",
             "branding_logo",
             "branding_favicon",
+            "branding_custom_css",
             "flow_authentication",
             "flow_invalidation",
             "flow_recovery",
@@ -86,6 +87,7 @@ class CurrentBrandSerializer(PassiveSerializer):
     branding_title = CharField()
     branding_logo = CharField(source="branding_logo_url")
     branding_favicon = CharField(source="branding_favicon_url")
+    branding_custom_css = CharField()
     ui_footer_links = ListField(
         child=FooterLinkSerializer(),
         read_only=True,

authentik/brands/migrations/0008_brand_branding_custom_css.py

@@ -0,0 +1,37 @@
+# Generated by Django 5.0.12 on 2025-02-22 01:51
+
+from pathlib import Path
+from django.db import migrations, models
+from django.apps.registry import Apps
+
+from django.db.backends.base.schema import BaseDatabaseSchemaEditor
+
+
+def migrate_custom_css(apps: Apps, schema_editor: BaseDatabaseSchemaEditor):
+    Brand = apps.get_model("authentik_brands", "brand")
+
+    db_alias = schema_editor.connection.alias
+
+    path = Path("/web/dist/custom.css")
+    if not path.exists():
+        return
+    with path.read_text() as css:
+        for brand in Brand.objects.using(db_alias).all():
+            brand.branding_custom_css = css
+            brand.save()
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("authentik_brands", "0007_brand_default_application"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="brand",
+            name="branding_custom_css",
+            field=models.TextField(blank=True, default=""),
+        ),
+        migrations.RunPython(migrate_custom_css),
+    ]

authentik/brands/models.py

@@ -33,6 +33,7 @@ class Brand(SerializerModel):
 
     branding_logo = models.TextField(default="/static/dist/assets/icons/icon_left_brand.svg")
     branding_favicon = models.TextField(default="/static/dist/assets/icons/icon.png")
+    branding_custom_css = models.TextField(default="", blank=True)
 
     flow_authentication = models.ForeignKey(
         Flow, null=True, on_delete=models.SET_NULL, related_name="brand_authentication"

authentik/core/templates/base/skeleton.html

@@ -14,7 +14,7 @@
         {% block head_before %}
         {% endblock %}
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}">
-        <link rel="stylesheet" type="text/css" href="{% static 'dist/custom.css' %}" data-inject>
+        <style>{{ brand.branding_custom_css }}</style>
         <script src="{% versioned_script 'dist/poly-%v.js' %}" type="module"></script>
         <script src="{% versioned_script 'dist/standalone/loading/index-%v.js' %}" type="module"></script>
         {% block head %}

blueprints/schema.json

@@ -12997,6 +12997,10 @@
                     "minLength": 1,
                     "title": "Branding favicon"
                 },
+                "branding_custom_css": {
+                    "type": "string",
+                    "title": "Branding custom css"
+                },
                 "flow_authentication": {
                     "type": "string",
                     "format": "uuid",

internal/outpost/proxyv2/templates/error.html

@@ -8,7 +8,6 @@
         <link rel="shortcut icon" type="image/png" href="/outpost.goauthentik.io/static/dist/assets/icons/icon.png">
         <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/patternfly.min.css">
         <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/authentik.css">
-        <link rel="stylesheet" type="text/css" href="/outpost.goauthentik.io/static/dist/custom.css">
         <link rel="prefetch" href="/outpost.goauthentik.io/static/dist/assets/images/flow_background.jpg" />
         <style>
             .pf-c-background-image::before {

schema.yml

@@ -41140,6 +41140,8 @@ components:
           type: string
         branding_favicon:
           type: string
+        branding_custom_css:
+          type: string
         flow_authentication:
           type: string
           format: uuid
@@ -41199,6 +41201,8 @@ components:
         branding_favicon:
           type: string
           minLength: 1
+        branding_custom_css:
+          type: string
         flow_authentication:
           type: string
           format: uuid
@@ -42085,6 +42089,8 @@ components:
           type: string
         branding_favicon:
           type: string
+        branding_custom_css:
+          type: string
         ui_footer_links:
           type: array
           items:
@@ -42111,6 +42117,7 @@ components:
           type: string
           readOnly: true
       required:
+      - branding_custom_css
       - branding_favicon
       - branding_logo
       - branding_title
@@ -50101,6 +50108,8 @@ components:
         branding_favicon:
           type: string
           minLength: 1
+        branding_custom_css:
+          type: string
         flow_authentication:
           type: string
           format: uuid

web/build.mjs

@@ -42,7 +42,6 @@ const definitions = {
 const otherFiles = [
     ["node_modules/@patternfly/patternfly/patternfly.min.css", "."],
     ["node_modules/@patternfly/patternfly/assets/**", ".", "node_modules/@patternfly/patternfly/"],
-    ["src/custom.css", "."],
     ["src/common/styles/**", "."],
     ["src/assets/images/**", "./assets/images"],
     ["./icons/*", "./assets/icons"],

web/package.json

@@ -169,7 +169,6 @@
                 "./dist/enterprise/**",
                 "./dist/poly-*.js",
                 "./dist/poly-*.js.map",
-                "./dist/custom.css",
                 "./dist/theme-dark.css",
                 "./dist/patternfly.min.css"
             ],

web/src/elements/Base.ts

@@ -23,26 +23,6 @@ type AkInterface = HTMLElement & {
 export const rootInterface = <T extends AkInterface>(): T | undefined =>
     (document.body.querySelector("[data-ak-interface-root]") as T) ?? undefined;
 
-let css: Promise<string[]> | undefined;
-function fetchCustomCSS(): Promise<string[]> {
-    if (!css) {
-        css = Promise.all(
-            Array.of(...document.head.querySelectorAll<HTMLLinkElement>("link[data-inject]")).map(
-                (link) => {
-                    return fetch(link.href)
-                        .then((res) => {
-                            return res.text();
-                        })
-                        .finally(() => {
-                            return "";
-                        });
-                },
-            ),
-        );
-    }
-    return css;
-}
-
 export const QUERY_MEDIA_COLOR_LIGHT = "(prefers-color-scheme: light)";
 
 // Ensure themes are converted to a static instance of CSS Stylesheet, otherwise the
@@ -101,15 +81,12 @@ export class AKElement extends LitElement {
     }
 
     async _initCustomCSS(root: DocumentOrShadowRoot): Promise<void> {
-        const sheets = await fetchCustomCSS();
-        sheets.map((css) => {
-            if (css === "") {
-                return;
-            }
-            new CSSStyleSheet().replace(css).then((sheet) => {
-                root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
-            });
-        });
+        const brand = rootInterface()?.brand;
+        if (!brand) {
+            return;
+        }
+        const sheet = await new CSSStyleSheet().replace(brand.brandingCustomCss);
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
     }
 
     _applyTheme(root: DocumentOrShadowRoot, theme?: UiThemeEnum): void {