better error reporting

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -732,10 +732,18 @@ export default {
             .reduce((acc, [k, v]) => ({ ...acc, [k]: `color | ${v}` }), {})
         }
 
+        const virtualDirectivesRule = {
+          component: 'Root',
+          directives: Object.fromEntries(
+            virtualDirectives.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+          )
+        }
+
         const rules = init({
           inputRuleset: [
-            ...editorFriendlyToOriginal.value,
-            paletteRule
+            paletteRule,
+            virtualDirectivesRule,
+            ...editorFriendlyToOriginal.value
           ],
           ultimateBackgroundColor: '#000000',
           liteMode: true,

src/services/theme_data/theme_data_3.service.js

@@ -63,6 +63,7 @@ export const findShadow = (shadows, { dynamicVars, staticVars }) => {
 }
 
 export const findColor = (color, { dynamicVars, staticVars }) => {
+  try {
     if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
     let targetColor = null
     if (color.startsWith('--')) {
@@ -111,6 +112,13 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
     }
     // Color references other color
     return targetColor
+  } catch (e) {
+    throw new Error(`Couldn't find color "${color}", variables are:
+Static:
+${JSON.stringify(staticVars, null, 2)}
+Dynamic:
+${JSON.stringify(dynamicVars, null, 2)}`)
+  }
 }
 
 const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
@@ -241,6 +249,7 @@ export const init = ({
   const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
 
   const processCombination = (combination) => {
+    try {
       const selector = ruleToSelector(combination, true)
       const cssSelector = ruleToSelector(combination)
 
@@ -448,6 +457,10 @@ export const init = ({
 
         return rule
       }
+    } catch (e) {
+      const { component, variant, state } = combination
+      throw new Error(`Error processing combination ${component}.${variant}:${state.join(':')}: ${e}`)
+    }
   }
 
   const processInnerComponent = (component, parent) => {