Clarify rules of define:vars (#1937)

This is an attempt to make it clear that the provided arg to `define:vars` must be an object, and that the values must be serializable.

1 files changed, 4 insertions, 3 deletions

diff --git a/docs/src/pages/migration/0.21.0.md b/docs/src/pages/migration/0.21.0.md
index cd04fdff7..58c049d5a 100644
--- a/docs/src/pages/migration/0.21.0.md
+++ b/docs/src/pages/migration/0.21.0.md
@@ -42,14 +42,15 @@ _These aliases are integrated automatically into [VSCode](https://code.visualstu
 
 ## Variables in Scripts & Styles
 
-In Astro v0.21, server-side variables can be passed into client-side `<style>` or `<script>`.
+In Astro v0.21, _serializable_ server-side variables can be passed into client-side `<style>` or `<script>`.
 
 ```astro
 ---
 // tick.astro
-const colors = { foregroundColor: "rgb(221 243 228)", backgroundColor: "rgb(24 121 78)" }
+const foregroundColor = "rgb(221 243 228)";
+const backgroundColor = "rgb(24 121 78)";
 ---
-<style define:vars={colors}>
+<style define:vars={{foregroundColor, backgroundColor}}>
   h-tick {
     background-color: var(--backgroundColor);
     border-radius: 50%;