michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Clarify rules of define:vars (#1937)

Browse source 
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.
This commit is contained in:
Ian VanSchooten 2021-11-19 17:57:53 -05:00 committed by GitHub
parent 69d518dd8c
commit 8d7abfcbc5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/src/pages/migration/0.21.0.md
View file

@ -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%;