@terrazzo/parser 0.0.18 → 0.0.19

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @terrazzo/parser
 
+## 0.0.19
+
+### Patch Changes
+
+- [#313](https://github.com/terrazzoapp/terrazzo/pull/313) [`1408594`](https://github.com/terrazzoapp/terrazzo/commit/1408594de029f57137c936dc2ff9ab949f039215) Thanks [@drwpow](https://github.com/drwpow)! - Fix bug in gradient position aliasing
+
+- [#313](https://github.com/terrazzoapp/terrazzo/pull/313) [`1408594`](https://github.com/terrazzoapp/terrazzo/commit/1408594de029f57137c936dc2ff9ab949f039215) Thanks [@drwpow](https://github.com/drwpow)! - Improve alias type validation
+
 ## 0.0.18
 
 ### Patch Changes

package/logger.js

@@ -25,8 +25,12 @@ export function formatMessage(entry, severity) {
   }
   if (entry.src) {
     const start = entry.node?.loc?.start;
-    // note: strip "file://" protocol, but not href
-    message = `${message}\n\n${entry.filename ? `${entry.filename.href.replace(/^file:\/\//, '')}:${start?.line ?? 0}:${start?.column ?? 0}\n\n` : ''}${codeFrameColumns(entry.src, { start }, { highlightCode: false })}`;
+    //  strip "file://" protocol, but not href
+    const loc = entry.filename
+      ? `${entry.filename?.href.replace(/^file:\/\//, '')}:${start?.line ?? 0}:${start?.column ?? 0}\n\n`
+      : '';
+    const codeFrame = codeFrameColumns(entry.src, { start }, { highlightCode: false });
+    message = `${message}\n\n${loc}${codeFrame}`;
   }
   return message;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrazzo/parser",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Parser/validator for the Design Tokens Community Group (DTCG) standard.",
   "type": "module",
   "author": {
@@ -30,7 +30,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@humanwhocodes/momoa": "^3.2.1",
+    "@humanwhocodes/momoa": "^3.2.2",
     "@types/babel__code-frame": "^7.0.6",
     "@types/culori": "^2.1.1",
     "culori": "^4.0.1",
@@ -38,7 +38,7 @@
     "merge-anything": "^5.1.7",
     "picocolors": "^1.1.0",
     "wildcard-match": "^5.1.3",
-    "yaml": "^2.5.1",
+    "yaml": "^2.6.0",
     "@terrazzo/token-tools": "^0.0.9"
   },
   "devDependencies": {

package/parse/index.js

@@ -131,7 +131,12 @@ export default async function parse(
       if (mode === '.') {
         continue; // skip shadow of root value
       }
-      applyAliases(tokens[id].mode[mode], { tokens, node: tokens[id].mode[mode].source.node, logger });
+      applyAliases(tokens[id].mode[mode], {
+        tokens,
+        node: tokens[id].mode[mode].source.node,
+        logger,
+        src: sources[tokens[id].source.loc]?.src,
+      });
     }
   }
   logger.debug({
@@ -419,10 +424,10 @@ export function maybeJSONString(input) {
 export function resolveAlias(alias, { tokens, logger, filename, src, node, scanned = [] }) {
   const { id } = parseAlias(alias);
   if (!tokens[id]) {
-    logger.error({ message: `Alias "${alias}" not found`, filename, src, node });
+    logger.error({ message: `Alias "${alias}" not found.`, filename, src, node });
   }
   if (scanned.includes(id)) {
-    logger.error({ message: `Circular alias detected from "${alias}"`, filename, src, node });
+    logger.error({ message: `Circular alias detected from "${alias}".`, filename, src, node });
   }
   const token = tokens[id];
   if (!isAlias(token.$value)) {
@@ -431,8 +436,43 @@ export function resolveAlias(alias, { tokens, logger, filename, src, node, scann
   return resolveAlias(token.$value, { tokens, logger, filename, node, src, scanned: [...scanned, id] });
 }
 
+/** Throw error if resolved alias for composite properties doesn’t match expected $type. */
+const COMPOSITE_TYPE_VALUES = {
+  border: {
+    color: ['color'],
+    width: ['dimension'],
+    strokeStyle: ['strokeStyle'],
+  },
+  gradient: {
+    color: ['color'],
+    position: ['number'],
+  },
+  shadow: {
+    color: ['color'],
+    position: ['dimension'],
+  },
+  strokeStyle: {
+    dashArray: ['dimension'],
+  },
+  transition: {
+    duration: ['duration'],
+    delay: ['duration'],
+    timingFunction: ['cubicBezier'],
+  },
+  typography: {
+    fontFamily: ['fontFamily'],
+    fontSize: ['dimension'],
+    fontWeight: ['fontWeight'],
+    letterSpacing: ['dimension'],
+    lineHeight: ['dimension', 'number'],
+  },
+};
+
 /** Resolve aliases, update values, and mutate `token` to add `aliasOf` / `partialAliasOf` */
 function applyAliases(token, { tokens, logger, filename, src, node }) {
+  const $valueNode = (node.type === 'Object' && node.members.find((m) => m.name.value === '$value')?.value) || node;
+  const expectedAliasTypes = COMPOSITE_TYPE_VALUES[token.$type];
+
   // handle simple aliases
   if (isAlias(token.$value)) {
     const aliasOfID = resolveAlias(token.$value, { tokens, logger, filename, node, src });
@@ -441,15 +481,16 @@ function applyAliases(token, { tokens, logger, filename, src, node }) {
     token.aliasOf = aliasOfID;
     token.$value = aliasOf.mode[aliasMode]?.$value || aliasOf.$value;
     if (token.$type && token.$type !== aliasOf.$type) {
-      logger.warn({
-        message: `Token ${token.id} has $type "${token.$type}" but aliased ${aliasOfID} of $type "${aliasOf.$type}"`,
-        node,
+      logger.error({
+        message: `Invalid alias: expected $type: "${token.$type}", received $type: "${aliasOf.$type}".`,
+        node: $valueNode,
+        filename,
+        src,
       });
-      token.$type = aliasOf.$type;
-    } else {
-      token.$type = aliasOf.$type;
     }
+    token.$type = aliasOf.$type;
   }
+
   // handle aliases within array values (e.g. cubicBezier, gradient)
   else if (Array.isArray(token.$value)) {
     // some arrays are primitives, some are objects. handle both
@@ -473,8 +514,20 @@ function applyAliases(token, { tokens, logger, filename, src, node }) {
             }
             const aliasOfID = resolveAlias(token.$value[i][property], { tokens, logger, filename, node, src });
             const { id: aliasID, mode: aliasMode } = parseAlias(token.$value[i][property]);
+            const aliasToken = tokens[aliasOfID];
+
+            if (expectedAliasTypes?.[property] && !expectedAliasTypes[property].includes(aliasToken.$type)) {
+              const elementNode = $valueNode.elements[i].value;
+              logger.error({
+                message: `Invalid alias: expected $type: "${expectedAliasTypes[property].join('" or "')}", received $type: "${aliasToken.$type}".`,
+                node: elementNode.members.find((m) => m.name.value === property).value,
+                filename,
+                src,
+              });
+            }
+
             token.partialAliasOf[i][property] = aliasID; // also keep the shallow alias here, too!
-            token.$value[i][property] = tokens[aliasOfID].mode[aliasMode]?.$value || tokens[aliasOfID].$value;
+            token.$value[i][property] = aliasToken.mode[aliasMode]?.$value || aliasToken.$value;
           }
         }
       }
@@ -494,8 +547,18 @@ function applyAliases(token, { tokens, logger, filename, src, node }) {
         const aliasOfID = resolveAlias(token.$value[property], { tokens, logger, filename, node, src });
         const { id: aliasID, mode: aliasMode } = parseAlias(token.$value[property]);
         token.partialAliasOf[property] = aliasID; // keep the shallow alias!
-        token.$value[property] = tokens[aliasOfID].mode[aliasMode]?.$value || tokens[aliasOfID].$value;
+        const aliasToken = tokens[aliasOfID];
+        if (expectedAliasTypes?.[property] && !expectedAliasTypes[property].includes(aliasToken.$type)) {
+          logger.error({
+            message: `Invalid alias: expected $type: "${expectedAliasTypes[property].join('" or "')}", received $type: "${aliasToken.$type}".`,
+            node: $valueNode.members.find((m) => m.name.value === property).value,
+            filename,
+            src,
+          });
+        }
+        token.$value[property] = aliasToken.mode[aliasMode]?.$value || aliasToken.$value;
       }
+
       // strokeStyle has an array within an object
       else if (Array.isArray(token.$value[property])) {
         for (let i = 0; i < token.$value[property].length; i++) {
@@ -509,6 +572,16 @@ function applyAliases(token, { tokens, logger, filename, src, node }) {
             }
             const { id: aliasID, mode: aliasMode } = parseAlias(token.$value[property][i]);
             token.partialAliasOf[property][i] = aliasID; // keep the shallow alias!
+            const aliasToken = tokens[aliasOfID];
+            if (expectedAliasTypes?.[property] && !expectedAliasTypes[property].includes(aliasToken.$type)) {
+              const arrayNode = $valueNode.members.find((m) => m.name.value === property).value;
+              logger.error({
+                message: `Invalid alias: expected $type: "${expectedAliasTypes[property].join('" or "')}", received $type: "${aliasToken.$type}".`,
+                node: arrayNode.elements[i],
+                filename,
+                src,
+              });
+            }
             token.$value[property][i] = tokens[aliasOfID].mode[aliasMode]?.$value || tokens[aliasOfID].$value;
           }
         }

package/parse/normalize.js

@@ -73,7 +73,7 @@ export default function normalizeValue(token) {
       for (let i = 0; i < token.$value.length; i++) {
         const stop = { ...token.$value[i] };
         stop.color = normalizeValue({ $type: 'color', $value: stop.color });
-        if (typeof stop.position !== 'number') {
+        if (stop.position === undefined) {
           stop.position = i / (token.$value.length - 1);
         }
         output.push(stop);

package/parse/validate.d.ts

@@ -12,7 +12,7 @@ export interface ValidateOptions {
   logger: Logger;
 }
 
-export function validateAlias($value: ValueNode, node: AnyNode, options: ValidateOptions): void;
+export function validateAliasSyntax($value: ValueNode, node: AnyNode, options: ValidateOptions): void;
 
 export function validateBorder($value: ValueNode, node: AnyNode, options: ValidateOptions): void;
 

package/parse/validate.js

@@ -92,7 +92,7 @@ function validateMembersAs($value, properties, node, { filename, src, logger })
     }
     const value = members[property];
     if (isMaybeAlias(value)) {
-      validateAlias(value, node, { filename, src, logger });
+      validateAliasSyntax(value, node, { filename, src, logger });
     } else {
       validator(value, node, { filename, src, logger });
     }
@@ -100,13 +100,13 @@ function validateMembersAs($value, properties, node, { filename, src, logger })
 }
 
 /**
- * Verify an Alias token is valid
+ * Verify an Alias $value is formatted correctly
  * @param {ValueNode} $value
  * @param {AnyNode} node
  * @param {ValidateOptions} options
  * @return {void}
  */
-export function validateAlias($value, node, { filename, src, logger }) {
+export function validateAliasSyntax($value, node, { filename, src, logger }) {
   if ($value.type !== 'String' || !isAlias($value.value)) {
     logger.error({ message: `Invalid alias: ${print($value)}`, filename, node: $value, src });
   }
@@ -476,7 +476,7 @@ export function validateStrokeStyle($value, node, { filename, src, logger }) {
       for (const element of dashArray.elements) {
         if (element.value.type === 'String' && element.value.value !== '') {
           if (isMaybeAlias(element.value)) {
-            validateAlias(element.value, node, { logger, src });
+            validateAliasSyntax(element.value, node, { logger, src });
           } else {
             validateDimension(element.value, node, { logger, src });
           }
@@ -550,7 +550,7 @@ export default function validate(node, { filename, src, logger }) {
   // If top-level value is a valid alias, this is valid (no need for $type)
   // ⚠️ Important: ALL Object and Array nodes below will need to check for aliases within!
   if (isMaybeAlias($value)) {
-    validateAlias($value, node, { logger, src });
+    validateAliasSyntax($value, node, { logger, src });
     return;
   }