ryoppippi commented 1 month ago

Describe the bug

App.svelte

<script>
    import A from './A.svelte'
</script>

<A foo />

A.svelte

<script>
    const {...rest} = $props()
</script>

<p {...rest} text-orange>
    some text
</p>

<style>
[text-orange='']{
        color: orange
}
</style>

The output is

<p foo='true' text-orange='true' /> some text </p>

Expected result is

<p foo text-orange> some text </p>

This makes me confused when I use svelte5 with UnoCSS Attributify mode.

Related issues

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE42PQWrDQAxFryJEwS24471xAj5HnEVw5DLgGQlJCQ3Gdy9jLxLaTZf6-k8PLTjFmQzb04L5kghb7EWwRn9IGexOsxPWaHzTsSSdjRrFj0MePCZhdehhUk5QhaYPO1ANuWuexdz1MDFDc8QaE1_jFOmKreuN1vop_q925GwOSwhByXyFA7yJstj7x2-tvLScvv2T9ZK_aLtinGgLCyR73_wxl-3ppXyoqvNSgCKeWVvY8yGvm25D_v51Xn8AzbJ-UVwBAAA=

Logs

No response

System Info

System:
    OS: macOS 15.0
    CPU: (11) arm64 Apple M3 Pro
    Memory: 96.31 MB / 36.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.16.0 - ~/.local/share/devbox/global/default/.devbox/nix/profile/default/bin/node
    npm: 10.8.1 - ~/.local/share/devbox/global/default/.devbox/nix/profile/default/bin/npm
    pnpm: 9.11.0 - ~/.local/share/devbox/global/default/.devbox/nix/profile/default/bin/pnpm
    bun: 1.1.29 - ~/.local/share/aquaproj-aqua/bin/bun
  Browsers:
    Chrome: 129.0.6668.70
    Safari: 18.0
  npmPackages:
    svelte: 5.0.0-next.259 => 5.0.0-next.259

Severity

annoyance

Alaanor commented 1 month ago

For people stumbling on that problem like me, the attributify preset of unocss has an option trueToNonValued which is exactly for that case.

presetAttributify({ trueToNonValued: true }),

ryoppippi commented 4 weeks ago

Oh, nice!

sveltejs / svelte

valueless attributes are converted to true unexpectivly when using spread attributes #13436