Fix if statement block

Author: micantoine

src/parsers/template.ts

@@ -54,6 +54,8 @@ const addDynamicVariablesToElements = (
   cssVar: CssVariables
 ): void => {
   node.children?.forEach((childNode) => {
+    // console.log(childNode);
+
     if (childNode.type === 'InlineComponent') {
       addDynamicVariablesToElements(processor, childNode, cssVar);
     } else if (childNode.type === 'Element') {
@@ -72,6 +74,9 @@ const addDynamicVariablesToElements = (
           ` ${cssVar.styleAttribute}`
         );
       }
+    } else if (childNode.type === 'IfBlock') {
+      addDynamicVariablesToElements(processor, childNode, cssVar);
+      addDynamicVariablesToElements(processor, childNode.else, cssVar);
     }
   });
 };

test/globalFixtures/bindVariable.test.js

@@ -113,4 +113,24 @@ describe('Bind variable to CSS', () => {
       </style>`
     );
   });
+
+  test('root elements has if statement', async () => {
+    const output = await compiler({
+      source: `${script}` +
+      `{#if color === 'blue'}<div>blue</div>` +
+      `{:else if color === 'red'}<div>red</div>` +
+      `{:else}<div>none</div>` +
+      `{/if}<style module>div{color:bind(color)}</style>`,
+    }, {
+      cssVariableHash: '123',
+    });
+
+    expect(output).toBe(
+      `${script}` +
+      `{#if color === 'blue'}<div style="--color-123:{color};">blue</div>` +
+      `{:else if color === 'red'}<div style="--color-123:{color};">red</div>` +
+      `{:else}<div style="--color-123:{color};">none</div>`+
+      `{/if}<style module>:global(div){color:var(--color-123)}</style>`
+    );
+  });
 });