Problem with Sapper and Typescript about svelte-windicss-preprocess HOT 8 CLOSED

Encountered exact same behaviour inside a Snowpack / Svelte setup. I'm suspecting the parser runs into infinite loops when using template literals.

<script>
    let hidden = false
</script>

<!-- This doesn't work, even commented ❌ -->
<div class={`px-1.5 ${hidden}`}>...</div>
<!-- This works ✔️ -->
<div class="px-1.5 hidden">...</div>
<!-- This works ✔️ -->
<div class={'px-1.5 hidden'}>...</div>
<!-- This works ✔️ -->
<div class={`px-1.5 hidden`}>...</div>
<!-- This works ✔️ -->
<div class={['px-1.5', hidden].join(" "}}>...</div>

from svelte-windicss-preprocess.

This is not a problem of this project it seems that you are not implementing dynamic classes correctly. Please find information here https://svelte.dev/tutorial/classes or here https://flaviocopes.com/svelte-dynamically-apply-css/

It must be either of the ways down here. They are working

<script>
  let bgRed = true;
</script>

<div class="px-1.5 {bgRed ? "bg-red-100" : ""}">
</div>

<script>
  let currentPage = 0;
</script>

<style>
  .selected {
    background-color: #ff3e00;
    color: white;
  }
</style>

<div class="px-1.5" class:selected={currentPage == 0}>
</div>

<script>
  let ishidden = true;
</script>

<div class="px-1.5" class:hidden={ishidden}>
</div>

from svelte-windicss-preprocess.

@tommywalkie @ottsch I just found a working way to fix them issue. Just please be kindly and have some more patience. I need to clean everything up, but should be fixed the next days.

from svelte-windicss-preprocess.

Seems to me that this also leads to an infinite loop

<script>
  let bg = "bg-red-100";
</script>

<div class="px-1.5 {bg}">...</div>

from svelte-windicss-preprocess.

it seems that you are not implementing dynamic classes correctly

@alexanderniebuhr It's actually the expected behaviour in vanilla Svelte (REPL) thanks to Acorn. Can also confirm I didn't run into related issues on a production app based on Tailwind CSS as a svelte-preprocess PostCSS plugin.

from svelte-windicss-preprocess.

I see. Didn't mean that it is not important, sorry if that was not correctly written by me.
Just saying I have seen lots of svelte projects large and small size and totally no one used template literals.

However, I am also looking into this for you guys, so we can fix this. The REPL was extremely helpful to debug this. For now, I can tell that the windicss parser parses this case not correctly, for what I am seeing. But I must do more debugging. As the parser is used for many preprocessors, we might to find a fix for svelte, which might need some more work. I'll keep you updated with anything I find in the code

from svelte-windicss-preprocess.

A fix should be available soon. Please reopen with specific cases which still are breaking, and provide examples as before, so we can reproduce this. I have tested the REPL and the one in the first comment here. Hope this is working for you guys :)

from svelte-windicss-preprocess.

@ottsch @tommywalkie check https://github.com/windicss/svelte-windicss-preprocess/releases/tag/v2.1.5

from svelte-windicss-preprocess.