Some CSS styles not applied with non-zero inlineStyleThreshold since v2.21.3

[tkhs0813]

Describe the bug

Since SvelteKit v2.21.3, when inlineStyleThreshold is set to a non-zero value, some CSS styles are not being applied correctly.

Reproduction

Logs

System Info

System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M3 Pro
    Memory: 708.78 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.16.0 - ~/.volta/tools/image/node/22.16.0/bin/node
    npm: 10.9.2 - ~/.volta/tools/image/node/22.16.0/bin/npm
  Browsers:
    Chrome: 137.0.7151.69
    Safari: 18.5
  npmPackages:
    @sveltejs/adapter-node: 5.2.12 => 5.2.12 
    @sveltejs/kit: 2.21.4 => 2.21.4 
    @sveltejs/vite-plugin-svelte: 5.1.0 => 5.1.0 
    svelte: 5.33.19 => 5.33.19 
    vite: 6.3.5 => 6.3.5

Severity

serious, but I can work around it

Additional Information

Setting inlineStyleThreshold: 0 resolves the issue.

[flayks]

I can confirm this bug as I thought I was hallucinating 😅
It is not styling my Button component (which is normally imported, not dynamically) with the inlineStyleThreshold config option to 4096. It used to work a week ago and since this version, it doesn't build the style of my component when building.

At the moment to keep this working I had to lower the threshold to 1024.

[elliott-with-the-longest-name-on-github]

@eltigerchino is this related to that dynamic component styling PR?

[eltigerchino]

@eltigerchino is this related to that dynamic component styling PR?

Probably. I'll have a look and try to find a reproduction.

[eltigerchino]

I can confirm this bug as I thought I was hallucinating 😅 It is not styling my Button component (which is normally imported, not dynamically) with the inlineStyleThreshold config option to 4096. It used to work a week ago and since this version, it doesn't build the style of my component when building.

At the moment to keep this working I had to lower the threshold to 1024.

Are you able to create a minimal reproduction? Or if you're unable to, could you share the styles? How were the styles added? In thee Svelte style block? Or imported as a CSS file in the Svelte script tag? Or how the component was imported into the page/layout?

I'm finding this difficult to reproduce at the moment. A few things I've tried:

1. Inlining CSS for the page component.
2. Importing a component and inlining that CSS.
3. Importing a component which imports another component and inlining that CSS.

Let me know if there are other cases I should try. I wonder if CSS syntax plays a part here.

[flayks]

@eltigerchino Here is my component Button.svelte:

<style lang="scss" src="./Button.scss"></style>

