Experimental preprocessor using existing parsers

In the past day, I’ve put a small proof of concept of a refactor of this project to reuse the Svelte & Windi parsers. You can find it here grenierdev/svelte-windicss-preprocess.

<div class="min-h-screen bg-gray-100" />
stays
<div class="min-h-screen bg-gray-100" />

<div class="bg-white font-light sm:hover:(bg-gray-100 font-medium)" />
becomes
<div class="bg-white font-light sm:hover:bg-gray-100 sm:hover:font-medium" />

<div class="flex px-{a} lg:px-{b}" />
becomes
<div class="flex px-{a} lg:px-{b}" />
                    ^---------^------------------------- intact, author will need to add style
                                                         manually for all possible values of {a}
                                                         and {b}

<div class="bg-white font-light sm:hover:(bg-gray-{b} font-medium)" />
becomes
<div class="bg-white font-light sm:hover:bg-gray-{b} sm:hover:font-medium" />
                                                 ^------ intact, author will need to add style
                                                         manually for all possible values of {b}

<div class={`px-3 py-${c + 2 - 10} sm:(text-gray-${d} text-sm font-medium)`} />
becomes
<div class={`px-3 py-${c + 2 - 10} sm:text-gray-${d} sm:text-sm sm:font-medium`} />
                     ^--------------------------^------- intact, author will need to add style
                                                         manually for all possible values of 
                                                         {c + 2 - 10} and {d}

All of which could be passed to something described in https://github.com/windicss/svelte-windicss-preprocess/issues/35#issuecomment-790940288 (using WindiCSS at runtime).

Still just a proof of concept and does not yet cover all the features, namely the class directive.

Could be worth discussing?

[alexanderniebuhr]

We have to evaluate all trade-offs in detail, before doing changes in that scale. I will look into your prototype in more detail during the weekend. I still think a combination of both would be the best fit here, but I will check!

[grenierdev]

I’ve wrap the whole markup function with console.time/timeEnd.

On my simple project, here are the timings

client\views\Empty.svelte: 6.251ms
client\App.svelte: 14.022ms
client\Workbench.svelte: 4.612ms
client\Layout.svelte: 30.093ms

I did the same with v3.0.0-beta.1

client\views\Empty.svelte: 1.976ms
client\App.svelte: 8.723ms
client\Workbench.svelte: 1.212ms
client\Layout.svelte: 10.923ms

I’m running this on Win10 with a 24cpu/32Gb ram on a M.2 SSD 6Gbps, node v14.15.0.