Merge branch '62-bind-problem-with-conditional-statements'

Author: micantoine

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Svelte preprocess CSS Modules, changelog
 
+## 2.2.3 (June 21, 2022)
+
+### Fixes
+
+- Add support for css binding on svelte blocks `{#if}` `{#each}` `{#await}` `{#key}` [issue 62](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/62)
+
 ## 2.2.2 (June 21, 2022)
 
 ### Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-preprocess-cssmodules",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Svelte preprocessor to generate CSS Modules classname on Svelte components",
   "keywords": [
     "svelte",

src/parsers/template.ts

@@ -54,7 +54,11 @@ const addDynamicVariablesToElements = (
   cssVar: CssVariables
 ): void => {
   node.children?.forEach((childNode) => {
-    if (childNode.type === 'InlineComponent') {
+    if (
+      childNode.type === 'InlineComponent' ||
+      childNode.type === 'EachBlock' ||
+      childNode.type === 'KeyBlock'
+    ) {
       addDynamicVariablesToElements(processor, childNode, cssVar);
     } else if (childNode.type === 'Element') {
       const attributesLength = childNode.attributes.length;
@@ -72,6 +76,13 @@ const addDynamicVariablesToElements = (
           ` ${cssVar.styleAttribute}`
         );
       }
+    } 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

@@ -113,4 +113,92 @@ 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>`
+    );
+  });
+
+  test('root elements has `each` statement', async () => {
+    const output = await compiler({
+      source: `${script}` +
+      `{#each [0,1,2,3] as number}` +
+      `<div>{number}</div>` +
+      `{/each}<style module>div{color:bind(color)}</style>`,
+    }, {
+      cssVariableHash: '123',
+    });
+
+    expect(output).toBe(
+      `${script}` +
+      `{#each [0,1,2,3] as number}` +
+      `<div style="--color-123:{color};">{number}</div>` +
+      `{/each}<style module>:global(div){color:var(--color-123)}</style>`
+    );
+  });
+
+  test('root element 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>`
+    );
+  });
+
+  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>`
+    );
+  });
 });