Is any way to type check style props which is declare in Props?

[yuki0418]

Hi
I use Style props to change styling of child from parent.

I declare type Props in script then I can show hint in VS Code when use that component.
However it doesn't do type checking.
Is there any way to do that?

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

	type Props = {
		children?: Snippet;

		// Style props
		'--mb'?: string; // Margin bottom
                 '--direction'?: 'row' | 'column'; // Flex direction
	};

	const { children }: Props = $props();
</script>

<div class="row">
	{@render children()}
</div>

<style>
	.row {
		display: flex;
		margin-bottom: var(--mb, 'unset');
		flex-direction: var(--direction, row);
	}
</style>

In parent

// This is ok
<Row --mb="1rem" --direction="row">
  <p>Hoge</p>
</Row>

// This still ok, should show type error
<Row --mb={100} --direction="invalid">
  <p>Hoge</p>
</Row>

Or is there more better ways to do put style from parent?

[brunnerh]

These kinds of properties are not really properties of the component at all.
Adding them creates a wrapper div around the component and sets the style there.

A workaround would be to perform the same logic yourself, i.e. add a regular property, accept styles there and add the wrapper yourself (unless you already have a suitable element for it).

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

	type Props = {
		children?: Snippet;

		styles?: {
			'--mb'?: string;
			'--direction'?: 'row' | 'column';
		};
	};

	const { children, styles }: Props = $props();

	const style = $derived(
		Object.entries(styles ?? {})
			.map(([key, value]) => `${key}: ${value}`)
			.join(';')
	);
</script>

<div class="row" {style}>
  ...
</div>

<Row styles={{ '--direction': 'column', '--mb': '24px' }}>
    <span>A</span>
    <span>B</span>
</Row>

The syntax is not as nice, but this will now check the types.

Alternatively you could flatten this to two regular properties, e.g. direction and margin-bottom:

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

	type Props = {
		children?: Snippet;

		'margin-bottom'?: string;
		direction?: 'row' | 'column';
	};

	const { children, 'margin-bottom': mb, direction }: Props = $props();
</script>

<div
	class="row"
	style:--mb={mb}
	style:--direction={direction}>
  ...
</div>

<Row direction="column" margin-bottom="24px">
    <span>A</span>
    <span>B</span>
</Row>

[yuki0418]

@brunnerh
Thank you for giving some ideas!!
For applying styles from parent, there is NOT a silver ballet.
But your second idea looks better. I will workaround it!!