From 7f9ab03447dd76cd408d1132cdf2c8bde6f67abe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 3 Dec 2024 19:30:35 +0200
Subject: [PATCH] fix firefox

---
 src/services/style_setter/style_setter.js | 20 ++++++++++++++++----
 src/services/theme_data/css_utils.js      | 15 +++++++--------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index f57fd80e..b5014ff1 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -122,16 +122,28 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => {
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
+  const insertRule = (styles, rule) => {
+    if (rule.indexOf('webkit') >= 0) {
+      try {
+        styles.sheet.insertRule(rule, 'index-max')
+        styles.rules.push(rule)
+      } catch (e) {
+        console.warn('Can\'t insert rule due to lack of support', e)
+      }
+    } else {
+      styles.sheet.insertRule(rule, 'index-max')
+      styles.rules.push(rule)
+    }
+  }
+
   const { lazyProcessFunc } = generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
         if (isLazy) {
-          lazyStyles.sheet.insertRule(rule, 'index-max')
-          lazyStyles.rules.push(rule)
+          insertRule(lazyStyles, rule)
         } else {
-          eagerStyles.sheet.insertRule(rule, 'index-max')
-          eagerStyles.rules.push(rule)
+          insertRule(eagerStyles, rule)
         }
       },
       onEagerFinished () {
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index e3396083..48935ea0 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -82,7 +82,7 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
           `
         }
         if (v === 'transparent') {
-          if (rule.component === 'Root') return []
+          if (rule.component === 'Root') return null
           return [
             rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
             '  --background: ' + v
@@ -114,7 +114,7 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
       }
       default:
         if (k.startsWith('--')) {
-          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          const [type, value] = v.split('|').map(x => x.trim())
           switch (type) {
             case 'color': {
               const color = rule.dynamicVars[k]
@@ -127,21 +127,20 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
             case 'generic':
               return k + ': ' + value
             default:
-              return ''
+              return null
           }
         }
-        return ''
+        return null
     }
-  }).filter(x => x).map(x => '  ' + x).join(';\n')
+  }).filter(x => x).map(x => '  ' + x + ';').join('\n')
 
   return [
     header,
-    directives + ';',
+    directives,
     (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
-    '',
     virtualDirectives,
     footer
-  ].join('\n')
+  ].filter(x => x).join('\n')
 }).filter(x => x)
 
 export const getScopedVersion = (rules, newScope) => {