diff --git a/.changeset/angry-rules-tease.md b/.changeset/angry-rules-tease.md
new file mode 100644
index 00000000..6a5f7b64
--- /dev/null
+++ b/.changeset/angry-rules-tease.md
@@ -0,0 +1,5 @@
+---
+"@vanilla-extract/babel-plugin-debug-ids": minor
+---
+
+Add support for `createVar` calls with property definitions
diff --git a/.changeset/modern-cobras-sort.md b/.changeset/modern-cobras-sort.md
new file mode 100644
index 00000000..35619d0c
--- /dev/null
+++ b/.changeset/modern-cobras-sort.md
@@ -0,0 +1,28 @@
+---
+"@vanilla-extract/css": minor
+---
+
+Add support for a `vars` property to steps within `keyframes` declarations
+
+Example usage:
+
+```ts
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg'
+});
+
+const angleKeyframes = keyframes({
+  '0%': {
+    vars: {
+      [angle]: '0deg'
+    }
+  },
+  '100%': {
+    vars: {
+      [angle]: '360deg'
+    }
+  }
+});
+```
diff --git a/.changeset/poor-mirrors-care.md b/.changeset/poor-mirrors-care.md
new file mode 100644
index 00000000..50a81f78
--- /dev/null
+++ b/.changeset/poor-mirrors-care.md
@@ -0,0 +1,28 @@
+---
+"@vanilla-extract/babel-plugin-debug-ids": minor
+---
+
+Add support for property definitions to `createVar`
+
+When a property definition is provided to `createVar`, a `@property` CSS rule will be generated.
+
+Example usage:
+
+```ts
+import { createVar } from '@vanilla-extract/css';
+
+export myVar = createVar({
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0.5',
+});
+```
+
+This will generate the following CSS:
+```css
+@property --myVar__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
+```