@vanilla-extract/css - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

 # @vanilla-extract/css
 
+## 0.4.2
+
+### Patch Changes
+
+- [#84](https://github.com/seek-oss/vanilla-extract/pull/84) [`0bc4e0a`](https://github.com/seek-oss/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Validate tokens match corresponding theme contracts
+
+- Updated dependencies [[`0bc4e0a`](https://github.com/seek-oss/vanilla-extract/commit/0bc4e0a164e9167e0356557f8feee42d7889d4b1)]:
+  - @vanilla-extract/private@0.1.2
+
 ## 0.4.1
@@ -4,0 +13,0 @@

dist/vanilla-extract-css.browser.cjs.js

@@ -11,2 +11,4 @@ 'use strict';
 var cssesc = require('cssesc');
+var deepObjectDiff = require('deep-object-diff');
+var chalk = require('chalk');
 var dedent = require('dedent');
@@ -19,2 +21,3 @@ require('css-selector-parser');
 var cssesc__default = /*#__PURE__*/_interopDefault(cssesc);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
 var dedent__default = /*#__PURE__*/_interopDefault(dedent);
@@ -129,2 +132,61 @@
 
+const normaliseObject = obj => _private.walkObject(obj, () => '');
+
+function validateContract(contract, tokens) {
+  const theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
+  const valid = Object.keys(theDiff).length === 0;
+  return {
+    valid,
+    diffString: valid ? '' : renderDiff(contract, theDiff)
+  };
+}
+
+function diffLine(value, nesting, type) {
+  const whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
+  const line = `${type ? type : ' '}${whitespace}${value}`;
+
+  if (process.env.NODE_ENV !== 'test') {
+    if (type === '-') {
+      return chalk__default['default'].red(line);
+    }
+
+    if (type === '+') {
+      return chalk__default['default'].green(line);
+    }
+  }
+
+  return line;
+}
+
+function renderDiff(orig, diff, nesting = 0) {
+  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');
+}
+
 function createVar(debugId) {
@@ -163,7 +225,11 @@ // Convert ref count to base 36 for optimal hash lengths
   const varSetters = {};
-  /* TODO
-  - validate new variables arn't set
-  - validate arrays have the same length as contract
-  */
+  const {
+    valid,
+    diffString
+  } = validateContract(varContract, tokens);
 
+  if (!valid) {
+    throw new Error(`Tokens don't match contract.\n${diffString}`);
+  }
+
   _private.walkObject(tokens, (value, path) => {
@@ -170,0 +236,0 @@ varSetters[_private.get(varContract, path)] = String(value);

dist/vanilla-extract-css.browser.esm.js

@@ -7,2 +7,4 @@ import { transformCss } from '../transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js';
 import cssesc from 'cssesc';
+import { diff } from 'deep-object-diff';
+import chalk from 'chalk';
 import dedent from 'dedent';
@@ -118,2 +120,61 @@ import 'css-selector-parser';
 
+const normaliseObject = obj => walkObject(obj, () => '');
+
+function validateContract(contract, tokens) {
+  const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
+  const valid = Object.keys(theDiff).length === 0;
+  return {
+    valid,
+    diffString: valid ? '' : renderDiff(contract, theDiff)
+  };
+}
+
+function diffLine(value, nesting, 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, diff, nesting = 0) {
+  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');
+}
+
 function createVar(debugId) {
@@ -152,7 +213,11 @@ // Convert ref count to base 36 for optimal hash lengths
   const varSetters = {};
-  /* TODO
-  - validate new variables arn't set
-  - validate arrays have the same length as contract
-  */
+  const {
+    valid,
+    diffString
+  } = validateContract(varContract, tokens);
 
+  if (!valid) {
+    throw new Error(`Tokens don't match contract.\n${diffString}`);
+  }
+
   walkObject(tokens, (value, path) => {
@@ -159,0 +224,0 @@ varSetters[get(varContract, path)] = String(value);

dist/vanilla-extract-css.cjs.dev.js

@@ -11,2 +11,4 @@ 'use strict';
 var cssesc = require('cssesc');
+var deepObjectDiff = require('deep-object-diff');
+var chalk = require('chalk');
 var dedent = require('dedent');
@@ -19,2 +21,3 @@ require('css-selector-parser');
 var cssesc__default = /*#__PURE__*/_interopDefault(cssesc);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
 var dedent__default = /*#__PURE__*/_interopDefault(dedent);
@@ -129,2 +132,61 @@
 
+const normaliseObject = obj => _private.walkObject(obj, () => '');
+
+function validateContract(contract, tokens) {
+  const theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
+  const valid = Object.keys(theDiff).length === 0;
+  return {
+    valid,
+    diffString: valid ? '' : renderDiff(contract, theDiff)
+  };
+}
+
+function diffLine(value, nesting, type) {
+  const whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
+  const line = `${type ? type : ' '}${whitespace}${value}`;
+
+  if (process.env.NODE_ENV !== 'test') {
+    if (type === '-') {
+      return chalk__default['default'].red(line);
+    }
+
+    if (type === '+') {
+      return chalk__default['default'].green(line);
+    }
+  }
+
+  return line;
+}
+
+function renderDiff(orig, diff, nesting = 0) {
+  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');
+}
+
 function createVar(debugId) {
@@ -163,7 +225,11 @@ // Convert ref count to base 36 for optimal hash lengths
   const varSetters = {};
-  /* TODO
-  - validate new variables arn't set
-  - validate arrays have the same length as contract
-  */
+  const {
+    valid,
+    diffString
+  } = validateContract(varContract, tokens);
 
+  if (!valid) {
+    throw new Error(`Tokens don't match contract.\n${diffString}`);
+  }
+
   _private.walkObject(tokens, (value, path) => {
@@ -170,0 +236,0 @@ varSetters[_private.get(varContract, path)] = String(value);

dist/vanilla-extract-css.cjs.prod.js

@@ -11,2 +11,4 @@ 'use strict';
 var cssesc = require('cssesc');
+var deepObjectDiff = require('deep-object-diff');
+var chalk = require('chalk');
 var dedent = require('dedent');
@@ -19,2 +21,3 @@ require('css-selector-parser');
 var cssesc__default = /*#__PURE__*/_interopDefault(cssesc);
+var chalk__default = /*#__PURE__*/_interopDefault(chalk);
 var dedent__default = /*#__PURE__*/_interopDefault(dedent);
@@ -103,2 +106,61 @@
 
+const normaliseObject = obj => _private.walkObject(obj, () => '');
+
+function validateContract(contract, tokens) {
+  const theDiff = deepObjectDiff.diff(normaliseObject(contract), normaliseObject(tokens));
+  const valid = Object.keys(theDiff).length === 0;
+  return {
+    valid,
+    diffString: valid ? '' : renderDiff(contract, theDiff)
+  };
+}
+
+function diffLine(value, nesting, type) {
+  const whitespace = [...Array(nesting).keys()].map(() => '  ').join('');
+  const line = `${type ? type : ' '}${whitespace}${value}`;
+
+  {
+    if (type === '-') {
+      return chalk__default['default'].red(line);
+    }
+
+    if (type === '+') {
+      return chalk__default['default'].green(line);
+    }
+  }
+
+  return line;
+}
+
+function renderDiff(orig, diff, nesting = 0) {
+  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');
+}
+
 function createVar(debugId) {
@@ -137,7 +199,11 @@ // Convert ref count to base 36 for optimal hash lengths
   const varSetters = {};
-  /* TODO
-  - validate new variables arn't set
-  - validate arrays have the same length as contract
-  */
+  const {
+    valid,
+    diffString
+  } = validateContract(varContract, tokens);
 
+  if (!valid) {
+    throw new Error(`Tokens don't match contract.\n${diffString}`);
+  }
+
   _private.walkObject(tokens, (value, path) => {
@@ -144,0 +210,0 @@ varSetters[_private.get(varContract, path)] = String(value);

dist/vanilla-extract-css.esm.js

@@ -7,2 +7,4 @@ import { transformCss } from '../transformCss/dist/vanilla-extract-css-transformCss.esm.js';
 import cssesc from 'cssesc';
+import { diff } from 'deep-object-diff';
+import chalk from 'chalk';
 import dedent from 'dedent';
@@ -118,2 +120,61 @@ import 'css-selector-parser';
 
+const normaliseObject = obj => walkObject(obj, () => '');
+
+function validateContract(contract, tokens) {
+  const theDiff = diff(normaliseObject(contract), normaliseObject(tokens));
+  const valid = Object.keys(theDiff).length === 0;
+  return {
+    valid,
+    diffString: valid ? '' : renderDiff(contract, theDiff)
+  };
+}
+
+function diffLine(value, nesting, 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, diff, nesting = 0) {
+  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');
+}
+
 function createVar(debugId) {
@@ -152,7 +213,11 @@ // Convert ref count to base 36 for optimal hash lengths
   const varSetters = {};
-  /* TODO
-  - validate new variables arn't set
-  - validate arrays have the same length as contract
-  */
+  const {
+    valid,
+    diffString
+  } = validateContract(varContract, tokens);
 
+  if (!valid) {
+    throw new Error(`Tokens don't match contract.\n${diffString}`);
+  }
+
   walkObject(tokens, (value, path) => {
@@ -159,0 +224,0 @@ varSetters[get(varContract, path)] = String(value);

package.json

 {
   "name": "@vanilla-extract/css",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
@@ -35,7 +35,9 @@ "sideEffects": true,
     "@emotion/hash": "^0.8.0",
-    "@vanilla-extract/private": "^0.1.1",
+    "@vanilla-extract/private": "^0.1.2",
+    "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"
   },
@@ -42,0 +44,0 @@ "devDependencies": {

README.md

@@ -90,2 +90,3 @@ # 🧁 vanilla-extract
   - [esbuild](#esbuild)
+  - [Vite](#vite)
   - [Gatsby](#gatsby)
@@ -201,2 +202,25 @@ - [API](#api)
 
+### Vite
+
+> Warning: Currently the Vite plugin doesn't rebuild files when dependent files change, e.g. updating `theme.css.ts` should rebuild `styles.css.ts` which imports `theme.css.ts`. This is a limitation in the Vite Plugin API that will hopefully be resolved soon. You can track the Vite issue here: https://github.com/vitejs/vite/issues/3216
+
+1. Install the dependencies.
+
+```bash
+$ npm install @vanilla-extract/css @vanilla-extract/vite-plugin
+```
+
+2. Add the [Vite](https://vitejs.dev/) plugin to your Vite config.
+
+```js
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+// vite.config.js
+export default {
+  plugins: [vanillaExtractPlugin()]
+}
+```
+
+> Please note: There are currently no automatic readable class names during development. However, you can still manually provide a debug ID as the last argument to functions that generate scoped styles, e.g. `export const className = style({ ... }, 'className');`
+
 ### Gatsby
@@ -203,0 +227,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

161207

increased by6.47%

Number of package files

48

increased by2.13%

Lines of code

3812

increased by7.38%

Number of lines in readme file

763

increased by3.25%

Worsened metrics

Dependency count

8

increased by33.33%

Number of low supply chain risk alerts

16

increased by33.33%

Dependency changes

• + Addedchalk@^4.1.1

• + Addeddeep-object-diff@^1.1.0

• + Addedansi-styles@4.3.0(transitive)

• + Addedchalk@4.1.2(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addeddeep-object-diff@1.1.9(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedsupports-color@7.2.0(transitive)

• Updated@vanilla-extract/private@^0.1.2