From 81e8540dd7842f817278ca9244b3ff7a76033b07 Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Tue, 16 May 2023 15:14:18 +0200
Subject: [PATCH 01/13] add @propery support

---
 packages/css/src/index.ts        |  1 +
 packages/css/src/properties.ts   | 46 ++++++++++++++++++++++++++++++++
 packages/css/src/transformCss.ts | 15 +++++++++++
 packages/css/src/types.ts        | 28 ++++++++++++++++++-
 packages/css/src/vars.ts         | 10 ++++---
 5 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 packages/css/src/properties.ts

diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 28937df8c..824099e8b 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -14,3 +14,4 @@ export * from './style';
 export * from './vars';
 export { createContainer } from './container';
 export * from './layer';
+export * from './properties';
diff --git a/packages/css/src/properties.ts b/packages/css/src/properties.ts
new file mode 100644
index 000000000..482648905
--- /dev/null
+++ b/packages/css/src/properties.ts
@@ -0,0 +1,46 @@
+import type { AtRule } from 'csstype';
+
+import { appendCss } from './adapter';
+import { PropertySyntax } from './types';
+import { getFileScope } from './fileScope';
+import { generateIdentifier } from './identifier';
+import cssesc from 'cssesc';
+import {assertVarName} from './vars'
+
+type PropertyOptions = {
+  syntax: PropertySyntax | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue?: string
+};
+
+const buildPropertyRule = ({ syntax, inherits, initialValue }: PropertyOptions): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  initialValue,
+})
+
+export function createProperty(options: PropertyOptions, debugId?: string): string {
+  const cssPropertyName = cssesc(
+    generateIdentifier({
+      debugId,
+      debugFileName: false,
+    }),
+    { isIdentifier: true },
+  );
+
+  appendCss({ type: 'property', name: `--${cssPropertyName}`, rule: buildPropertyRule(options) }, getFileScope());
+
+  return `var(--${cssPropertyName})`;
+}
+
+export function createGlobalProperty(name: string, options: PropertyOptions): string {
+  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
+
+  return `var(--${name})`;
+}
+
+export function property(varName: string): string {
+  assertVarName(varName);
+
+  return varName.replace(/^var\((--.*)\)$/, '$1');
+}
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 43baf90c6..cedd45cd3 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -13,6 +13,7 @@ import type {
   CSSSelectorBlock,
   Composition,
   WithQueries,
+  CSSPropertyBlock,
 } from './types';
 import { markCompositionUsed } from './adapter';
 import { forEach, omit, mapKeys } from './utils';
@@ -119,6 +120,7 @@ class Stylesheet {
   localClassNamesSearch: AhoCorasick;
   composedClassLists: Array<{ identifier: string; regex: RegExp }>;
   layers: Map<string, Array<string>>;
+  propertyRules: Array<CSSPropertyBlock>;
 
   constructor(
     localClassNames: Array<string>,
@@ -128,6 +130,7 @@ class Stylesheet {
     this.conditionalRulesets = [new ConditionalRuleset()];
     this.fontFaceRules = [];
     this.keyframesRules = [];
+    this.propertyRules = [];
     this.localClassNamesMap = new Map(
       localClassNames.map((localClassName) => [localClassName, localClassName]),
     );
@@ -150,6 +153,13 @@ class Stylesheet {
 
       return;
     }
+
+    if (root.type === 'property') {
+      this.propertyRules.push(root)
+
+      return;
+    }
+    
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
@@ -573,6 +583,11 @@ class Stylesheet {
       css.push(renderCss({ '@font-face': fontFaceRule }));
     }
 
+    // Render property rules
+    for (const property of this.propertyRules) {
+      css.push(renderCss({ [`@property ${property.name}`]: property.rule }));
+    }
+
     // Render keyframes
     for (const keyframe of this.keyframesRules) {
       css.push(renderCss({ [`@keyframes ${keyframe.name}`]: keyframe.rule }));
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 7d89d3ced..ea1d42b6a 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -103,12 +103,19 @@ export type CSSLayerDeclaration = {
   name: string;
 };
 
+export type CSSPropertyBlock = {
+  type: 'property';
+  name: string;
+  rule: AtRule.Property
+};
+
 export type CSS =
   | CSSStyleBlock
   | CSSFontFaceBlock
   | CSSKeyframesBlock
   | CSSSelectorBlock
-  | CSSLayerDeclaration;
+  | CSSLayerDeclaration
+  | CSSPropertyBlock;
 
 export type FileScope = {
   packageName?: string;
@@ -147,3 +154,22 @@ export type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<
 export type ClassNames = string | Array<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
+
+export type PropertySyntax = 
+    | '<length>'
+    | '<number>' 
+    | '<percentage>' 
+    | '<length-percentage>' 
+    | '<color>' 
+    | '<image>' 
+    | '<url>' 
+    | '<integer>' 
+    | '<angle>' 
+    | '<time>' 
+    | '<resolution>' 
+    | '<transform-function>' 
+    | '<custom-ident>' 
+    | '<transform-list>' 
+    | '*'
+    // needs this to make TS suggestions work
+    | (string & Record<never, never>);
\ No newline at end of file
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index d645804c1..ad8f651ba 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -23,6 +23,12 @@ export function createVar(debugId?: string): CSSVarFunction {
   return `var(--${cssVarName})` as const;
 }
 
+export function assertVarName(value: unknown): asserts value is `var(--${string})` {
+  if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
+    throw new Error(`Invalid variable name: ${value}`);
+  }
+}
+
 export function fallbackVar(
   ...values: [string, ...Array<string>]
 ): CSSVarFunction {
@@ -32,9 +38,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
-        throw new Error(`Invalid variable name: ${value}`);
-      }
+      assertVarName(value)
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }

From 11d4fa73df45eb08c48cb7e9604ce06915dceb2d Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Wed, 31 May 2023 12:14:36 +0200
Subject: [PATCH 02/13] address feedback

---
 examples/next/components/HelloWorld.css.ts | 27 ++++++++++++-
 packages/css/src/index.ts                  |  3 +-
 packages/css/src/properties.ts             | 46 ----------------------
 packages/css/src/vars.ts                   | 41 +++++++++++++++++--
 packages/dynamic/src/index.ts              |  2 +
 5 files changed, 67 insertions(+), 52 deletions(-)
 delete mode 100644 packages/css/src/properties.ts

diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
index ec3a899ac..6fcc13e57 100644
--- a/examples/next/components/HelloWorld.css.ts
+++ b/examples/next/components/HelloWorld.css.ts
@@ -1,11 +1,34 @@
-import { style } from '@vanilla-extract/css';
+import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';
+
+const color = createVar();
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg',
+});
+
+const angleKeyframes = keyframes({
+  '100%': {
+    [getVarName(angle)]: '360deg',
+  },
+});
 
 export const root = style({
   background: 'pink',
   color: 'blue',
   padding: '16px',
-  transition: 'opacity .1s ease', // Testing autoprefixer
+  transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
+
+
   ':hover': {
     opacity: 0.8,
+    color: color,
   },
+  
+  vars: {
+    [color]: '#fef',
+    [angle]: fallbackVar(angle, '138deg'),
+  }
 });
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 824099e8b..dfb422ec1 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -1,3 +1,5 @@
+export { getVarName } from '@vanilla-extract/private';
+
 import './runtimeAdapter';
 
 export type {
@@ -14,4 +16,3 @@ export * from './style';
 export * from './vars';
 export { createContainer } from './container';
 export * from './layer';
-export * from './properties';
diff --git a/packages/css/src/properties.ts b/packages/css/src/properties.ts
deleted file mode 100644
index 482648905..000000000
--- a/packages/css/src/properties.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { AtRule } from 'csstype';
-
-import { appendCss } from './adapter';
-import { PropertySyntax } from './types';
-import { getFileScope } from './fileScope';
-import { generateIdentifier } from './identifier';
-import cssesc from 'cssesc';
-import {assertVarName} from './vars'
-
-type PropertyOptions = {
-  syntax: PropertySyntax | Array<PropertySyntax>;
-  inherits: boolean;
-  initialValue?: string
-};
-
-const buildPropertyRule = ({ syntax, inherits, initialValue }: PropertyOptions): AtRule.Property => ({
-  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
-  inherits: inherits ? 'true' : 'false',
-  initialValue,
-})
-
-export function createProperty(options: PropertyOptions, debugId?: string): string {
-  const cssPropertyName = cssesc(
-    generateIdentifier({
-      debugId,
-      debugFileName: false,
-    }),
-    { isIdentifier: true },
-  );
-
-  appendCss({ type: 'property', name: `--${cssPropertyName}`, rule: buildPropertyRule(options) }, getFileScope());
-
-  return `var(--${cssPropertyName})`;
-}
-
-export function createGlobalProperty(name: string, options: PropertyOptions): string {
-  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
-
-  return `var(--${name})`;
-}
-
-export function property(varName: string): string {
-  assertVarName(varName);
-
-  return varName.replace(/^var\((--.*)\)$/, '$1');
-}
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index ad8f651ba..ae3b37b71 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -1,3 +1,6 @@
+import type { AtRule } from 'csstype';
+
+
 import {
   get,
   walkObject,
@@ -9,20 +12,52 @@ import cssesc from 'cssesc';
 
 import { Tokens, NullableTokens, ThemeVars } from './types';
 import { validateContract } from './validateContract';
+import { getFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
-
-export function createVar(debugId?: string): CSSVarFunction {
+import { PropertySyntax } from './types';
+import { appendCss } from './adapter';
+
+type VarDeclaration = {
+  syntax: PropertySyntax | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue?: string
+};
+
+const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  initialValue,
+})
+
+export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction
+export function createVar(debugId?: string): CSSVarFunction
+export function createVar(debugIdOrDeclaration?: string | VarDeclaration, debugId?: string): CSSVarFunction {  
   const cssVarName = cssesc(
     generateIdentifier({
-      debugId,
+      debugId: typeof debugIdOrDeclaration === 'string' ? debugIdOrDeclaration : debugId,
       debugFileName: false,
     }),
     { isIdentifier: true },
   );
 
+  if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
+    appendCss({ type: 'property', name: `--${cssVarName}`, rule: buildPropertyRule(debugIdOrDeclaration) }, getFileScope());
+  }
+
   return `var(--${cssVarName})` as const;
 }
 
+export function createGlobalVar(name: string): CSSVarFunction
+export function createGlobalVar(name: string, declaration: VarDeclaration): CSSVarFunction
+export function createGlobalVar(name: string, declaration?: VarDeclaration): string {
+  if (declaration && typeof declaration === 'object') {
+    appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(declaration) }, getFileScope());
+  }
+
+
+  return `var(--${name})`;
+}
+
 export function assertVarName(value: unknown): asserts value is `var(--${string})` {
   if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
     throw new Error(`Invalid variable name: ${value}`);
diff --git a/packages/dynamic/src/index.ts b/packages/dynamic/src/index.ts
index 8540ac2d2..cc60fc185 100644
--- a/packages/dynamic/src/index.ts
+++ b/packages/dynamic/src/index.ts
@@ -1,2 +1,4 @@
+export { getVarName } from '@vanilla-extract/private';
+
 export { assignInlineVars } from './assignInlineVars';
 export { setElementVars } from './setElementVars';

From c91000458e73a9f5a6d5dc8090208e7d9e7eb391 Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Tue, 16 May 2023 15:14:18 +0200
Subject: [PATCH 03/13] add @propery support

---
 packages/css/src/index.ts        |  1 +
 packages/css/src/properties.ts   | 46 ++++++++++++++++++++++++++++++++
 packages/css/src/transformCss.ts | 15 +++++++++++
 packages/css/src/types.ts        | 28 ++++++++++++++++++-
 packages/css/src/vars.ts         | 10 ++++---
 5 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 packages/css/src/properties.ts

diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 28937df8c..824099e8b 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -14,3 +14,4 @@ export * from './style';
 export * from './vars';
 export { createContainer } from './container';
 export * from './layer';
+export * from './properties';
diff --git a/packages/css/src/properties.ts b/packages/css/src/properties.ts
new file mode 100644
index 000000000..482648905
--- /dev/null
+++ b/packages/css/src/properties.ts
@@ -0,0 +1,46 @@
+import type { AtRule } from 'csstype';
+
+import { appendCss } from './adapter';
+import { PropertySyntax } from './types';
+import { getFileScope } from './fileScope';
+import { generateIdentifier } from './identifier';
+import cssesc from 'cssesc';
+import {assertVarName} from './vars'
+
+type PropertyOptions = {
+  syntax: PropertySyntax | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue?: string
+};
+
+const buildPropertyRule = ({ syntax, inherits, initialValue }: PropertyOptions): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  initialValue,
+})
+
+export function createProperty(options: PropertyOptions, debugId?: string): string {
+  const cssPropertyName = cssesc(
+    generateIdentifier({
+      debugId,
+      debugFileName: false,
+    }),
+    { isIdentifier: true },
+  );
+
+  appendCss({ type: 'property', name: `--${cssPropertyName}`, rule: buildPropertyRule(options) }, getFileScope());
+
+  return `var(--${cssPropertyName})`;
+}
+
+export function createGlobalProperty(name: string, options: PropertyOptions): string {
+  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
+
+  return `var(--${name})`;
+}
+
+export function property(varName: string): string {
+  assertVarName(varName);
+
+  return varName.replace(/^var\((--.*)\)$/, '$1');
+}
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 6b0248eef..541aea00b 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -13,6 +13,7 @@ import type {
   CSSSelectorBlock,
   Composition,
   WithQueries,
+  CSSPropertyBlock,
 } from './types';
 import { markCompositionUsed } from './adapter';
 import { forEach, omit, mapKeys } from './utils';
