From 7a2a17557cd24c14eb1f7bbfcc6d228bb593da50 Mon Sep 17 00:00:00 2001
From: Matia <38083522+matiadev@users.noreply.github.com>
Date: Mon, 6 Apr 2026 16:24:56 +0200
Subject: [PATCH] docs: add CSS custom properties section to style directive
 (#18065)

Adds documentation for using CSS custom properties with the `style:`
directive. I think this was lost at some point during the great
transition. It's only mentioned in the [best
practices](https://svelte.dev/docs/svelte/best-practices#Using-JavaScript-variables-in-CSS)
section, so I thought it would make sense to include it.
---
 documentation/docs/03-template-syntax/17-style.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/documentation/docs/03-template-syntax/17-style.md b/documentation/docs/03-template-syntax/17-style.md
index 8b25c221d6..6ddb128f4a 100644
--- a/documentation/docs/03-template-syntax/17-style.md
+++ b/documentation/docs/03-template-syntax/17-style.md
@@ -42,3 +42,9 @@ even over `!important` properties:
 <div style:color="red" style="color: blue">This will be red</div>
 <div style:color="red" style="color: blue !important">This will still be red</div>
 ```
+
+You can set CSS custom properties:
+
+```svelte
+<div style:--columns={columns}>...</div>
+```