class="$$props.class" is not working, but would be good to have a function to solve this:

[moisesbites]

Describe the bug

When using $$props.class in a component, the windicss classes is not working inside the component:

Fo example, in the page:

<SomeComponent class="text-blue-700" />

In the SomeComponent:

<span class="{$$props.class}">some text</span>

The text would be blue-700 but is not working. But if I put inside the component the same windicss class I'm passing into in another snippet of page , the classes work correctly in both texts. For example:

In the SomeComponent:

<span class="{$$props.class}">some text</span>
<span class="text-blue-700">another text</span>

System Info

System:
    OS: Linux 5.13 Linux Mint 20.2 (Uma)
    CPU: (4) x64 Intel(R) Core(TM) i5-2400 CPU @ 3.10GHz
    Memory: 9.42 GB / 23.37 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.11.0 - ~/.nvm/versions/node/v16.11.0/bin/node
    npm: 8.3.0 - ~/.nvm/versions/node/v16.11.0/bin/npm
  IDEs:
    Nano: 4.8 - /usr/bin/nano
    VSCode: 1.63.2 - /usr/bin/code
  Browsers:
    Chrome: 97.0.4692.71
    Chromium: 96.0.4664.110
    Firefox: 95.0.1

Used Package Manager

npm

[moisesbites]

I solved using this:

<script>
  import Processor from 'windicss';
  const processor = new Processor();
  function windi(strings, ...values) {
    const str = strings.reduce((query, queryPart, i) => {
      const valueExists = i < values.length;
      const text = query + queryPart;

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

    const result = processor.interpret(str);
    return result.styleSheet.children
      .map((child) => {
        return child.property.map((p) => `${p.name}: ${p.value}${p.important ? '!important' : ''};`).join('');
      })
      .join('');
  }
</script>

<span style="{windi`${$$props.class}`}">some text</span>

[alexanderniebuhr]

That is actually the expected behavior.

I can see if i can improve that in an future update, but no promise!

[moisesbites]

@alexanderniebuhr Thank you very much.

For while, I'm using that function to solve this Issue, but if there was a more elegant way to solve this automatically, it would be much appreciated.

[jacob-8]

@moisesbites I wrote a preprocessor to overcome this challenge: https://www.npmjs.com/package/svelte-deep-wind-preprocess

[moisesbites]

@moisesbites I wrote a preprocessor to overcome this challenge: https://www.npmjs.com/package/svelte-deep-wind-preprocess

Thank you. I will try. Please, it would be interesting to correct the github project reference in the https://www.npmjs.com/package/svelte-deep-wind-preprocess.

[jacob-8]

@moisesbites I wrote a preprocessor to overcome this challenge: https://www.npmjs.com/package/svelte-deep-wind-preprocess

Thank you. I will try. Please, it would be interesting to correct the github project reference in the https://www.npmjs.com/package/svelte-deep-wind-preprocess.

Sorry about that. I had to do some refactoring first - the code now lives at https://github.com/jacob-8/svelte-deep-wind-preprocess