Validate tokens match corresponding theme contracts (#84)

Author: mattcompiles

.changeset/spotty-crabs-rule.md

@@ -0,0 +1,6 @@
+---
+'@vanilla-extract/css': patch
+'@vanilla-extract/private': patch
+---
+
+Validate tokens match corresponding theme contracts

packages/css/package.json

@@ -33,10 +33,12 @@
   "dependencies": {
     "@emotion/hash": "^0.8.0",
     "@vanilla-extract/private": "^0.1.1",
+    "chalk": "^4.1.1",
     "css-selector-parser": "^1.4.1",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
-    "dedent": "^0.7.0"
+    "dedent": "^0.7.0",
+    "deep-object-diff": "^1.1.0"
   },
   "devDependencies": {
     "@types/cssesc": "^3.0.0",

packages/css/src/validateContract.test.ts

@@ -0,0 +1,135 @@
+import { validateContract } from './validateContract';
+
+describe('validateContract', () => {
+  it('should return valid when tokens match contract', () => {
+    const contract = {
+      colors: {
+        red: '',
+        green: '',
+        blue: '',
+      },
+      space: {
+        1: '',
+        2: '',
+        3: '',
+      },
+    };
+
+    expect(validateContract(contract, contract).valid).toBe(true);
+  });
+
+  it('should show nice diff for added properties', () => {
+    const contract = {
+      colors: {
+        red: '',
+        green: '',
+        blue: '',
+      },
+      space: {
+        1: '',
+        2: '',
+        3: '',
+      },
+    };
+
+    const { valid, diffString } = validateContract(contract, {
+      ...contract,
+      fontWeight: { 300: '300' },
+    });
+
+    expect(valid).toBe(false);
+    expect(diffString).toMatchInlineSnapshot(`
+      " {
+      +  fontWeight: ...,
+       }"
+    `);
+  });
+
+  it('should show nice diff for removed properties', () => {
+    const contract = {
+      colors: {
+        red: '',
+        green: '',
+        blue: '',
+      },
+      space: {
+        1: '',
+        2: '',
+        3: '',
+      },
+    };
+
+    const { valid, diffString } = validateContract(contract, {
+      ...contract,
+      colors: undefined,
+    });
+
+    expect(valid).toBe(false);
+    expect(diffString).toMatchInlineSnapshot(`
+      " {
+      -  colors: ...,
+       }"
+    `);
+  });
+
+  it('should show nice diff for mixed properties', () => {
+    const contract = {
+      colors: {
+        red: '',
+        green: '',
+        blue: '',
+      },
+      space: {
+        1: '',
+        2: '',
+        3: '',
+      },
+    };
+
+    const { valid, diffString } = validateContract(contract, {
+      ...contract,
+      colors: undefined,
+      fontWeight: { 300: '300' },
+    });
+
+    expect(valid).toBe(false);
+    expect(diffString).toMatchInlineSnapshot(`
+      " {
+      -  colors: ...,
+      +  fontWeight: ...,
+       }"
+    `);
+  });
+
+  it('should show nice diff for missing nested properties', () => {
+    const contract = {
+      colors: {
+        red: '',
+        green: '',
+        blue: '',
+      },
+      space: {
+        1: '',
+        2: '',
+        3: '',
+      },
+    };
+
+    const { valid, diffString } = validateContract(contract, {
+      ...contract,
+      colors: {
+        red: '',
+        blue: '',
+      },
+    });
+
+    expect(valid).toBe(false);
+    expect(diffString).toMatchInlineSnapshot(`
+      " {
+         colors: {
+      -    green: ...,
+         }
+       }"
+    `);
+  });
+});

packages/css/src/validateContract.ts

@@ -0,0 +1,65 @@
+import { Contract, walkObject } from '@vanilla-extract/private';
+import { diff } from 'deep-object-diff';
+import chalk from 'chalk';
+
+const normaliseObject = (obj: Contract) => walkObject(obj, () => '');
+
+export function validateContract(contract: any, tokens: any) {
+  const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
+  const valid = Object.keys(theDiff).length === 0;
+
+  return {
+    valid,
+    diffString: valid ? '' : renderDiff(contract, theDiff),
+  };
+}
+
+function diffLine(value: string, nesting: number, type?: '+' | '-') {
+  const whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
+  const line = `${type ? type : ' '}${whitespace}${value}`;
+
+  if (process.env.NODE_ENV !== 'test') {
+    if (type === '-') {
+      return chalk.red(line);
+    }
+
+    if (type === '+') {
+      return chalk.green(line);
+    }
+  }
+
+  return line;
+}
+
+function renderDiff(orig: any, diff: any, nesting: number = 0): string {
+  const lines = [];
+
+  if (nesting === 0) {
+    lines.push(diffLine('{', 0));
+  }
+
+  const innerNesting = nesting + 1;
+
+  const keys = Object.keys(diff).sort();
+
+  for (const key of keys) {
+    const value = diff[key];
+
+    if (!(key in orig)) {
+      lines.push(diffLine(`${key}: ...,`, innerNesting, '+'));
+    } else if (typeof value === 'object') {
+      lines.push(diffLine(`${key}: {`, innerNesting));
+
+      lines.push(renderDiff(orig[key], diff[key], innerNesting));
+
+      lines.push(diffLine('}', innerNesting));
+    } else {
+      lines.push(diffLine(`${key}: ...,`, innerNesting, '-'));
+    }
+  }
+
+  if (nesting === 0) {
+    lines.push(diffLine('}', 0));
+  }
+  return lines.join('\n');
+}

packages/css/src/vars.ts

@@ -9,6 +9,7 @@ import cssesc from 'cssesc';
 
 import { CSSVarFunction, ThemeVars } from './types';
 import { getAndIncrementRefCounter, getFileScope } from './fileScope';
+import { validateContract } from './validateContract';
 
 export function createVar(debugId?: string): CSSVarFunction {
   // Convert ref count to base 36 for optimal hash lengths
@@ -58,11 +59,12 @@ export function assignVars<VarContract extends Contract>(
   tokens: MapLeafNodes<VarContract, string>,
 ): Record<CSSVarFunction, string> {
   const varSetters: { [cssVarName: string]: string } = {};
+  const { valid, diffString } = validateContract(varContract, tokens);
+
+  if (!valid) {
+    throw new Error(`Tokens don't match contract.\n${diffString}`);
+  }
 
-  /* TODO
-  - validate new variables arn't set
-  - validate arrays have the same length as contract
-*/
   walkObject(tokens, (value, path) => {
     varSetters[get(varContract, path)] = String(value);
   });

packages/private/src/get.ts

@@ -2,6 +2,9 @@ export function get(obj: any, path: Array<string>) {
   let result = obj;
 
   for (const key of path) {
+    if (!(key in result)) {
+      throw new Error(`Path ${path.join(' -> ')} does not exist in object`);
+    }
     result = result[key];
   }
 

packages/webpack-plugin/package.json

@@ -29,7 +29,6 @@
     "webpack": "^4.30.0 || ^5.20.2"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^0.4.0",
     "@vanilla-extract/integration": "^0.1.0",
     "chalk": "^4.1.1",
     "debug": "^4.3.1",

yarn.lock

@@ -2816,10 +2816,12 @@ __metadata:
     "@types/cssesc": ^3.0.0
     "@types/dedent": ^0.7.0
     "@vanilla-extract/private": ^0.1.1
+    chalk: ^4.1.1
     css-selector-parser: ^1.4.1
     cssesc: ^3.0.0
     csstype: ^3.0.7
     dedent: ^0.7.0
+    deep-object-diff: ^1.1.0
   languageName: unknown
   linkType: soft
 
@@ -2887,7 +2889,6 @@ __metadata:
   resolution: "@vanilla-extract/webpack-plugin@workspace:packages/webpack-plugin"
   dependencies:
     "@types/debug": ^4.1.5
-    "@vanilla-extract/css": ^0.4.0
     "@vanilla-extract/integration": ^0.1.0
     chalk: ^4.1.1
     debug: ^4.3.1
@@ -4994,6 +4995,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-object-diff@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "deep-object-diff@npm:1.1.0"
+  checksum: 2667c43932d14c908d03f813cd2846a626bda1d320f8f1dee3c7bd00ff8058713bb8f5d995fabd617e09229cf64bf16e53579233e29da870fd27bde23d5f5b20
+  languageName: node
+  linkType: hard
+
 "deepmerge@npm:^4.2.2":
   version: 4.2.2
   resolution: "deepmerge@npm:4.2.2"