Compile before clone, errors render correctly (!important not set on …

…style property)
stephband · Sep 20, 2024 · 699059f · 699059f
1 parent 277bc0d
commit 699059f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/modules/compile/compile-node.js b/modules/compile/compile-node.js
@@ -164,6 +164,8 @@ const compileNode = overload((targets, node) => toType(node), {
                 return targets;
             }
             catch(error) {
+console.log('COMPILE ERROR', node, printError(target, error));
+node.textContent = 'HHHEEEEELLLLPPPPP!!';
                 node.replaceWith(printError(target, error));
                 return targets;
             }

diff --git a/modules/print.js b/modules/print.js
@@ -34,11 +34,11 @@ const literalCSS = {
     'justify-self':  'stretch',
     'align-self':    'start',
     'text-align':    'left',
-    'font-size':     '0.75rem !important',
+    'font-size':     '0.75rem',
     'font-family':   '"Fira Mono", Menlo, Monaco, "Andale Mono", monospace',
     'font-weight':   'normal',
     'letter-spacing': '-0.05em',
-    'line-height':   '1.5rem !important',
+    'line-height':   '1.5rem',
     'border-width':  '0',
     /* Bottom left corner underlaps <code> corner, we give it a slightly bigger
        radius to avoid aliasing this background color through the edge. */

diff --git a/modules/template.js b/modules/template.js
@@ -137,10 +137,12 @@ export default class Literal {
 
     static fromTemplate(template, element, consts = {}, data) {
         const id        = identify(template, 'literal-');
+        const options   = { nostrict: template.hasAttribute && template.hasAttribute('nostrict') };
+
+        // Compile before cloning node – if template has compile errors in DEBUG
+        // mode they are inserted into the template directly
+        const renderers = Literal.compile(id, template.content, options);
         const fragment  = getContextFragment(element, template);
-        const renderers = Literal.compile(id, template.content, {
-            nostrict: template.hasAttribute && template.hasAttribute('nostrict')
-        });
 
         return new Literal(fragment, renderers, element, consts, data);
     }