@@ -119,6 +120,7 @@ class Stylesheet {
   localClassNamesSearch: AhoCorasick;
   composedClassLists: Array<{ identifier: string; regex: RegExp }>;
   layers: Map<string, Array<string>>;
+  propertyRules: Array<CSSPropertyBlock>;
 
   constructor(
     localClassNames: Array<string>,
@@ -128,6 +130,7 @@ class Stylesheet {
     this.conditionalRulesets = [new ConditionalRuleset()];
     this.fontFaceRules = [];
     this.keyframesRules = [];
+    this.propertyRules = [];
     this.localClassNamesMap = new Map(
       localClassNames.map((localClassName) => [localClassName, localClassName]),
     );
@@ -150,6 +153,13 @@ class Stylesheet {
 
       return;
     }
+
+    if (root.type === 'property') {
+      this.propertyRules.push(root)
+
+      return;
+    }
+    
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
@@ -573,6 +583,11 @@ class Stylesheet {
       css.push(renderCss({ '@font-face': fontFaceRule }));
     }
 
+    // Render property rules
+    for (const property of this.propertyRules) {
+      css.push(renderCss({ [`@property ${property.name}`]: property.rule }));
+    }
+
     // Render keyframes
     for (const keyframe of this.keyframesRules) {
       css.push(renderCss({ [`@keyframes ${keyframe.name}`]: keyframe.rule }));
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 078f0b92f..a4f76767e 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -103,12 +103,19 @@ export type CSSLayerDeclaration = {
   name: string;
 };
 
+export type CSSPropertyBlock = {
+  type: 'property';
+  name: string;
+  rule: AtRule.Property
+};
+
 export type CSS =
   | CSSStyleBlock
   | CSSFontFaceBlock
   | CSSKeyframesBlock
   | CSSSelectorBlock
-  | CSSLayerDeclaration;
+  | CSSLayerDeclaration
+  | CSSPropertyBlock;
 
 export type FileScope = {
   packageName?: string;
@@ -155,3 +162,22 @@ export type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<
 export type ClassNames = string | Array<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
+
+export type PropertySyntax = 
+    | '<length>'
+    | '<number>' 
+    | '<percentage>' 
+    | '<length-percentage>' 
+    | '<color>' 
+    | '<image>' 
+    | '<url>' 
+    | '<integer>' 
+    | '<angle>' 
+    | '<time>' 
+    | '<resolution>' 
+    | '<transform-function>' 
+    | '<custom-ident>' 
+    | '<transform-list>' 
+    | '*'
+    // needs this to make TS suggestions work
+    | (string & Record<never, never>);
\ No newline at end of file
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index d645804c1..ad8f651ba 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -23,6 +23,12 @@ export function createVar(debugId?: string): CSSVarFunction {
   return `var(--${cssVarName})` as const;
 }
 
+export function assertVarName(value: unknown): asserts value is `var(--${string})` {
+  if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
+    throw new Error(`Invalid variable name: ${value}`);
+  }
+}
+
 export function fallbackVar(
   ...values: [string, ...Array<string>]
 ): CSSVarFunction {
@@ -32,9 +38,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
-        throw new Error(`Invalid variable name: ${value}`);
-      }
+      assertVarName(value)
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }

From b6af447cd08212d7a833719645a11147c36fee41 Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Wed, 31 May 2023 12:14:36 +0200
Subject: [PATCH 04/13] address feedback

---
 examples/next/components/HelloWorld.css.ts | 27 ++++++++++++-
 packages/css/src/index.ts                  |  3 +-
 packages/css/src/properties.ts             | 46 ----------------------
 packages/css/src/vars.ts                   | 41 +++++++++++++++++--
 packages/dynamic/src/index.ts              |  2 +
 5 files changed, 67 insertions(+), 52 deletions(-)
 delete mode 100644 packages/css/src/properties.ts

diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
index ec3a899ac..6fcc13e57 100644
--- a/examples/next/components/HelloWorld.css.ts
+++ b/examples/next/components/HelloWorld.css.ts
@@ -1,11 +1,34 @@
-import { style } from '@vanilla-extract/css';
+import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';
+
+const color = createVar();
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg',
+});
+
+const angleKeyframes = keyframes({
+  '100%': {
+    [getVarName(angle)]: '360deg',
+  },
+});
 
 export const root = style({
   background: 'pink',
   color: 'blue',
   padding: '16px',
-  transition: 'opacity .1s ease', // Testing autoprefixer
+  transition: `opacity .1s ease, color .1s ease`, // Testing autoprefixer
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
+
+
   ':hover': {
     opacity: 0.8,
+    color: color,
   },
+  
+  vars: {
+    [color]: '#fef',
+    [angle]: fallbackVar(angle, '138deg'),
+  }
 });
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 824099e8b..dfb422ec1 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -1,3 +1,5 @@
+export { getVarName } from '@vanilla-extract/private';
+
 import './runtimeAdapter';
 
 export type {
@@ -14,4 +16,3 @@ export * from './style';
 export * from './vars';
 export { createContainer } from './container';
 export * from './layer';
-export * from './properties';
diff --git a/packages/css/src/properties.ts b/packages/css/src/properties.ts
deleted file mode 100644
index 482648905..000000000
--- a/packages/css/src/properties.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { AtRule } from 'csstype';
-
-import { appendCss } from './adapter';
-import { PropertySyntax } from './types';
-import { getFileScope } from './fileScope';
-import { generateIdentifier } from './identifier';
-import cssesc from 'cssesc';
-import {assertVarName} from './vars'
-
-type PropertyOptions = {
-  syntax: PropertySyntax | Array<PropertySyntax>;
-  inherits: boolean;
-  initialValue?: string
-};
-
-const buildPropertyRule = ({ syntax, inherits, initialValue }: PropertyOptions): AtRule.Property => ({
-  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
-  inherits: inherits ? 'true' : 'false',
-  initialValue,
-})
-
-export function createProperty(options: PropertyOptions, debugId?: string): string {
-  const cssPropertyName = cssesc(
-    generateIdentifier({
-      debugId,
-      debugFileName: false,
-    }),
-    { isIdentifier: true },
-  );
-
-  appendCss({ type: 'property', name: `--${cssPropertyName}`, rule: buildPropertyRule(options) }, getFileScope());
-
-  return `var(--${cssPropertyName})`;
-}
-
-export function createGlobalProperty(name: string, options: PropertyOptions): string {
-  appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(options) }, getFileScope());
-
-  return `var(--${name})`;
-}
-
-export function property(varName: string): string {
-  assertVarName(varName);
-
-  return varName.replace(/^var\((--.*)\)$/, '$1');
-}
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index ad8f651ba..ae3b37b71 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -1,3 +1,6 @@
+import type { AtRule } from 'csstype';
+
+
 import {
   get,
   walkObject,
@@ -9,20 +12,52 @@ import cssesc from 'cssesc';
 
 import { Tokens, NullableTokens, ThemeVars } from './types';
 import { validateContract } from './validateContract';
+import { getFileScope } from './fileScope';
 import { generateIdentifier } from './identifier';
-
-export function createVar(debugId?: string): CSSVarFunction {
+import { PropertySyntax } from './types';
+import { appendCss } from './adapter';
+
+type VarDeclaration = {
+  syntax: PropertySyntax | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue?: string
+};
+
+const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
+  syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
+  inherits: inherits ? 'true' : 'false',
+  initialValue,
+})
+
+export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction
+export function createVar(debugId?: string): CSSVarFunction
+export function createVar(debugIdOrDeclaration?: string | VarDeclaration, debugId?: string): CSSVarFunction {  
   const cssVarName = cssesc(
     generateIdentifier({
-      debugId,
+      debugId: typeof debugIdOrDeclaration === 'string' ? debugIdOrDeclaration : debugId,
       debugFileName: false,
     }),
     { isIdentifier: true },
   );
 
+  if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
+    appendCss({ type: 'property', name: `--${cssVarName}`, rule: buildPropertyRule(debugIdOrDeclaration) }, getFileScope());
+  }
+
   return `var(--${cssVarName})` as const;
 }
 
