feat: Add typography shorthand

.changeset/bold-pandas-smell.md

@@ -0,0 +1,9 @@
+---
+"@terrazzo/plugin-sass": minor
+"@terrazzo/token-tools": minor
+"@terrazzo/plugin-css": minor
+"@terrazzo/cli": minor
+"@terrazzo/parser": minor
+---
+
+feat: add typography shorthand, improve Sass plugin

packages/parser/src/types.ts

@@ -1,8 +1,23 @@
 import type * as momoa from '@humanwhocodes/momoa';
-import type { Group, TokenNormalized, TokenNormalizedSet } from '@terrazzo/token-tools';
+import type {
+  Group,
+  TokenNormalized,
+  TokenNormalizedSet,
+  TokenTransformed,
+  TokenTransformedBase,
+} from '@terrazzo/token-tools';
 import type ytm from 'yaml-to-momoa';
 import type Logger from './logger.js';
 
+// Export some types as a convenience, because they originally came from this package
+export type {
+  Group,
+  TokenNormalized,
+  TokenNormalizedSet,
+  TokenTransformed,
+  TokenTransformedBase,
+} from '@terrazzo/token-tools';
+
 export interface PluginHookContext {
   logger: Logger;
 }
@@ -406,43 +421,6 @@ export interface ResolverSetNormalized {
   $defs: Record<string, unknown> | undefined;
 }
 
-interface TokenTransformedBase {
-  /** Original Token ID */
-  id: string;
-  /** ID unique to this format. */
-  localID?: string;
-  /**
-   * The mode of this value
-   * @default "."
-   */
-  mode: string;
-  /** The original token. */
-  token: TokenNormalized;
-  /** Arbitrary metadata set by plugins. */
-  meta?: Record<string | number | symbol, unknown> & {
-    /**
-     * Metadata for the token-listing plugin. Plugins can
-     * set this to be the name of a token as it appears in code,
-     * and the token-listing plugin will pick it up and use it.
-     */
-    'token-listing'?: { name: string | undefined };
-  };
-}
-
-/** Transformed token with a single value. Note that this may be any type! */
-export interface TokenTransformedSingleValue extends TokenTransformedBase {
-  type: 'SINGLE_VALUE';
-  value: string;
-}
-
-/** Transformed token with multiple values. Note that this may be any type! */
-export interface TokenTransformedMultiValue extends TokenTransformedBase {
-  type: 'MULTI_VALUE';
-  value: Record<string, string>;
-}
-
-export type TokenTransformed = TokenTransformedSingleValue | TokenTransformedMultiValue;
-
 export interface TransformParams {
   /** ID of an existing format */
   format: string;

packages/plugin-css/src/build/index.ts

@@ -88,19 +88,20 @@ export default function buildFormat({
 
       // multi-value token
       else if (token.type === 'MULTI_VALUE') {
-        const shorthand = generateShorthand({ $type: token.token.$type, localID });
-        if (shorthand) {
-          rootRule.declarations[token.localID ?? token.token.id] = {
-            value: shorthand,
-            description: token.token.$description,
-          };
-        }
         for (const [name, value] of Object.entries(token.value)) {
           rootRule.declarations[name === '.' ? localID : [localID, name].join('-')] = {
             value,
             description: token.token.$description,
           };
         }
+        // Note: always place shorthand after other values
+        const shorthand = generateShorthand({ token: { ...token.token, $value: token.value as any }, localID });
+        if (shorthand) {
+          rootRule.declarations[token.localID ?? token.token.id] = {
+            value: shorthand,
+            description: token.token.$description,
+          };
+        }
       }
     }
   }
@@ -166,13 +167,14 @@ export default function buildFormat({
 
       // multi-value token
       else {
-        const shorthand = generateShorthand({ $type: token.token.$type, localID });
-        if (shorthand) {
-          selectorRule.declarations[localID] = { value: shorthand, description: token.token.$description };
-        }
         for (const [name, subvalue] of Object.entries(token.value)) {
           selectorRule.declarations[`${localID}-${name}`] = { value: subvalue, description: token.token.$description };
         }
+        // Note: always generate shorthand after other declarations
+        const shorthand = generateShorthand({ token: { ...token.token, $value: token.value as any }, localID });
+        if (shorthand) {
+          selectorRule.declarations[localID] = { value: shorthand, description: token.token.$description };
+        }
       }
 
       // redeclare aliases so they have the correct scope

packages/plugin-css/src/index.ts

@@ -71,10 +71,7 @@ export default function cssPlugin(options?: CSSPluginOptions): Plugin {
             let listingName: string | undefined = localID;
 
             // Composite tokens without a shorthand won't get generated in the output, so we don't list them.
-            if (
-              typeof transformedValue === 'object' &&
-              generateShorthand({ $type: token.$type, localID }) === undefined
-            ) {
+            if (typeof transformedValue === 'object' && generateShorthand({ token, localID }) === undefined) {
               listingName = undefined;
             }
 

packages/plugin-css/src/lib.ts

@@ -125,9 +125,7 @@ function _printRule(rule: CSSRule): string {
     indent += '  ';
   }
 
-  const declarations = Object.entries(rule.declarations);
-  declarations.sort((a, b) => a[0].localeCompare(b[0], 'en-us', { numeric: true }));
-  for (const [k, d] of declarations) {
+  for (const [k, d] of Object.entries(rule.declarations)) {
     output.push(`${indent}${k}: ${d.value};${d.description ? ` /* ${d.description} */` : ''}`);
   }