Fix key statement

Author: micantoine

src/parsers/template.ts

@@ -54,9 +54,11 @@ const addDynamicVariablesToElements = (
   cssVar: CssVariables
 ): void => {
   node.children?.forEach((childNode) => {
-    // console.log(childNode);
-
-    if (childNode.type === 'InlineComponent' || childNode.type === 'EachBlock') {
+    if (
+      childNode.type === 'InlineComponent' ||
+      childNode.type === 'EachBlock' ||
+      childNode.type === 'KeyBlock'
+    ) {
       addDynamicVariablesToElements(processor, childNode, cssVar);
     } else if (childNode.type === 'Element') {
       const attributesLength = childNode.attributes.length;

test/globalFixtures/bindVariable.test.js

@@ -152,7 +152,7 @@ describe('Bind variable to CSS', () => {
     );
   });
 
-  test('root elements has `each` statement', async () => {
+  test('root element has `each` statement', async () => {
     const output = await compiler({
       source: `${script}` +
       `{#await promise}` +
@@ -183,4 +183,22 @@ describe('Bind variable to CSS', () => {
       `{/await}<style module>:global(div){color:var(--color-123)}</style>`
     );
   });
+
+  test('root element has `key` statement', async () => {
+    const output = await compiler({
+      source: `${script}` +
+      `{#key value}` +
+      `<div transition:fade>{value}</div>` +
+      `{/key}<style module>div{color:bind(color)}</style>`,
+    }, {
+      cssVariableHash: '123',
+    });
+
+    expect(output).toBe(
+      `${script}` +
+      `{#key value}` +
+      `<div transition:fade style="--color-123:{color};">{value}</div>` +
+      `{/key}<style module>:global(div){color:var(--color-123)}</style>`
+    );
+  });
 });