appCss/appTheme are now loaded as external CSS files instead of inline styles

src/public/javascripts/desktop.js

@@ -37,6 +37,7 @@ import noteTypeService from './services/note_type.js';
 import linkService from './services/link.js';
 import noteAutocompleteService from './services/note_autocomplete.js';
 import macInit from './services/mac_init.js';
+import cssLoader from './services/css_loader.js';
 
 // required for CKEditor image upload plugin
 window.glob.getCurrentNode = treeService.getCurrentNode;
@@ -79,6 +80,10 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
     return false;
 };
 
+for (const appCssNoteId of window.appCssNoteIds) {
+    cssLoader.requireCss(`/api/notes/${appCssNoteId}/download`);
+}
+
 const wikiBaseUrl = "https://github.com/zadam/trilium/wiki/";
 
 $(document).on("click", "button[data-help-page]", e => {

src/public/javascripts/services/css_loader.js

@@ -0,0 +1,13 @@
+async function requireCss(url) {
+    const css = Array
+        .from(document.querySelectorAll('link'))
+        .map(scr => scr.href);
+
+    if (!css.includes(url)) {
+        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', url));
+    }
+}
+
+export default {
+    requireCss
+}

src/public/javascripts/services/library_loader.js

@@ -1,3 +1,5 @@
+import cssLoader from './css_loader.js';
+
 const CKEDITOR = {"js": ["libraries/ckeditor/ckeditor.js"]};
 
 const CODE_MIRROR = {
@@ -34,7 +36,7 @@ const RELATION_MAP = {
 
 async function requireLibrary(library) {
     if (library.css) {
-        library.css.map(cssUrl => requireCss(cssUrl));
+        library.css.map(cssUrl => cssLoader.requireCss(cssUrl));
     }
 
     if (library.js) {
@@ -59,16 +61,6 @@ async function requireScript(url) {
     await loadedScriptPromises[url];
 }
 
-async function requireCss(url) {
-    const css = Array
-        .from(document.querySelectorAll('link'))
-        .map(scr => scr.href);
-
-    if (!css.includes(url)) {
-        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', url));
-    }
-}
-
 export default {
     requireLibrary,
     CKEDITOR,

src/routes/index.js

@@ -22,22 +22,13 @@ async function index(req, res) {
         sourceId: await sourceIdService.generateSourceId(),
         maxSyncIdAtLoad: await sql.getValue("SELECT MAX(id) FROM sync"),
         instanceName: config.General ? config.General.instanceName : null,
-        appCss: await getAppCss()
+        appCssNoteIds: await getAppCssNoteIds()
     });
 }
 
-async function getAppCss() {
-    let css = '';
-    const notes = attributeService.getNotesWithLabel('appCss');
-
-    for (const note of await notes) {
-        css += `/* ${note.noteId} */
-${note.content}
-
-`;
-    }
-
-    return css;
+async function getAppCssNoteIds() {
+    return (await attributeService.getNotesWithLabels(['appCss', 'appTheme']))
+        .map(note => note.noteId);
 }
 
 module.exports = {

src/services/attributes.js

@@ -44,6 +44,13 @@ async function getNotesWithLabel(name, value) {
           WHERE notes.isDeleted = 0 AND attributes.isDeleted = 0 AND attributes.name = ? ${valueCondition} ORDER BY position`, params);
 }
 
+async function getNotesWithLabels(names) {
+    const questionMarks = names.map(() => "?").join(", ");
+
+    return await repository.getEntities(`SELECT notes.* FROM notes JOIN attributes USING(noteId) 
+          WHERE notes.isDeleted = 0 AND attributes.isDeleted = 0 AND attributes.name IN (${questionMarks}) ORDER BY position`, names);
+}
+
 async function getNoteWithLabel(name, value) {
     const notes = await getNotesWithLabel(name, value);
 
@@ -86,6 +93,7 @@ async function getAttributeNames(type, nameLike) {
 
 module.exports = {
     getNotesWithLabel,
+    getNotesWithLabels,
     getNoteWithLabel,
     createLabel,
     createAttribute,

src/views/desktop.ejs

@@ -212,6 +212,7 @@
         maxSyncIdAtLoad: <%= maxSyncIdAtLoad %>,
         instanceName: '<%= instanceName %>'
     };
+    window.appCssNoteIds = <%- JSON.stringify(appCssNoteIds) %>;
 </script>
 
 <!-- Required for correct loading of scripts in Electron -->
@@ -247,9 +248,5 @@
     // final form which is pretty ugly.
     $("#container").show();
 </script>
-
-<style type="text/css">
-    <%= appCss %>
-</style>
 </body>
 </html>