+export function createGlobalVar(name: string): CSSVarFunction
+export function createGlobalVar(name: string, declaration: VarDeclaration): CSSVarFunction
+export function createGlobalVar(name: string, declaration?: VarDeclaration): string {
+  if (declaration && typeof declaration === 'object') {
+    appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(declaration) }, getFileScope());
+  }
+
+
+  return `var(--${name})`;
+}
+
 export function assertVarName(value: unknown): asserts value is `var(--${string})` {
   if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
     throw new Error(`Invalid variable name: ${value}`);
diff --git a/packages/dynamic/src/index.ts b/packages/dynamic/src/index.ts
index 8540ac2d2..cc60fc185 100644
--- a/packages/dynamic/src/index.ts
+++ b/packages/dynamic/src/index.ts
@@ -1,2 +1,4 @@
+export { getVarName } from '@vanilla-extract/private';
+
 export { assignInlineVars } from './assignInlineVars';
 export { setElementVars } from './setElementVars';

From b25683084e3b39c7a55db8373c521d327e3f3ba0 Mon Sep 17 00:00:00 2001
From: markdalgleish <mark.john.dalgleish@gmail.com>
Date: Sat, 10 Jun 2023 10:06:19 +1000
Subject: [PATCH 05/13] fix formatting

---
 examples/next/components/HelloWorld.css.ts | 13 +++--
 packages/css/src/transformCss.ts           |  4 +-
 packages/css/src/types.ts                  | 38 ++++++------
 packages/css/src/vars.ts                   | 67 ++++++++++++++++------
 4 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
index 6fcc13e57..fd887d309 100644
--- a/examples/next/components/HelloWorld.css.ts
+++ b/examples/next/components/HelloWorld.css.ts
@@ -1,4 +1,10 @@
-import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';
+import {
+  style,
+  createVar,
+  keyframes,
+  getVarName,
+  fallbackVar,
+} from '@vanilla-extract/css';
 
 const color = createVar();
 const angle = createVar({
@@ -21,14 +27,13 @@ export const root = style({
   backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
   animation: `${angleKeyframes} 7s infinite ease-in-out both`,
 
-
   ':hover': {
     opacity: 0.8,
     color: color,
   },
-  
+
   vars: {
     [color]: '#fef',
     [angle]: fallbackVar(angle, '138deg'),
-  }
+  },
 });
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 541aea00b..1a99f945d 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -155,11 +155,11 @@ class Stylesheet {
     }
 
     if (root.type === 'property') {
-      this.propertyRules.push(root)
+      this.propertyRules.push(root);
 
       return;
     }
-    
+
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index a4f76767e..f89e4266b 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -106,7 +106,7 @@ export type CSSLayerDeclaration = {
 export type CSSPropertyBlock = {
   type: 'property';
   name: string;
-  rule: AtRule.Property
+  rule: AtRule.Property;
 };
 
 export type CSS =
@@ -163,21 +163,21 @@ export type ClassNames = string | Array<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
 
-export type PropertySyntax = 
-    | '<length>'
-    | '<number>' 
-    | '<percentage>' 
-    | '<length-percentage>' 
-    | '<color>' 
-    | '<image>' 
-    | '<url>' 
-    | '<integer>' 
-    | '<angle>' 
-    | '<time>' 
-    | '<resolution>' 
-    | '<transform-function>' 
-    | '<custom-ident>' 
-    | '<transform-list>' 
-    | '*'
-    // needs this to make TS suggestions work
-    | (string & Record<never, never>);
\ No newline at end of file
+export type PropertySyntax =
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>'
+  | '*'
+  // needs this to make TS suggestions work
+  | (string & Record<never, never>);
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index ae3b37b71..11e237cca 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -1,6 +1,5 @@
 import type { AtRule } from 'csstype';
 
-
 import {
   get,
   walkObject,
@@ -20,45 +19,79 @@ import { appendCss } from './adapter';
 type VarDeclaration = {
   syntax: PropertySyntax | Array<PropertySyntax>;
   inherits: boolean;
-  initialValue?: string
+  initialValue?: string;
 };
 
-const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
+const buildPropertyRule = ({
+  syntax,
+  inherits,
+  initialValue,
+}: VarDeclaration): AtRule.Property => ({
   syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
   inherits: inherits ? 'true' : 'false',
   initialValue,
-})
-
-export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction
-export function createVar(debugId?: string): CSSVarFunction
-export function createVar(debugIdOrDeclaration?: string | VarDeclaration, debugId?: string): CSSVarFunction {  
+});
+
+export function createVar(
+  declaration: VarDeclaration,
+  debugId?: string,
+): CSSVarFunction;
+export function createVar(debugId?: string): CSSVarFunction;
+export function createVar(
+  debugIdOrDeclaration?: string | VarDeclaration,
+  debugId?: string,
+): CSSVarFunction {
   const cssVarName = cssesc(
     generateIdentifier({
-      debugId: typeof debugIdOrDeclaration === 'string' ? debugIdOrDeclaration : debugId,
+      debugId:
+        typeof debugIdOrDeclaration === 'string'
+          ? debugIdOrDeclaration
+          : debugId,
       debugFileName: false,
     }),
     { isIdentifier: true },
   );
 
   if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
-    appendCss({ type: 'property', name: `--${cssVarName}`, rule: buildPropertyRule(debugIdOrDeclaration) }, getFileScope());
+    appendCss(
+      {
+        type: 'property',
+        name: `--${cssVarName}`,
+        rule: buildPropertyRule(debugIdOrDeclaration),
+      },
+      getFileScope(),
+    );
   }
 
   return `var(--${cssVarName})` as const;
 }
 
-export function createGlobalVar(name: string): CSSVarFunction
-export function createGlobalVar(name: string, declaration: VarDeclaration): CSSVarFunction
-export function createGlobalVar(name: string, declaration?: VarDeclaration): string {
+export function createGlobalVar(name: string): CSSVarFunction;
+export function createGlobalVar(
+  name: string,
+  declaration: VarDeclaration,
+): CSSVarFunction;
+export function createGlobalVar(
+  name: string,
+  declaration?: VarDeclaration,
+): string {
   if (declaration && typeof declaration === 'object') {
-    appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(declaration) }, getFileScope());
+    appendCss(
+      {
+        type: 'property',
+        name: `--${name}`,
+        rule: buildPropertyRule(declaration),
+      },
+      getFileScope(),
+    );
   }
 
-
   return `var(--${name})`;
 }
 
-export function assertVarName(value: unknown): asserts value is `var(--${string})` {
+export function assertVarName(
+  value: unknown,
+): asserts value is `var(--${string})` {
   if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
     throw new Error(`Invalid variable name: ${value}`);
   }
@@ -73,7 +106,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      assertVarName(value)
+      assertVarName(value);
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }

From 466040d6983f1d49da47ea11aa1d309fc3e0a237 Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Tue, 24 Sep 2024 14:32:56 +0200
Subject: [PATCH 06/13] feat: add tests and docs

---
 fixtures/themed/src/styles.css.ts             |  6 +-
 packages/babel-plugin-debug-ids/src/index.ts  |  6 +-
 packages/css/src/transformCss.test.ts         | 67 +++++++++++++++++--
 .../__snapshots__/rollup-plugin.test.ts.snap  | 25 +++++--
 site/docs/api/create-var.md                   | 56 ++++++++++++++++
 5 files changed, 149 insertions(+), 11 deletions(-)

diff --git a/fixtures/themed/src/styles.css.ts b/fixtures/themed/src/styles.css.ts
index a68ffea22..cd32c53de 100644
--- a/fixtures/themed/src/styles.css.ts
+++ b/fixtures/themed/src/styles.css.ts
@@ -64,7 +64,11 @@ globalStyle(`body ${iDunno}:after`, {
   content: "'I am content'",
 });
 
-const blankVar1 = createVar();
+const blankVar1 = createVar({
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0',
+});
 const blankVar2 = createVar();
 
 export const opacity = styleVariants(
diff --git a/packages/babel-plugin-debug-ids/src/index.ts b/packages/babel-plugin-debug-ids/src/index.ts
index 2ba1eca55..774bc0108 100644
--- a/packages/babel-plugin-debug-ids/src/index.ts
+++ b/packages/babel-plugin-debug-ids/src/index.ts
@@ -31,7 +31,11 @@ const debuggableFunctionConfig = {
     maxParams: 2,
   },
   createVar: {
-    maxParams: 1,
+    maxParams: 2,
+    hasDebugId: ({ arguments: args }) => {
+      const previousArg = args[args.length - 1];
+      return t.isStringLiteral(previousArg) || t.isTemplateLiteral(previousArg);
+    },
   },
   recipe: {
     maxParams: 2,
diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts
index fe9fa25c3..01cc20631 100644
--- a/packages/css/src/transformCss.test.ts
+++ b/packages/css/src/transformCss.test.ts
@@ -6,6 +6,11 @@ import { style } from './style';
 setFileScope('test');
 
 const testVar = createVar();
+const testPropertyVar = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg',
+}, 'test-property');
 const style1 = style({});
 const style2 = style({});
 
@@ -2022,7 +2027,7 @@ describe('transformCss', () => {
     `);
   });
 
-  it('should handle css vars', () => {
+  it('should handle simple css properties', () => {
     expect(
       transformCss({
         composedClassLists: [],
@@ -2075,6 +2080,60 @@ describe('transformCss', () => {
       }
     `);
   });
