Fix await statement

Author: micantoine

src/parsers/template.ts

@@ -77,6 +77,10 @@ const addDynamicVariablesToElements = (
     } else if (childNode.type === 'IfBlock') {
       addDynamicVariablesToElements(processor, childNode, cssVar);
       addDynamicVariablesToElements(processor, childNode.else, cssVar);
+    } else if (childNode.type === 'AwaitBlock') {
+      addDynamicVariablesToElements(processor, childNode.pending, cssVar);
+      addDynamicVariablesToElements(processor, childNode.then, cssVar);
+      addDynamicVariablesToElements(processor, childNode.catch, cssVar);
     }
   });
 };

test/globalFixtures/bindVariable.test.js

@@ -151,4 +151,36 @@ describe('Bind variable to CSS', () => {
       `{/each}<style module>:global(div){color:var(--color-123)}</style>`
     );
   });
+
+  test('root elements has `each` statement', async () => {
+    const output = await compiler({
+      source: `${script}` +
+      `{#await promise}` +
+      `<p>...waiting</p>` +
+      `{:then number}` +
+      `<p>The number is {number}</p>` +
+      `{:catch error}` +
+      `<p>{error.message}</p>` +
+      `{/await}` +
+      `{#await promise then value}` +
+      `<p>the value is {value}</p>` +
+      `{/await}<style module>div{color:bind(color)}</style>`,
+    }, {
+      cssVariableHash: '123',
+    });
+
+    expect(output).toBe(
+      `${script}` +
+      `{#await promise}` +
+      `<p style="--color-123:{color};">...waiting</p>` +
+      `{:then number}` +
+      `<p style="--color-123:{color};">The number is {number}</p>` +
+      `{:catch error}` +
+      `<p style="--color-123:{color};">{error.message}</p>` +
+      `{/await}` +
+      `{#await promise then value}` +
+      `<p style="--color-123:{color};">the value is {value}</p>` +
+      `{/await}<style module>:global(div){color:var(--color-123)}</style>`
+    );
+  });
 });