Localization Data

/**
 * CSS localization data with multi-language support
 */
const css: LocalizationData;

interface LocalizationData {
  [termKey: string]: LocalizationEntry;
}

interface LocalizationEntry {
  /** Language code mapped to localized string */
  [languageCode: string]: string;
}

const { l10n } = require('mdn-data');

// Get localized strings for "absolute length"
const absoluteLength = l10n.css.absoluteLength;
console.log(absoluteLength);
// Output: {
//   "de": "absolute {{cssxref(\"length\")}}",
//   "en-US": "absolute {{cssxref(\"length\")}}",
//   "fr": "une longueur (type {{cssxref(\"length\")}}) absolue",
//   "ja": "絶対的な{{cssxref(\"length\", \"長さ\")}}",
//   "ru": "абсолютная {{cssxref(\"length\")}}",
//   "zh-CN": "绝对 {{cssxref(\"length\")}}"
// }

// Get English translation for a specific term
const englishTerm = l10n.css.absoluteLength['en-US'];
console.log(englishTerm);
// Output: "absolute {{cssxref(\"length\")}}"

// Get all available languages for a term
const availableLanguages = Object.keys(l10n.css.absoluteLength);
console.log(availableLanguages);
// Output: ["de", "en-US", "fr", "ja", "ru", "zh-CN"]

/**
 * Helper functions for working with localization data
 */

// Get all available language codes across all terms
function getAvailableLanguages(): string[] {
  const languages = new Set();
  Object.values(l10n.css).forEach(entry => {
    Object.keys(entry).forEach(lang => languages.add(lang));
  });
  return Array.from(languages);
}

// Get all terms available in a specific language
function getTermsForLanguage(languageCode: string): string[] {
  return Object.entries(l10n.css)
    .filter(([termKey, entry]) => languageCode in entry)
    .map(([termKey]) => termKey);
}

// Get translation for a term in a specific language with fallback
function getTranslation(termKey: string, languageCode: string, fallback: string = 'en-US'): string | undefined {
  const entry = l10n.css[termKey];
  if (!entry) return undefined;
  
  return entry[languageCode] || entry[fallback];
}

/**
 * Common term categories available in the localization data
 */

// Length and measurement terms
const lengthTerms = [
  'absoluteLength',
  'absoluteLength0ForNone',
  'relativeLength',
  'lengthPercentage'
];

// Color terms
const colorTerms = [
  'color',
  'colorValue',
  'namedColor',
  'systemColor'
];

// Layout terms  
const layoutTerms = [
  'blockSize',
  'inlineSize',
  'logicalProperty',
  'physicalProperty'
];

// Time and animation terms
const timeTerms = [
  'time',
  'duration',
  'animationDuration'
];

// Find all length-related terms in Japanese
const japaneseTerms = Object.entries(l10n.css)
  .filter(([termKey, entry]) => 'ja' in entry && termKey.includes('Length'))
  .map(([termKey, entry]) => ({
    term: termKey,
    translation: entry.ja
  }));

// Get localized description for computed values
const computedValue = l10n.css.computed;
console.log(computedValue['fr']);
// Output: French translation for "computed value"

// Find terms with incomplete translations (missing specific language)
const incompleteTerms = Object.entries(l10n.css)
  .filter(([termKey, entry]) => !('zh-CN' in entry))
  .map(([termKey]) => termKey);

/**
 * Template string handling for MDN cross-references
 */

// Common template patterns in localization strings:
// {{cssxref("property")}} - Link to CSS property documentation
// {{cssxref("property", "display text")}} - Link with custom display text
// <code>value</code> - Inline code formatting

// Example of processing template strings
function processTemplateString(template: string): string {
  // This would typically be handled by MDN's rendering system
  return template
    .replace(/{{cssxref\("([^"]+)"\)}}/g, '<a href="/CSS/$1">$1</a>')
    .replace(/{{cssxref\("([^"]+)",\s*"([^"]+)"\)}}/g, '<a href="/CSS/$1">$2</a>');
}

const processed = processTemplateString(l10n.css.absoluteLength['en-US']);
// Converts: "absolute {{cssxref(\"length\")}}"
// To: "absolute <a href=\"/CSS/length\">length</a>"