From 76cbdeb176a868105dc5ac80e59a0090ca588e77 Mon Sep 17 00:00:00 2001
From: Albert Gasset <albert.gasset@moodle.com>
Date: Thu, 17 Oct 2024 12:33:08 +0200
Subject: [PATCH] MOBILE-4616 database: Fix loading of custom CSS

Custom CSS was not loaded if the text passed to core-compile-html was
initially empty and changed afterwards.
---
 .../compile/components/compile-html/compile-html.ts      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/core/features/compile/components/compile-html/compile-html.ts b/src/core/features/compile/components/compile-html/compile-html.ts
index 2cceb8f0f..cfd3d9c47 100644
--- a/src/core/features/compile/components/compile-html/compile-html.ts
+++ b/src/core/features/compile/components/compile-html/compile-html.ts
@@ -91,6 +91,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     protected differ: KeyValueDiffer<unknown, unknown>; // To detect changes in the jsData input.
     protected creatingComponent = false;
     protected pendingCalls = {};
+    protected componentStyles = '';
 
     constructor(
         protected changeDetector: ChangeDetectorRef,
@@ -152,7 +153,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
                     componentClass,
                     this.container,
                     this.extraImports,
-                    this.cssCode,
+                    this.componentStyles,
                 );
 
                 this.element.addEventListener('submit', (event) => {
@@ -185,7 +186,7 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     protected async loadCSSCode(): Promise<void> {
         // Do not allow (yet) to load CSS code to a component that doesn't have text.
         if (!this.text) {
-            this.cssCode = '';
+            this.componentStyles = '';
 
             return;
         }
@@ -196,10 +197,12 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
 
         // Prepend all CSS rules with :host to avoid conflicts.
         if (!this.cssCode || this.cssCode.includes(':host')) {
+            this.componentStyles = this.cssCode ?? '';
+
             return;
         }
 
-        this.cssCode =  CoreDom.prefixCSS(this.cssCode, ':host ::ng-deep', ':host');
+        this.componentStyles = CoreDom.prefixCSS(this.cssCode, ':host ::ng-deep', ':host');
     }
 
     /**