<script lang="ts">
    import type { Snippet } from 'svelte'

    let {
        label,
        href,
        type,
        withIcon = false,
        icon = '+',
        disabled = false,
        isActive = false,
        isInactive = false,
        children,
        class: className,
        onclick,
    }: {
        label: string | null
        href?: string
        type?: 'submit' | 'reset' | 'button'
        withIcon?: boolean
        icon?: string
        disabled?: boolean
        isActive?: boolean
        isInactive?: boolean
        class?: string
        onclick?: any
        children?: Snippet
    } = $props()

    const tag = $derived(href ? 'a' : 'button')
    const isExternal = $derived(href && /^https?:\/\//i.test(href))
    const classes = $derived([
        'button',
        'text-caps',
        className,
        isActive && 'is-active',
        isInactive && 'is-inactive',
    ])
</script>

<svelte:element
    this={tag}
    {href}
    type={tag === 'button' ? type : undefined}
    class={classes}
    disabled={tag === 'button' ? disabled : null}
    tabindex={tag === 'button' ? 0 : null}
    target={isExternal ? '_blank' : undefined}
    rel={isExternal ? 'noreferrer noopener' : undefined}
    data-sveltekit-noscroll={!href ? undefined : href && !isExternal ? '' : undefined}
    role={tag === 'button' ? 'button' : undefined}
    {onclick}
>
    {@render children?.()}

    {#if label}
        <span class="label" data-label={label}>
            <span>{label}</span>
        </span>
    {/if}
    {#if withIcon && icon}
        <span class="icon">{icon}</span>
    {/if}
</svelte:element>

And styles:

.button {
    --sides: 12px;
    --duration: 0.35s;
    --color: var(--color-dark);
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--sides);
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
    color: var(--color);
    line-height: 1;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: inset 0 0 0 1px var(--color);
    appearance: none;
    cursor: pointer;
    transition-property: background-color, box-shadow, color, opacity;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease-quart-inout);

    // State: Disabled
    &:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

    // State: Hover
    &:not(:disabled):not(.is-active):hover {
        background-color: var(--color-dark);
        color: var(--color-white);

        .label {
            transform: translateY(2.5em);
        }
        &:after {
            transform: translateY(0);
        }
    }

    // State: Pressing
    &:active {
        .label {
            opacity: 0.65;
        }
    }

    // State: Active
    &.is-active {
        background-color: var(--color-dark);
        color: var(--color-white);

        .label {
            transform: translateY(2.5em);
        }
        &:after {
            transform: translateY(0);
        }
    }

    // State: Is inactive
    &.is-inactive {
        --color: var(--color-dark-20);
        color: var(--color-dark);
    }

    // Label
    .label {
        position: relative;
        transition-property: transform, opacity;
        transition-duration: var(--duration);
        transition-timing-function: var(--ease-quart-inout);

        span {
            white-space: nowrap;
        }

        &:after {
            content: attr(data-label);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateY(-2.5em);
        }
    }

    // Icon
    .icon {
        display: flex;
        align-items: center;
        height: 100%;
        margin-left: var(--sides);
        margin-right: calc(var(--sides) * -1 / 2);
        padding-left: 0.5em;
        border-left: 1px solid currentColor;
        font-size: 1.25em;
        font-weight: 500;
        transition: border-color var(--duration) var(--ease-quart-inout);
    }
}

Then imported that way, as simply as it can be:

<script lang="ts">
    import Button from '$components/atoms/Button/Button.svelte'
</script>

...

<Button
    withIcon
    type="submit"
    label={isLoading ? 'Processing…' : 'Inquire'}
    disabled={isLoading}
/>

Using this config:

...

const config = {
    preprocess: sveltePreprocess({
        scss: {
            prependData: globalStyles,
        }
    }),

    kit: {
        adapter: adapter({
            routes: {
                include: ['/*'],
                exclude: ['<all>'],
            },
        }),
        alias: {
            $components: 'src/components',
            $layouts: 'src/layouts',
            $animations: 'src/animations',
            $utils: 'src/utils',
            $stores: 'src/stores',
        },
        prerender: {
            handleMissingId: 'ignore',
        },
        inlineStyleThreshold: 4096,
        // ...
}

What is weird is that this exact code that I haven't changed works and build styles correctly on 2.21.2 but not on 2.21.3 or 2.21.4

[eltigerchino]

@eltigerchino Here is my component Button.svelte:

<style lang="scss" src="./Button.scss"></style> <script lang="ts"> import type { Snippet } from 'svelte' let { label, href, type, withIcon = false, icon = '+', disabled = false, isActive = false, isInactive = false, children, class: className, onclick, }: { label: string | null href?: string type?: 'submit' | 'reset' | 'button' withIcon?: boolean icon?: string disabled?: boolean isActive?: boolean isInactive?: boolean class?: string onclick?: any children?: Snippet } = $props() const tag = $derived(href ? 'a' : 'button') const isExternal = $derived(href && /^https?:\/\//i.test(href)) const classes = $derived([ 'button', 'text-caps', className, isActive && 'is-active', isInactive && 'is-inactive', ]) </script>

<svelte:element
this={tag}
{href}
type={tag === 'button' ? type : undefined}
class={classes}
disabled={tag === 'button' ? disabled : null}
tabindex={tag === 'button' ? 0 : null}
target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noreferrer noopener' : undefined}
data-sveltekit-noscroll={!href ? undefined : href && !isExternal ? '' : undefined}
role={tag === 'button' ? 'button' : undefined}
{onclick}

{@render children?.()}

{#if label}
    <span class="label" data-label={label}>
        <span>{label}</span>
    </span>
{/if}
{#if withIcon && icon}
    <span class="icon">{icon}</span>
{/if}

</svelte:element>

And styles:

.button {
--sides: 12px;
--duration: 0.35s;
--color: var(--color-dark);
position: relative;
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 var(--sides);
overflow: hidden;
text-align: left;
white-space: nowrap;
color: var(--color);
line-height: 1;
text-decoration: none;
background: none;
border: none;
box-shadow: inset 0 0 0 1px var(--color);
appearance: none;
cursor: pointer;
transition-property: background-color, box-shadow, color, opacity;
transition-duration: var(--duration);
transition-timing-function: var(--ease-quart-inout);

// State: Disabled
&:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

// State: Hover
&:not(:disabled):not(.is-active):hover {
    background-color: var(--color-dark);
    color: var(--color-white);

    .label {
        transform: translateY(2.5em);
    }
    &:after {
        transform: translateY(0);
    }
}

// State: Pressing
&:active {
    .label {
        opacity: 0.65;
    }
}

// State: Active
&.is-active {
    background-color: var(--color-dark);
    color: var(--color-white);

    .label {
        transform: translateY(2.5em);
    }
    &:after {
        transform: translateY(0);
    }
}

// State: Is inactive
&.is-inactive {
    --color: var(--color-dark-20);
    color: var(--color-dark);
}

// Label
.label {
    position: relative;
    transition-property: transform, opacity;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease-quart-inout);

    span {
        white-space: nowrap;
    }

    &:after {
        content: attr(data-label);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(-2.5em);
    }
}

// Icon
.icon {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: var(--sides);
    margin-right: calc(var(--sides) * -1 / 2);
    padding-left: 0.5em;
    border-left: 1px solid currentColor;
    font-size: 1.25em;
    font-weight: 500;
    transition: border-color var(--duration) var(--ease-quart-inout);
}

}

Then imported that way, as simply as it can be:

<script lang="ts"> import Button from '$components/atoms/Button/Button.svelte' </script>

...

<Button
withIcon
type="submit"
label={isLoading ? 'Processing…' : 'Inquire'}
disabled={isLoading}
/>

Using this config:

...

const config = {
preprocess: sveltePreprocess({
scss: {
prependData: globalStyles,
}
}),

kit: {
    adapter: adapter({
        routes: {
            include: ['/*'],
            exclude: ['<all>'],
        },
    }),
    alias: {
        $components: 'src/components',
        $layouts: 'src/layouts',
        $animations: 'src/animations',
        $utils: 'src/utils',
        $stores: 'src/stores',
    },
    prerender: {
        handleMissingId: 'ignore',
    },
    inlineStyleThreshold: 4096,
    // ...

}

What is weird is that this exact code that I haven't changed works and build styles correctly on 2.21.2 but not on 2.21.3 or 2.21.4

Thank you! I've tried to reproduce this by adding sveltePreprocss, sass, and the scss + svelte code but I'm not sure what I'm suppose to expect. Can you share a screenshot of what the button looks like working/broken? Also, I'm missing some of the global styles the scss references like --color-dark, so I don't know if my comparison will be accurate. However, I can see the styles inlined in the <head>. I just don't know if the issue is that the styles are not inlined or if the styles are inlined but not applying correctly?