All files / packages/design-tokens/src/style-dictionary/formats json-flat-metadata.js

100% Statements 26/26
100% Branches 16/16
100% Functions 4/4
100% Lines 26/26

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92                2x 24x   24x   1310x       1310x     1310x 1310x           304x   1x     303x 303x     303x   23x 23x     280x       304x                 1310x                 1310x 1310x 1232x     1310x     24x               2x 3x   3x         2x      
import { MODE_EXTENSION_KEY } from '../utils/constants.js';
 
/**
 * Formatter for the JSON flat metadata format
 *
 * @param {Object} dictionary
 * @returns {string}
 */
const jsonFlatMetadataFormatter = (dictionary) => {
  const flatTokens = {};
 
  dictionary.allTokens.forEach((token) => {
    // Check if this is a reference token (slds-r-*)
    const isReferenceToken = token.name && token.name.startsWith('slds-r-');
 
    // For reference tokens, use the resolved hex value
    // For other tokens, use the transformed value (with CSS vars to other tokens)
    const tokenValue = token.$value;
 
    // Extract dark mode value if present
    let cleanExtensions = undefined;
    if (
      token['$extensions']?.[MODE_EXTENSION_KEY]?.dark ||
      token.original?.$extensions?.[MODE_EXTENSION_KEY]?.dark
    ) {
      let darkValue;
 
      if (isReferenceToken) {
        // For reference tokens, use the resolved hex value for dark mode too
        darkValue = token['$extensions']?.[MODE_EXTENSION_KEY]?.dark?.$value;
      } else {
        // For non-reference tokens, check if the original dark value is a reference to slds.r.* tokens
        const originalDarkValue = token.original?.$extensions?.[MODE_EXTENSION_KEY]?.dark?.$value;
        const transformedDarkValue = token['$extensions']?.[MODE_EXTENSION_KEY]?.dark?.$value;
 
        // Only convert to CSS var if it references an slds.r.* token (not alias.* tokens)
        if (typeof originalDarkValue === 'string' && originalDarkValue.startsWith('{slds.r.')) {
          // Convert {slds.r.color.brand.90} to var(--slds-r-color-brand-90)
          const refPath = originalDarkValue.slice(1, -1).replace(/\./g, '-');
          darkValue = `var(--${refPath})`;
        } else {
          // Use the transformed value (resolved hex for alias.* or other references)
          darkValue = transformedDarkValue;
        }
      }
 
      cleanExtensions = {
        [MODE_EXTENSION_KEY]: {
          dark: {
            $value: darkValue,
          },
        },
      };
    }
 
    const tokenObject = {
      $type: token.$type,
      $value: tokenValue,
      $extensions: cleanExtensions,
      $deprecated: token.$deprecated,
    };
 
    // Add $description if available (DTCG optional key)
    // Check original first (preserves source), then transformed token as fallback
    const description = token.original?.$description || token.$description;
    if (description) {
      tokenObject.$description = description;
    }
 
    flatTokens[token.name] = tokenObject;
  });
 
  return JSON.stringify(flatTokens, null, 2);
};
 
/**
 * Style Dictionary registration for the JSON flat metadata format
 *
 * @param {StyleDictionary} StyleDictionary
 */
export const jsonFlatMetadataFormat = (StyleDictionary) => {
  StyleDictionary.registerFormat({
    name: 'json/flat-full',
    format: ({ dictionary }) => jsonFlatMetadataFormatter(dictionary),
  });
};
 
// Export internal functions for testing
export const _testExports = {
  jsonFlatMetadataFormatter,
};