css: Improve type-checking performance of CSSVarFunction (#1557)

Author: askoufis

.changeset/nervous-cougars-glow.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': patch
+---
+
+`css`: Improve type-checking performance of string literal types that include CSS variables

.changeset/two-kids-relax.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/private': patch
+---
+
+Simplify `CSSVarFunction` type to improve type-checking performance

benchmarks/README.md

@@ -0,0 +1,11 @@
+# Benchmarks
+
+This package contains scripts for benchmarking the runtime and type-checking performance of Vanilla Extract APIs.
+
+## Running a Benchmark
+
+Run a benchmark by executing it with `tsx`:
+
+```sh
+pnpm tsx ./src/css-var-string-literal.ts
+```

benchmarks/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@vanilla-extract-private/benchmarks",
+  "private": true,
+  "version": "0.0.1",
+  "author": "SEEK",
+  "license": "MIT",
+  "dependencies": {
+    "@arktype/attest": "^0.43.3",
+    "@vanilla-extract/css": "workspace:*",
+    "tsx": "^4.17.0",
+    "typescript": "^5.5.4"
+  }
+}

benchmarks/src/css-var-string-literal.ts

@@ -0,0 +1,31 @@
+import { bench } from '@arktype/attest';
+
+import { style, createVar } from '@vanilla-extract/css';
+import { setFileScope } from '@vanilla-extract/css/fileScope';
+
+setFileScope('benchmarks/css-var-string-literal.ts');
+
+const narrowVar = createVar();
+const narrowMask = `
+  repeating-linear-gradient(45deg, #0005 0 calc(1 * ${narrowVar}), black calc(2 * ${narrowVar}) calc(3 * ${narrowVar}), #0005 calc(4 * ${narrowVar}) calc(5 * ${narrowVar})) no-repeat,
+  repeating-linear-gradient(-45deg, #0005 0 calc(1 * ${narrowVar}), black calc(2 * ${narrowVar}) calc(3 * ${narrowVar}), #0005 calc(4 * ${narrowVar}) calc(5 * ${narrowVar})) no-repeat
+` as const;
+
+const broadVar = narrowVar as string;
+const broadMask = `
+  repeating-linear-gradient(45deg, #0005 0 calc(1 * ${broadVar}), black calc(2 * ${broadVar}) calc(3 * ${broadVar}), #0005 calc(4 * ${broadVar}) calc(5 * ${broadVar})) no-repeat,
+  repeating-linear-gradient(-45deg, #0005 0 calc(1 * ${broadVar}), black calc(2 * ${broadVar}) calc(3 * ${broadVar}), #0005 calc(4 * ${broadVar}) calc(5 * ${broadVar})) no-repeat
+` as const;
+
+// Baseline
+bench('broad mask', () => {
+  style({
+    mask: broadMask,
+  });
+}).types([8003, 'instantiations']);
+
+bench('narrow mask', () => {
+  style({
+    mask: narrowMask,
+  });
+}).types([8003, 'instantiations']);

benchmarks/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["src"]
+}

packages/private/src/types.ts

@@ -1,6 +1,4 @@
-export type CSSVarFunction =
-  | `var(--${string})`
-  | `var(--${string}, ${string | number})`;
+export type CSSVarFunction = `var(--${string})` | `var(--${string}, ${string})`;
 
 export type Contract = {
   [key: string]: CSSVarFunction | null | Contract;