Allow passing of null contract tokens in createThemeContract (#238)

.changeset/lemon-boxes-return.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+Allow passing of null contract tokens in `createThemeContract`

packages/css/src/types.ts

@@ -104,11 +104,15 @@ export interface Adapter {
   onEndFileScope: (fileScope: FileScope) => void;
 }
 
+export type NullableTokens = {
+  [key: string]: string | Tokens | null;
+};
+
 export type Tokens = {
   [key: string]: string | Tokens;
 };
 
-export type ThemeVars<ThemeContract extends Tokens> = MapLeafNodes<
+export type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<
   ThemeContract,
   CSSVarFunction
 >;

packages/css/src/vars.ts

@@ -8,7 +8,7 @@ import {
 import hash from '@emotion/hash';
 import cssesc from 'cssesc';
 
-import { ThemeVars, Tokens } from './types';
+import { NullableTokens, ThemeVars } from './types';
 import { getAndIncrementRefCounter, getFileScope } from './fileScope';
 import { validateContract } from './validateContract';
 
@@ -69,7 +69,7 @@ export function assignVars<VarContract extends Contract>(
   return varSetters;
 }
 
-export function createThemeContract<ThemeTokens extends Tokens>(
+export function createThemeContract<ThemeTokens extends NullableTokens>(
   tokens: ThemeTokens,
 ): ThemeVars<ThemeTokens> {
   return walkObject(tokens, (_value, path) => {

tests/types/type-tests.ts

@@ -0,0 +1,20 @@
+import {
+  createTheme,
+  createThemeContract,
+  createGlobalTheme,
+} from '@vanilla-extract/css';
+
+const vars = createThemeContract({
+  shouldSupportNull: null,
+  shouldSupportString: '',
+});
+
+createGlobalTheme(':root', vars, {
+  shouldSupportNull: 'some-value',
+  shouldSupportString: 'some-value',
+});
+
+createTheme(vars, {
+  shouldSupportNull: 'some-value',
+  shouldSupportString: 'some-value',
+});