+  
+  it('should handle complicated css properties', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'local',
+            selector: 'testClass',
+            rule: {
+              display: 'block',
+              vars: {
+                '--my-var': 'red',
+                [testPropertyVar]: '10deg',
+              },
+              selectors: {
+                '&:nth-child(3)': {
+                  vars: {
+                    '--my-var': 'orange',
+                    [testPropertyVar]: '20deg',
+                  },
+                },
+              },
+              '@media': {
+                'screen and (min-width: 700px)': {
+                  vars: {
+                    '--my-var': 'yellow',
+                    [testPropertyVar]: '50deg',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      .testClass {
+        --my-var: red;
+        --test-property__skkcyc1: 10deg;
+        display: block;
+      }
+      .testClass:nth-child(3) {
+        --my-var: orange;
+        --test-property__skkcyc1: 20deg;
+      }
+      @media screen and (min-width: 700px) {
+        .testClass {
+          --my-var: yellow;
+          --test-property__skkcyc1: 50deg;
+        }
+      }
+    `);
+  });
 
   it('should cast property values to pixels when relevant', () => {
     expect(
@@ -2288,13 +2347,13 @@ describe('transformCss', () => {
         ],
       }).join('\n'),
     ).toMatchInlineSnapshot(`
-      .skkcyc2 .skkcyc1:before, .skkcyc2 .skkcyc1:after {
+      .skkcyc3 .skkcyc2:before, .skkcyc3 .skkcyc2:after {
         background: black;
       }
-      ._1g1ptzo1._1g1ptzo10 .skkcyc1 {
+      ._1g1ptzo1._1g1ptzo10 .skkcyc2 {
         background: blue;
       }
-      ._1g1ptzo10._1g1ptzo1 .skkcyc1 {
+      ._1g1ptzo10._1g1ptzo1 .skkcyc2 {
         background: blue;
       }
     `);
diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
index b26e9dab2..9ef180f28 100644
--- a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
+++ b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
@@ -15,7 +15,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-1b9864b6.css",
+    "assets/src/styles.css.ts.vanilla-3ab8b079.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -24,6 +24,11 @@ body, button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -194,7 +199,7 @@ export { shadow };
     "src/styles.css.js",
     "import './../assets/src/shared.css.ts.vanilla-16598c42.css';
 import './../assets/src/themes.css.ts.vanilla-3ad7ca47.css';
-import './../assets/src/styles.css.ts.vanilla-1b9864b6.css';
+import './../assets/src/styles.css.ts.vanilla-3ab8b079.css';
 
 var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12";
 var container = "styles_container__jteyb11";
@@ -382,6 +387,11 @@ export { button, container, opacity };
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -511,7 +521,7 @@ exports[`rollup-plugin should build with sourcemaps 1`] = `
     "",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-1b9864b6.css",
+    "assets/src/styles.css.ts.vanilla-3ab8b079.css",
     "",
   ],
   [
@@ -556,7 +566,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-1b9864b6.css",
+    "assets/src/styles.css.ts.vanilla-3ab8b079.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -565,6 +575,11 @@ body, button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
@@ -643,7 +658,7 @@ html .styles_opacity_1\\/4__jteyb17 {
     "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
 import './assets/src/themes.css.ts.vanilla-3ad7ca47.css';
 import './assets/src/shared.css.ts.vanilla-16598c42.css';
-import './assets/src/styles.css.ts.vanilla-1b9864b6.css';
+import './assets/src/styles.css.ts.vanilla-3ab8b079.css';
 
 var altTheme = "themes_altTheme__cvta176";
 var responsiveTheme = "themes_responsiveTheme__cvta177";
diff --git a/site/docs/api/create-var.md b/site/docs/api/create-var.md
index 4c0161d6b..65c835983 100644
--- a/site/docs/api/create-var.md
+++ b/site/docs/api/create-var.md
@@ -108,3 +108,59 @@ export const pink = style({
   }
 });
 ```
+
+## CSS Properties
+
+You can also create typed css [@property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) using `createVar`:
+
+```ts compiled
+// accent.css.ts
+
+import { createVar, style } from '@vanilla-extract/css';
+
+export const accentVar = createVar({
+  syntax: '<color>',
+  inherits: false,
+  initialValue: 'blue'
+});
+```
+
+CSS properties created with `createVar` can be used in the same way as a regular css variable:
+
+```ts compiled
+export const pink = style({
+  vars: {
+    [accentVar]: 'pink'
+  }
+});
+``` 
+
+The main benefit of using `createVar` to create typed css properties is that they can be animated via `keyframes`.
+
+```ts compiled
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg',
+});
+
+const angleKeyframes = keyframes({
+  '0%': {
+    [getVarName(angle)]: '0deg',
+  },
+  '100%': {
+    [getVarName(angle)]: '360deg',
+  },
+});
+
+export const root = style({
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
+  
+  vars: {
+    // This will fallback to 180deg if the @property is not supported by the browser
+    [angle]: fallbackVar(angle, '180deg'),
+  }
+});
+
+```
\ No newline at end of file

From 738c9dea86c19fbf665c7d411a0788d1f52411d1 Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Sat, 28 Sep 2024 16:01:26 +0200
Subject: [PATCH 07/13] improve vars animation in keyframes, improve docs

---
 examples/next/components/HelloWorld.css.ts    |  6 ++--
 fixtures/themed/src/styles.css.ts             |  1 -
 packages/css/src/index.ts                     |  2 --
 packages/css/src/transformCss.ts              |  2 +-
 packages/css/src/types.ts                     |  2 +-
 packages/css/src/vars.ts                      |  2 +-
 packages/dynamic/src/index.ts                 |  2 --
 .../__snapshots__/rollup-plugin.test.ts.snap  | 13 +++----
 site/docs/api/create-var.md                   | 32 ++---------------
 site/docs/api/keyframes.md                    | 35 +++++++++++++++++++
 site/docs/global-api/create-global-var.md     | 27 ++++++++++++++
 .../themed-esbuild--development.css           |  4 +++
 .../themed-esbuild--production.css            |  4 +++
 .../themed-esbuild-next--development.css      |  4 +++
 .../themed-esbuild-next--production.css       |  4 +++
 .../themed-mini-css-extract--development.css  |  4 +++
 .../themed-mini-css-extract--production.css   |  4 +++
 .../themed-vite--production.css               |  4 +++
 18 files changed, 104 insertions(+), 48 deletions(-)
 create mode 100644 site/docs/global-api/create-global-var.md

diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
index 817e3102b..7836b1ad6 100644
--- a/examples/next/components/HelloWorld.css.ts
+++ b/examples/next/components/HelloWorld.css.ts
@@ -1,4 +1,4 @@
-import { style, createVar, keyframes, getVarName, fallbackVar } from '@vanilla-extract/css';
+import { style, createVar, keyframes, fallbackVar } from '@vanilla-extract/css';
 
 const color = createVar();
 const angle = createVar({
@@ -9,7 +9,9 @@ const angle = createVar({
 
 const angleKeyframes = keyframes({
   '100%': {
-    [getVarName(angle)]: '360deg',
+    vars: {
+      [angle]: '360deg',
+    }
   },
 });
 
diff --git a/fixtures/themed/src/styles.css.ts b/fixtures/themed/src/styles.css.ts
index cd32c53de..b56a797d1 100644
--- a/fixtures/themed/src/styles.css.ts
+++ b/fixtures/themed/src/styles.css.ts
@@ -67,7 +67,6 @@ globalStyle(`body ${iDunno}:after`, {
 const blankVar1 = createVar({
   syntax: '<number>',
   inherits: false,
-  initialValue: '0',
 });
 const blankVar2 = createVar();
 
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index dfb422ec1..28937df8c 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -1,5 +1,3 @@
-export { getVarName } from '@vanilla-extract/private';
-
 import './runtimeAdapter';
 
 export type {
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 541aea00b..5cb99a568 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -163,7 +163,7 @@ class Stylesheet {
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
-          return [keyframe, this.transformProperties(rule)];
+          return [keyframe, this.transformVars(this.transformProperties(rule))];
         }),
       );
       this.keyframesRules.push(root);
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index a4f76767e..63acc8341 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -23,7 +23,7 @@ export type CSSProperties = {
 };
 
 export interface CSSKeyframes {
-  [time: string]: CSSProperties;
+  [time: string]: CSSPropertiesWithVars;
 }
 
 export type CSSPropertiesWithVars = CSSProperties & {
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index d486324a3..18ca93c1c 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -25,7 +25,7 @@ type VarDeclaration = {
 const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
   syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
   inherits: inherits ? 'true' : 'false',
-  initialValue,
+  ...(initialValue != null && { initialValue }),
 })
 
 export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction
diff --git a/packages/dynamic/src/index.ts b/packages/dynamic/src/index.ts
index cc60fc185..8540ac2d2 100644
--- a/packages/dynamic/src/index.ts
+++ b/packages/dynamic/src/index.ts
@@ -1,4 +1,2 @@
-export { getVarName } from '@vanilla-extract/private';
-
 export { assignInlineVars } from './assignInlineVars';
 export { setElementVars } from './setElementVars';
diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
index d84b32f28..d80f873ea 100644
--- a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
+++ b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
@@ -15,7 +15,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BFtGQ1T7.css",
+    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -27,7 +27,6 @@ body, button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
-  initial-value: 0;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -199,7 +198,7 @@ export { shadow };
     "src/styles.css.js",
     "import './../assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
 import './../assets/src/themes.css.ts.vanilla-DMMXGwB8.css';
-import './../assets/src/styles.css.ts.vanilla-BFtGQ1T7.css';
+import './../assets/src/styles.css.ts.vanilla-BPHcBqBf.css';
 
 var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12";
 var container = "styles_container__jteyb11";
@@ -390,7 +389,6 @@ export { button, container, opacity };
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
-  initial-value: 0;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -521,7 +519,7 @@ exports[`rollup-plugin should build with sourcemaps 1`] = `
     "",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BFtGQ1T7.css",
+    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
     "",
   ],
   [
@@ -586,7 +584,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BFtGQ1T7.css",
+    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -598,7 +596,6 @@ body, button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
-  initial-value: 0;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -678,7 +675,7 @@ html .styles_opacity_1\\/4__jteyb17 {
     "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
 import './assets/src/themes.css.ts.vanilla-DMMXGwB8.css';
 import './assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
-import './assets/src/styles.css.ts.vanilla-BFtGQ1T7.css';
+import './assets/src/styles.css.ts.vanilla-BPHcBqBf.css';
 
 var altTheme = "themes_altTheme__cvta176";
 var responsiveTheme = "themes_responsiveTheme__cvta177";
diff --git a/site/docs/api/create-var.md b/site/docs/api/create-var.md
index 1248d6f3b..1bb694596 100644
--- a/site/docs/api/create-var.md
+++ b/site/docs/api/create-var.md
@@ -137,34 +137,6 @@ export const pink = style({
     [accentVar]: 'pink'
   }
 });
-``` 
-
-The main benefit of using `createVar` to create typed css properties is that they can be animated via `keyframes`.
-
-```ts compiled
-const angle = createVar({
-  syntax: '<angle>',
-  inherits: false,
-  initialValue: '0deg',
-});
-
-const angleKeyframes = keyframes({
-  '0%': {
-    [getVarName(angle)]: '0deg',
-  },
-  '100%': {
-    [getVarName(angle)]: '360deg',
-  },
-});
-
-export const root = style({
-  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
-  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
-  
-  vars: {
-    // This will fallback to 180deg if the @property is not supported by the browser
-    [angle]: fallbackVar(angle, '180deg'),
-  }
-});
+```
 
-```
\ No newline at end of file
+The main benefit of using `createVar` to create typed css properties is that they can be [animated via keyframes](/documentation/api/keyframes#animating-variables).
diff --git a/site/docs/api/keyframes.md b/site/docs/api/keyframes.md
index cdcd09613..054b60f89 100644
--- a/site/docs/api/keyframes.md
+++ b/site/docs/api/keyframes.md
@@ -27,3 +27,38 @@ export const spinAgain = style({
   animation: `${rotate} 3s`
 });
 ```
+
+## Animating variables
+
+It is also possible to animate [typed CSS property](/documentation/api/create-var#css-property) using keyframes:
+
+```ts compiled
+const angle = createVar({
+  syntax: '<angle>',
+  inherits: false,
+  initialValue: '0deg'
+});
+
+const angleKeyframes = keyframes({
+  '0%': {
+    vars: {
+      [angle]: '0deg'
+    }
+  },
+  '100%': {
+    vars: {
+      [angle]: '360deg'
+    }
+  }
+});
+
+export const root = style({
+  backgroundImage: `linear-gradient(${angle}, rgba(153, 70, 198, 0.35) 0%, rgba(28, 56, 240, 0.46) 100%)`,
+  animation: `${angleKeyframes} 7s infinite ease-in-out both`,
+
+  vars: {
+    // This will fallback to 180deg if the @property is not supported by the browser
+    [angle]: fallbackVar(angle, '180deg')
+  }
+});
+```
diff --git a/site/docs/global-api/create-global-var.md b/site/docs/global-api/create-global-var.md
new file mode 100644
index 000000000..bf617b9ad
--- /dev/null
+++ b/site/docs/global-api/create-global-var.md
@@ -0,0 +1,27 @@
+---
+title: createGlobalVar
+parent: global-api
+---
+
+# createGlobalVar
+
+Similar to `createVar`, `createGlobalVar` creates a single global CSS Variable reference.
+
+```ts compiled
+// vars.css.ts
+
+import {
+  createGlobalVar,
+  style
+} from '@vanilla-extract/css';
+
+const opacityVar = createVar({
+  syntax: '<number>',
+  inherits: false,
+  initialValue: '0.5'
+});
+
+export const content = style({
+  opacity: opacityVar
+});
+```
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
index b446bfc3d..da3ef2df2 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
index 241f9bec4..22fad8416 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
index b446bfc3d..da3ef2df2 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .styles_container__jteyb11 {
   display: flex;
   flex-direction: column;
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
index 241f9bec4..22fad8416 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
index 01fd9157e..3a8c7d088 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+}
 .styles_container__blj6yb1 {
   display: flex;
   flex-direction: column;
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
index 852cfaca5..482c65cc7 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+}
 .blj6yb1 {
   display: flex;
   flex-direction: column;
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
index 241f9bec4..22fad8416 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
@@ -44,6 +44,10 @@ button {
   src: local("Comic Sans MS");
   font-family: MyGlobalComicSans;
 }
+@property --jteyb14 {
+  syntax: "<number>";
+  inherits: false;
+}
 .jteyb11 {
   display: flex;
   flex-direction: column;

From 0e1efb72a2b6691019278dad395500b5e4367f7c Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Sat, 28 Sep 2024 20:30:46 +0200
Subject: [PATCH 08/13] make initial value required for non * syntax

---
 fixtures/themed/src/styles.css.ts             |  3 ++-
 packages/css/src/vars.ts                      |  6 +++++-
 .../__snapshots__/rollup-plugin.test.ts.snap  | 19 +++++++++++--------
 .../themed-esbuild--development.css           |  3 ++-
 .../themed-esbuild--production.css            |  3 ++-
 .../themed-esbuild-next--development.css      |  3 ++-
 .../themed-esbuild-next--production.css       |  3 ++-
 .../themed-mini-css-extract--development.css  |  3 ++-
 .../themed-mini-css-extract--production.css   |  3 ++-
 .../themed-parcel--development.css            |  7 ++++++-
 .../themed-parcel--production.css             |  7 ++++++-
 .../themed-vite--production.css               |  3 ++-
 12 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/fixtures/themed/src/styles.css.ts b/fixtures/themed/src/styles.css.ts
index b56a797d1..8e15a8806 100644
--- a/fixtures/themed/src/styles.css.ts
+++ b/fixtures/themed/src/styles.css.ts
@@ -67,12 +67,13 @@ globalStyle(`body ${iDunno}:after`, {
 const blankVar1 = createVar({
   syntax: '<number>',
   inherits: false,
+  initialValue: '0.5',
 });
 const blankVar2 = createVar();
 
 export const opacity = styleVariants(
   {
-    '1/2': fallbackVar(blankVar1, '0.5'),
+    '1/2': blankVar1,
     '1/4': fallbackVar(blankVar1, blankVar2, '0.25'),
   },
   (value) => ({
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index 18ca93c1c..75d243111 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -17,9 +17,13 @@ import { PropertySyntax } from './types';
 import { appendCss } from './adapter';
 
 type VarDeclaration = {
-  syntax: PropertySyntax | Array<PropertySyntax>;
+  syntax: '*';
   inherits: boolean;
   initialValue?: string
+} | {
+  syntax: Omit<PropertySyntax, | '*'> | Array<PropertySyntax>;
+  inherits: boolean;
+  initialValue: string
 };
 
 const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
diff --git a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
index d80f873ea..238abf19f 100644
--- a/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
+++ b/packages/rollup-plugin/test/__snapshots__/rollup-plugin.test.ts.snap
@@ -15,7 +15,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
+    "assets/src/styles.css.ts.vanilla-BfisGtko.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -27,6 +27,7 @@ body, button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -52,7 +53,7 @@ body .styles_iDunno__jteyb12:after {
   content: 'I am content';
 }
 html .styles_opacity_1\\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
@@ -198,7 +199,7 @@ export { shadow };
     "src/styles.css.js",
     "import './../assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
 import './../assets/src/themes.css.ts.vanilla-DMMXGwB8.css';
-import './../assets/src/styles.css.ts.vanilla-BPHcBqBf.css';
+import './../assets/src/styles.css.ts.vanilla-BfisGtko.css';
 
 var button = "styles_button__jteyb13 shared_shadow__4dtfen0 styles_iDunno__jteyb12";
 var container = "styles_container__jteyb11";
@@ -389,6 +390,7 @@ export { button, container, opacity };
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -414,7 +416,7 @@ body .styles_iDunno__jteyb12:after {
   content: 'I am content';
 }
 html .styles_opacity_1\\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
@@ -519,7 +521,7 @@ exports[`rollup-plugin should build with sourcemaps 1`] = `
     "",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
+    "assets/src/styles.css.ts.vanilla-BfisGtko.css",
     "",
   ],
   [
@@ -584,7 +586,7 @@ body, button {
 }",
   ],
   [
-    "assets/src/styles.css.ts.vanilla-BPHcBqBf.css",
+    "assets/src/styles.css.ts.vanilla-BfisGtko.css",
     "@font-face {
   src: local("Impact");
   font-family: "styles_impact__jteyb10";
@@ -596,6 +598,7 @@ body, button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -621,7 +624,7 @@ body .styles_iDunno__jteyb12:after {
   content: 'I am content';
 }
 html .styles_opacity_1\\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
@@ -675,7 +678,7 @@ html .styles_opacity_1\\/4__jteyb17 {
     "import { assignInlineVars, setElementVars } from '@vanilla-extract/dynamic';
 import './assets/src/themes.css.ts.vanilla-DMMXGwB8.css';
 import './assets/src/shared.css.ts.vanilla-G_Gyt4-e.css';
-import './assets/src/styles.css.ts.vanilla-BPHcBqBf.css';
+import './assets/src/styles.css.ts.vanilla-BfisGtko.css';
 
 var altTheme = "themes_altTheme__cvta176";
 var responsiveTheme = "themes_responsiveTheme__cvta177";
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
index da3ef2df2..273f8f762 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--development.css
@@ -47,6 +47,7 @@ button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -78,7 +79,7 @@ body .styles_iDunno__jteyb12:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
index 22fad8416..e97aaefca 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild--production.css
@@ -47,6 +47,7 @@ button {
 @property --jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .jteyb11 {
   display: flex;
@@ -72,7 +73,7 @@ body .jteyb12:after {
   content: "I am content";
 }
 html .jteyb16 {
-  opacity: var(--jteyb14, 0.5);
+  opacity: var(--jteyb14);
 }
 html .jteyb17 {
   opacity: var(--jteyb14, var(--jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
index da3ef2df2..273f8f762 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--development.css
@@ -47,6 +47,7 @@ button {
 @property --blankVar1__jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .styles_container__jteyb11 {
   display: flex;
@@ -78,7 +79,7 @@ body .styles_iDunno__jteyb12:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__jteyb16 {
-  opacity: var(--blankVar1__jteyb14, 0.5);
+  opacity: var(--blankVar1__jteyb14);
 }
 html .styles_opacity_1\/4__jteyb17 {
   opacity: var(--blankVar1__jteyb14, var(--blankVar2__jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
index 22fad8416..e97aaefca 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-esbuild-next--production.css
@@ -47,6 +47,7 @@ button {
 @property --jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .jteyb11 {
   display: flex;
@@ -72,7 +73,7 @@ body .jteyb12:after {
   content: "I am content";
 }
 html .jteyb16 {
-  opacity: var(--jteyb14, 0.5);
+  opacity: var(--jteyb14);
 }
 html .jteyb17 {
   opacity: var(--jteyb14, var(--jteyb15, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
index 3a8c7d088..a5f18bd25 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--development.css
@@ -47,6 +47,7 @@ button {
 @property --blankVar1__blj6yb4 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .styles_container__blj6yb1 {
   display: flex;
@@ -78,7 +79,7 @@ body .styles_iDunno__blj6yb2:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__blj6yb6 {
-  opacity: var(--blankVar1__blj6yb4, 0.5);
+  opacity: var(--blankVar1__blj6yb4);
 }
 html .styles_opacity_1\/4__blj6yb7 {
   opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
index 482c65cc7..7e142b0f9 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-mini-css-extract--production.css
@@ -47,6 +47,7 @@ button {
 @property --blj6yb4 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .blj6yb1 {
   display: flex;
@@ -72,7 +73,7 @@ body .blj6yb2:after {
   content: "I am content";
 }
 html .blj6yb6 {
-  opacity: var(--blj6yb4, 0.5);
+  opacity: var(--blj6yb4);
 }
 html .blj6yb7 {
   opacity: var(--blj6yb4, var(--blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
index 66d98aec1..b0ac3bab6 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--development.css
@@ -72,6 +72,11 @@ button {
   src: local(Comic Sans MS);
   font-family: MyGlobalComicSans;
 }
+@property --blankVar1__blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .styles_container__blj6yb1 {
   gap: var(--space-2__cdwe0v4);
   padding: var(--space-3__cdwe0v5);
@@ -102,7 +107,7 @@ body .styles_iDunno__blj6yb2:after {
   content: "I am content";
 }
 html .styles_opacity_1\/2__blj6yb6 {
-  opacity: var(--blankVar1__blj6yb4, 0.5);
+  opacity: var(--blankVar1__blj6yb4);
 }
 html .styles_opacity_1\/4__blj6yb7 {
   opacity: var(--blankVar1__blj6yb4, var(--blankVar2__blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
index 1bea106f8..a9b31f76e 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-parcel--production.css
@@ -72,6 +72,11 @@ button {
   src: local(Comic Sans MS);
   font-family: MyGlobalComicSans;
 }
+@property --blj6yb4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0.5;
+}
 .blj6yb1 {
   gap: var(--cdwe0v4);
   padding: var(--cdwe0v5);
@@ -96,7 +101,7 @@ body .blj6yb2:after {
   content: "I am content";
 }
 html .blj6yb6 {
-  opacity: var(--blj6yb4, 0.5);
+  opacity: var(--blj6yb4);
 }
 html .blj6yb7 {
   opacity: var(--blj6yb4, var(--blj6yb5, 0.25));
diff --git a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
index 22fad8416..e97aaefca 100644
--- a/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
+++ b/tests/e2e/themed.playwright.ts-snapshots/themed-vite--production.css
@@ -47,6 +47,7 @@ button {
 @property --jteyb14 {
   syntax: "<number>";
   inherits: false;
+  initial-value: 0.5;
 }
 .jteyb11 {
   display: flex;
@@ -72,7 +73,7 @@ body .jteyb12:after {
   content: "I am content";
 }
 html .jteyb16 {
-  opacity: var(--jteyb14, 0.5);
+  opacity: var(--jteyb14);
 }
 html .jteyb17 {
   opacity: var(--jteyb14, var(--jteyb15, 0.25));

From 2af539f36c39a8dbee265aa39646ba8451e55b1e Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Sun, 29 Sep 2024 14:20:43 +1000
Subject: [PATCH 09/13] Create poor-mirrors-care.md

---
 .changeset/poor-mirrors-care.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 .changeset/poor-mirrors-care.md

diff --git a/.changeset/poor-mirrors-care.md b/.changeset/poor-mirrors-care.md
new file mode 100644
index 000000000..50a81f780
--- /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;
+}
+```

From 2a0826b59f3e700ab37768a319a40d582181cdce Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Sun, 29 Sep 2024 14:24:48 +1000
Subject: [PATCH 10/13] Create angry-rules-tease.md

---
 .changeset/angry-rules-tease.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/angry-rules-tease.md

diff --git a/.changeset/angry-rules-tease.md b/.changeset/angry-rules-tease.md
new file mode 100644
index 000000000..6a5f7b64d
--- /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

From 8343c22b6798e30d98c6fd3d8a4dc7aba1f3d7b8 Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Sun, 29 Sep 2024 14:28:13 +1000
Subject: [PATCH 11/13] Create modern-cobras-sort.md

---
 .changeset/modern-cobras-sort.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 .changeset/modern-cobras-sort.md

diff --git a/.changeset/modern-cobras-sort.md b/.changeset/modern-cobras-sort.md
new file mode 100644
index 000000000..ed5be0941
--- /dev/null
+++ b/.changeset/modern-cobras-sort.md
@@ -0,0 +1,28 @@
+---
+"@vanilla-extract/css": patch
+---
+
+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'
+    }
+  }
+});
+```

From 5916ea4358e4e9a41d3d107d2862581e6912dc18 Mon Sep 17 00:00:00 2001
From: Adam Skoufis <askoufis@users.noreply.github.com>
Date: Sun, 29 Sep 2024 14:29:00 +1000
Subject: [PATCH 12/13] Update modern-cobras-sort.md

---
 .changeset/modern-cobras-sort.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/modern-cobras-sort.md b/.changeset/modern-cobras-sort.md
index ed5be0941..35619d0c8 100644
--- a/.changeset/modern-cobras-sort.md
+++ b/.changeset/modern-cobras-sort.md
@@ -1,5 +1,5 @@
 ---
-"@vanilla-extract/css": patch
+"@vanilla-extract/css": minor
 ---
 
 Add support for a `vars` property to steps within `keyframes` declarations

From 7601c862ccc93927734c8ce5c057cc319fdce42b Mon Sep 17 00:00:00 2001
From: Yauheni <overhawlin@gmail.com>
Date: Sun, 29 Sep 2024 12:57:27 +0200
Subject: [PATCH 13/13] address feedback

---
 examples/next/components/HelloWorld.css.ts    |  6 +-
 .../babel-plugin-debug-ids/src/index.test.ts  | 16 ++++
 packages/css/src/transformCss.test.ts         | 55 ++++++++++--
 packages/css/src/transformCss.ts              |  4 +-
 packages/css/src/types.ts                     | 38 ++++----
 packages/css/src/vars.ts                      | 88 +++++++++++++------
 site/contents.js                              |  1 +
 site/docs/global-api/create-global-var.md     | 19 +++-
 8 files changed, 170 insertions(+), 57 deletions(-)

diff --git a/examples/next/components/HelloWorld.css.ts b/examples/next/components/HelloWorld.css.ts
index 7836b1ad6..909a23c86 100644
--- a/examples/next/components/HelloWorld.css.ts
+++ b/examples/next/components/HelloWorld.css.ts
@@ -11,7 +11,7 @@ const angleKeyframes = keyframes({
   '100%': {
     vars: {
       [angle]: '360deg',
-    }
+    },
   },
 });
 
@@ -26,9 +26,9 @@ export const root = style({
     opacity: 0.8,
     color: color,
   },
-  
+
   vars: {
     [color]: '#fef',
     [angle]: fallbackVar(angle, '138deg'),
-  }
+  },
 });
diff --git a/packages/babel-plugin-debug-ids/src/index.test.ts b/packages/babel-plugin-debug-ids/src/index.test.ts
index 61eb3d87d..87da22f28 100644
--- a/packages/babel-plugin-debug-ids/src/index.test.ts
+++ b/packages/babel-plugin-debug-ids/src/index.test.ts
@@ -217,6 +217,22 @@ describe('babel plugin', () => {
     `);
   });
 
+  it('should handle typed createVar assigned to const', () => {
+    const source = `
+      import { createVar } from '@vanilla-extract/css';
+
+      const myVar = createVar({ syntax: '*', inherits: true });
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      import { createVar } from '@vanilla-extract/css';
+      const myVar = createVar({
+        syntax: '*',
+        inherits: true
+      }, "myVar");
+    `);
+  });
+
   it('should handle createContainer assigned to const', () => {
     const source = `
       import { createContainer } from '@vanilla-extract/css';
diff --git a/packages/css/src/transformCss.test.ts b/packages/css/src/transformCss.test.ts
index 01cc20631..2edbc12fd 100644
--- a/packages/css/src/transformCss.test.ts
+++ b/packages/css/src/transformCss.test.ts
@@ -6,11 +6,14 @@ import { style } from './style';
 setFileScope('test');
 
 const testVar = createVar();
-const testPropertyVar = createVar({
-  syntax: '<angle>',
-  inherits: false,
-  initialValue: '0deg',
-}, 'test-property');
+const testPropertyVar = createVar(
+  {
+    syntax: '<angle>',
+    inherits: false,
+    initialValue: '0deg',
+  },
+  'test-property',
+);
 const style1 = style({});
 const style2 = style({});
 
@@ -1850,6 +1853,46 @@ describe('transformCss', () => {
     `);
   });
 
+  it('should handle animations with vars', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: ['testClass'],
+        cssObjs: [
+          {
+            type: 'keyframes',
+            name: 'myAnimation',
+            rule: {
+              from: {
+                vars: {
+                  '--my-var': 'red',
+                  [testVar]: 'green',
+                },
+              },
+              to: {
+                vars: {
+                  '--my-var': 'orange',
+                  [testVar]: 'blue',
+                },
+              },
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @keyframes myAnimation {
+        from {
+          --my-var: red;
+          --skkcyc0: green;
+        }
+        to {
+          --my-var: orange;
+          --skkcyc0: blue;
+        }
+      }
+    `);
+  });
+
   it('should handle font face', () => {
     expect(
       transformCss({
@@ -2080,7 +2123,7 @@ describe('transformCss', () => {
       }
     `);
   });
-  
+
   it('should handle complicated css properties', () => {
     expect(
       transformCss({
diff --git a/packages/css/src/transformCss.ts b/packages/css/src/transformCss.ts
index 5cb99a568..b69414fc4 100644
--- a/packages/css/src/transformCss.ts
+++ b/packages/css/src/transformCss.ts
@@ -155,11 +155,11 @@ class Stylesheet {
     }
 
     if (root.type === 'property') {
-      this.propertyRules.push(root)
+      this.propertyRules.push(root);
 
       return;
     }
-    
+
     if (root.type === 'keyframes') {
       root.rule = Object.fromEntries(
         Object.entries(root.rule).map(([keyframe, rule]) => {
diff --git a/packages/css/src/types.ts b/packages/css/src/types.ts
index 63acc8341..c04d29725 100644
--- a/packages/css/src/types.ts
+++ b/packages/css/src/types.ts
@@ -106,7 +106,7 @@ export type CSSLayerDeclaration = {
 export type CSSPropertyBlock = {
   type: 'property';
   name: string;
-  rule: AtRule.Property
+  rule: AtRule.Property;
 };
 
 export type CSS =
@@ -163,21 +163,21 @@ export type ClassNames = string | Array<ClassNames>;
 
 export type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
 
-export type PropertySyntax = 
-    | '<length>'
-    | '<number>' 
-    | '<percentage>' 
-    | '<length-percentage>' 
-    | '<color>' 
-    | '<image>' 
-    | '<url>' 
-    | '<integer>' 
-    | '<angle>' 
-    | '<time>' 
-    | '<resolution>' 
-    | '<transform-function>' 
-    | '<custom-ident>' 
-    | '<transform-list>' 
-    | '*'
-    // needs this to make TS suggestions work
-    | (string & Record<never, never>);
\ No newline at end of file
+export type PropertySyntax =
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>'
+  | '*'
+  // needs this to make TS suggestions work
+  | (string & Record<never, never>);
diff --git a/packages/css/src/vars.ts b/packages/css/src/vars.ts
index 75d243111..fcd5e1d53 100644
--- a/packages/css/src/vars.ts
+++ b/packages/css/src/vars.ts
@@ -16,52 +16,88 @@ import { generateIdentifier } from './identifier';
 import { PropertySyntax } from './types';
 import { appendCss } from './adapter';
 
-type VarDeclaration = {
-  syntax: '*';
-  inherits: boolean;
-  initialValue?: string
-} | {
-  syntax: Omit<PropertySyntax, | '*'> | Array<PropertySyntax>;
-  inherits: boolean;
-  initialValue: string
-};
-
-const buildPropertyRule = ({ syntax, inherits, initialValue }: VarDeclaration): AtRule.Property => ({
+type VarDeclaration =
+  | {
+      syntax: '*';
+      inherits: boolean;
+      initialValue?: string;
+    }
+  | {
+      syntax: Exclude<PropertySyntax, '*'> | Array<PropertySyntax>;
+      inherits: boolean;
+      initialValue: string;
+    };
+
+const buildPropertyRule = ({
+  syntax,
+  inherits,
+  initialValue,
+}: VarDeclaration): AtRule.Property => ({
   syntax: `"${Array.isArray(syntax) ? syntax.join(' | ') : syntax}"`,
   inherits: inherits ? 'true' : 'false',
-  ...(initialValue != null && { initialValue }),
-})
-
-export function createVar(declaration: VarDeclaration, debugId?: string): CSSVarFunction
-export function createVar(debugId?: string): CSSVarFunction
-export function createVar(debugIdOrDeclaration?: string | VarDeclaration, debugId?: string): CSSVarFunction {  
+  ...(initialValue != null ? { initialValue } : {}),
+});
+
+export function createVar(
+  declaration: VarDeclaration,
+  debugId?: string,
+): CSSVarFunction;
+export function createVar(debugId?: string): CSSVarFunction;
+export function createVar(
+  debugIdOrDeclaration?: string | VarDeclaration,
+  debugId?: string,
+): CSSVarFunction {
   const cssVarName = cssesc(
     generateIdentifier({
-      debugId: typeof debugIdOrDeclaration === 'string' ? debugIdOrDeclaration : debugId,
+      debugId:
+        typeof debugIdOrDeclaration === 'string'
+          ? debugIdOrDeclaration
+          : debugId,
       debugFileName: false,
     }),
     { isIdentifier: true },
   );
 
   if (debugIdOrDeclaration && typeof debugIdOrDeclaration === 'object') {
-    appendCss({ type: 'property', name: `--${cssVarName}`, rule: buildPropertyRule(debugIdOrDeclaration) }, getFileScope());
+    appendCss(
+      {
+        type: 'property',
+        name: `--${cssVarName}`,
+        rule: buildPropertyRule(debugIdOrDeclaration),
+      },
+      getFileScope(),
+    );
   }
 
   return `var(--${cssVarName})` as const;
 }
 
-export function createGlobalVar(name: string): CSSVarFunction
-export function createGlobalVar(name: string, declaration: VarDeclaration): CSSVarFunction
-export function createGlobalVar(name: string, declaration?: VarDeclaration): string {
+export function createGlobalVar(name: string): CSSVarFunction;
+export function createGlobalVar(
+  name: string,
+  declaration: VarDeclaration,
+): CSSVarFunction;
+export function createGlobalVar(
+  name: string,
+  declaration?: VarDeclaration,
+): CSSVarFunction {
   if (declaration && typeof declaration === 'object') {
-    appendCss({ type: 'property', name: `--${name}`, rule: buildPropertyRule(declaration) }, getFileScope());
+    appendCss(
+      {
+        type: 'property',
+        name: `--${name}`,
+        rule: buildPropertyRule(declaration),
+      },
+      getFileScope(),
+    );
   }
 
-
   return `var(--${name})`;
 }
 
-export function assertVarName(value: unknown): asserts value is `var(--${string})` {
+export function assertVarName(
+  value: unknown,
+): asserts value is `var(--${string})` {
   if (typeof value !== 'string' || !/^var\(--.*\)$/.test(value)) {
     throw new Error(`Invalid variable name: ${value}`);
   }
@@ -76,7 +112,7 @@ export function fallbackVar(
     if (finalValue === '') {
       finalValue = String(value);
     } else {
-      assertVarName(value)
+      assertVarName(value);
 
       finalValue = value.replace(/\)$/, `, ${finalValue})`);
     }
diff --git a/site/contents.js b/site/contents.js
index 8ff921c5c..9eea08984 100644
--- a/site/contents.js
+++ b/site/contents.js
@@ -36,6 +36,7 @@ const contents = [
       'create-global-theme',
       'create-global-theme-contract',
       'global-font-face',
+      'create-global-var',
       'global-keyframes',
       'global-layer',
     ],
diff --git a/site/docs/global-api/create-global-var.md b/site/docs/global-api/create-global-var.md
index bf617b9ad..08624d0c6 100644
--- a/site/docs/global-api/create-global-var.md
+++ b/site/docs/global-api/create-global-var.md
@@ -15,7 +15,24 @@ import {
   style
 } from '@vanilla-extract/css';
 
-const opacityVar = createVar({
+const opacityVar = createGlobalVar('opacity');
+
+export const content = style({
+  opacity: opacityVar
+});
+```
+
+It's also possible to define typed CSS properties via `createGlobalVar`:
+
+```ts compiled
+// vars.css.ts
+
+import {
+  createGlobalVar,
+  style
+} from '@vanilla-extract/css';
+
+const opacityVar = createGlobalVar('opacity', {
   syntax: '<number>',
   inherits: false,
   initialValue: '0.5'