support dynamic classes about svelte-windicss-preprocess HOT 17 CLOSED

@alexanderniebuhr I found a by far better solution: svelte actions!
see this repl:

https://svelte.dev/repl/197912700b7a42508353656cd64b263a?version=3.35.0

imho it's a better fit for svelte.

from svelte-windicss-preprocess.

Just some ideas to this topic:
Imho svelte does a good job with its per component scoping of css.
When you have a countable and predictable amount of combinations you can use @apply in the style section.
This will get the job done. A whitelist won't help, because the pure amount of data that has to be generated would be totaly against what windicss is all about.
So I would propose to have an option to use windicss at runtime.
with ES6s tagged template literal this could be something like:

const hex = 0xFFAAFF
const style = windi`bg-gray-100 text-${hex} rounded`

note: style would then be bound to the elements style attribute.
(this is similar to gql or the like)

my motivation

• I thing the preprocess domain is perfect for most cases, but when it comes to ui libraries the preprocess domain is not enough.
• I quickly scanned the windicss code, I think with proper treeshaking the generated code is far less than a pregenerated set of classes.
• function call would be a pure function -> memoization / caching
• It's fast enough, and would only happen if a component uses this feature so it's opt in.
• template string tags are a dsl (domain specific language) so is tailwindcss
• it's not agains having a whitelist, that would make sense for the preprocessor part as different feature

I'm aware that it would better fit directly in the windicss library than in the preprocessor.
What do you think? @alexanderniebuhr

from svelte-windicss-preprocess.

@alexanderniebuhr yes, I fine it was more meant like an input / brainstorm ;-)
in the meantime, I'll try to glue something together.

from svelte-windicss-preprocess.

@alexanderniebuhr the function returns the interpolated string. that is what I wrote and tested with the current implementation.

import { windi } from 'windicss/helpers'
const shade = 50
windi`bg-gray-${shade}` === 'bg-gray-50' // true

to make it simpler, a function would be enough. the template literal would just be syntactic sugar.

from svelte-windicss-preprocess.

Thanks for your input and taking your time, to explain that.
I am also a huge fan off svelte scoping and thought of the apply solution as well. However, people have very custom setups, where there are parsing classes to different svelte files. Must admit = never seen this in many projects. It was always designed with the following

<script>
  export let myProp;
</script>
<div class:customStyle={myProp}> Hello World! </div>
<style>
  .customStyle {
    ....
  }
</style>

I am also not a huge fan of a whitelist or safelist; however this is quite easy to implement. My proposal is we wait what we are coming up in windicss (https://github.com/windicss/windicss/issues/68). If that meets our specific cases, we will take advantage of this, otherwise we will add on top of this. Do you think that is enough for time being?

from svelte-windicss-preprocess.

@munxar also you might be able to implement this a hacky way, already. windicss and this preprocessor lib is built to run also in browsers, so you might be able to load the esm module somehow and then call the preprocess in a custom function. Feel free to try this out

from svelte-windicss-preprocess.

@munxar might be looking at https://github.com/voorjaar/windicss-online-demo, it is breaking with 2.2, but might be an idea how to start playground

from svelte-windicss-preprocess.

@munxar windicss/windicss@16e170d
if you would like to help, you could test this for us, and let us know if we need to do anything special for svelte.

from svelte-windicss-preprocess.

@alexanderniebuhr Yes, I would help, if the implementation would do anything ;-)
right now the string given is returned. To make it work it must compile the classes to the css attributes, so you can bind them at runtime like so:

<script>
    import { windi } from 'windicss/helpers'
    export let shade = 50;
</script>
<div style={windi`bg-gray-${shade}`}>My background is dynamic</div>

from svelte-windicss-preprocess.

if the implementation would do anything

try

<script>
    import { windi } from "windicss/helpers";
</script>

from svelte-windicss-preprocess.

@alexanderniebuhr we have a little missunderstanding.
The import was a typo.
Here is a little svelte repl demonstrating what I mean:

https://svelte.dev/repl/18120dbf7da143eeaf1071eda045e36e?version=3.35.0

I have no idea if I use processor, I just hacked something together, but you get the idea.
The implementation of the template literal tag just does literally nothing. It just outputs the template that you pass in and interpolates it.
In my repl get the tailwind classes resolved at runtime, so you can bind them e.g. to a color picker.
(there are limitations e.g. media query, but you get the idea)

from svelte-windicss-preprocess.

i get it. here is the function implemented in windicss

export function windi(strings: TemplateStringsArray, ...values: unknown[]): string {
  // windi template literal
  return strings.reduce((query, queryPart, i) => {
    const valueExists = i < values.length;
    const text = query + queryPart;

    return valueExists ? text + values[i] : text;
  }, '');
}

can you check what you get out of it, like what is the response of that function.. for the folowing input.. we need to see what we get back, so we can wrap it i guess. ( i am currently working on tests, after that I will have a look too)

<script>
    import { windi } from 'windicss/helpers'
    export let shade = 50;
</script>
<div style={windi`bg-gray-${shade}`}>My background is dynamic</div>

from svelte-windicss-preprocess.

@munxar this helps alot.. I am currently on the works.. i will sooon make a release, and you can test for me

from svelte-windicss-preprocess.

@munxar a78fc15 supports what you think?? It does parse windicss template literals correctly and in my browser the class get replaced in html correctly, however it currently is not working, as the class is missing at runtime, because it was not parsed before. Now the question is, EDIT: still haveing a regex bug with class="" but I do not know why it is not working with style=""

a) should we run it on preprocess and replace dynamic string with converted string, however this might not work, because svelte has not compiled variables at that moment, which would be not good...
b) or would you need classes yourself to a style tag,
c) or could the windicss in browser edit own css in runtime??

from svelte-windicss-preprocess.

After thinking I got what you mean. The problem is that the class string is not parsed to the unterlaying css! But it might be something to adapt in windicss itself cc @voorjaar

from svelte-windicss-preprocess.

i really like this @munxar. I will see if I can combine with windicss lib itself and add some examples in the readme for it tomorrow :)

from svelte-windicss-preprocess.

we will include a safelist in v3, as well as support

windi``

through safelist. @munxar you can make a PR for your latest REPL, or a blog article to show of your solution using svelte actions. https://github.com/windicss/awesome-windicss

from svelte-windicss-preprocess.