Allow vars to be passed as values to all style properties (#50)

Author: mattcompiles

.changeset/dry-chairs-sit.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Allow vars to be passed as values to all style properties

packages/css/src/types.ts

@@ -1,9 +1,20 @@
 import type { Contract, MapLeafNodes } from '@vanilla-extract/private';
-import type { PropertiesFallback, AtRule } from 'csstype';
+import type { PropertiesFallback, AtRule, Properties } from 'csstype';
 
 import type { SimplePseudos } from './transformCss';
 
-type BasicCSSProperties = PropertiesFallback<string | number>;
+export type CSSVarFunction =
+  | `var(--${string})`
+  | `var(--${string}, ${string | number})`;
+
+type CSSTypeProperties = PropertiesFallback<string | number>;
+
+type BasicCSSProperties = {
+  [Property in keyof CSSTypeProperties]:
+    | CSSTypeProperties[Property]
+    | CSSVarFunction
+    | Array<CSSVarFunction | Properties[Property]>;
+};
 
 export interface CSSKeyframes {
   [time: string]: BasicCSSProperties;
@@ -99,5 +110,5 @@ export type Tokens = {
 
 export type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<
   ThemeContract,
-  string
+  CSSVarFunction
 >;

packages/css/src/vars.ts

@@ -7,14 +7,10 @@ import {
 import hash from '@emotion/hash';
 import cssesc from 'cssesc';
 
+import { CSSVarFunction, ThemeVars } from './types';
 import { getAndIncrementRefCounter, getFileScope } from './fileScope';
 
-type ThemeVars<ThemeContract extends Contract> = MapLeafNodes<
-  ThemeContract,
-  string
->;
-
-export function createVar(debugId?: string) {
+export function createVar(debugId?: string): CSSVarFunction {
   // Convert ref count to base 36 for optimal hash lengths
   const refCount = getAndIncrementRefCounter().toString(36);
   const { filePath, packageName } = getFileScope();
@@ -34,10 +30,12 @@ export function createVar(debugId?: string) {
     .replace(/([A-Z])/g, '-$1')
     .toLowerCase();
 
-  return `var(--${cssVarName})`;
+  return `var(--${cssVarName})` as const;
 }
 
-export function fallbackVar(...values: [...Array<string>, string]) {
+export function fallbackVar(
+  ...values: [...Array<string>, string]
+): CSSVarFunction {
   let finalValue = '';
 
   values.reverse().forEach((value) => {
@@ -52,13 +50,13 @@ export function fallbackVar(...values: [...Array<string>, string]) {
     }
   });
 
-  return finalValue;
+  return finalValue as CSSVarFunction;
 }
 
 export function assignVars<VarContract extends Contract>(
   varContract: VarContract,
   tokens: MapLeafNodes<VarContract, string>,
-): Record<string, string> {
+): Record<CSSVarFunction, string> {
   const varSetters: { [cssVarName: string]: string } = {};
 
   /* TODO