classes are not inlined with custom-elements

[syffs]

as in title, to reproduce, simply add the option to svelte plugin in your rollup.config.js

compilerOptions: {
    customElement: true,

and create a customElement svelte component with some tailwind classes

[alexanderniebuhr]

does this issue still exists.. i can't reproduce it

[syffs]

sorry for the delay @alexanderniebuhr (easter weekend...)

It works with simple components, but tailwind classes from nested components aren't included

[alexanderniebuhr]

@syffs can you provide simplest reproduction repo

[syffs]

I was just working on that:
https://github.com/syffs/svelte-windicss-customel

[alexanderniebuhr]

your problem are not custom-element. It is that your style tags are postCSS. You need to preprocess that first with som postCSS preprocessor

[syffs]

Thanks for the quick reply !

So is it luck that it does work without custom-element or nested components ?

Probably I misunderstood windicss features, I though it was prepocessing postcss: https://windicss.org/guide/migration.html

Or did I miss something ?

[alexanderniebuhr]

nvrmind you do have sveltePreprocessor in your processor list.. so it should work fine.

[alexanderniebuhr]

@syffs what is your issue. I see the classes in css. can you point me to the class missing in your repo?

[syffs]

I pushed some changes to repro repo to show what's the nested component (button) is supposed to look like.

Basically, it looks like none of the classes of the nested component are available

[alexanderniebuhr]

the svelte-windicss-preprocess returns following code (which looks good to me.. what do you say?)

if that is correct, the issue is after the preprocess step, maybe where the css is bundled and loaded not correctly in browser.. i try to find, maybe you have an idea?

<svelte:options tag="test-button" />

<script lang="ts">
export let text = "Default Text";
export let className = "";
export let color = "#000000";
</script>

<button style="--theme-color: {color}" class="test-btn {className}" class:selected="{$$props.selected}" on:click>
  {text}
</button>


<style>
.test-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.test-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
  border-width: 1px;
  cursor: pointer;
  border-radius: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  grid-gap: 0.25rem;
  gap: 0.25rem;
  min-width: 150px;
  border-color: var(--theme-color);
  transition: border 200ms, box-shadow 200ms;
}
.test-btn.selected {
  border-color: var(--theme-color);
  background-color: var(--theme-color);
}
.test-btn.selected, .test-btn.selected:hover, .test-btn.selected:focus {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
@media (min-width: 640px) {
  .test-btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media (hover: hover) {
  .test-btn:hover {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
    box-shadow: 0 0 0 1px inset var(--theme-color);
    border-color: var(--theme-color);
    background-color: var(--theme-color);
  }
}
</style>

[alexanderniebuhr]

setting following in testbutton group, is somehow working.. do not ask me why.. not that good with custom-element

//old
import TestButton from "./TestButton.svelte";
    ....
    
<TestButton
text="{text} {i}"
selected="{selection === i}"
on:click={({target}) => {target.blur(); selection  = (selection === i ? null : i)}}>
</TestButton >

//new
import "./TestButton.svelte";
    ....
    
<test-button
text="{text} {i}"
selected="{selection === i}"
on:click={({target}) => {target.blur(); selection  = (selection === i ? null : i)}}>
</test-button>

[syffs]

Thanks again for your assistance !

I've done some digging.. It seems to be related to svelte limitations: sveltejs/svelte#4274 sveltejs/svelte#3594 sveltejs/svelte#4228

[alexanderniebuhr]

sorry for that. I had the same issue with svelte and storybook :/