CSS Data

/**
 * CSS properties data with complete specification metadata
 */
const properties: CSSPropertiesData;

interface CSSPropertiesData {
  [propertyName: string]: CSSPropertyEntry;
}

interface CSSPropertyEntry {
  /** CSS syntax definition for the property value */
  syntax: string;
  /** Media type where the property applies (e.g., "visual", "all") */
  media: string;
  /** Whether the property is inherited by child elements */
  inherited: boolean;
  /** How the property behaves during CSS animations */
  animationType: string;
  /** How percentage values are handled */
  percentages: string;
  /** CSS specification groups this property belongs to */
  groups: string[];
  /** Initial/default value of the property */
  initial: string;
  /** Elements this property applies to */
  appliesto: string;
  /** How the computed value is determined */
  computed: string;
  /** Grammar ordering requirements */
  order: string;
  /** Standardization status (standard, experimental, nonstandard, etc.) */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

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

// Get information about the color property
const colorProperty = css.properties.color;
console.log(colorProperty);
// Output: {
//   "syntax": "<color>",
//   "media": "visual", 
//   "inherited": true,
//   "animationType": "color",
//   "percentages": "no",
//   "groups": ["CSS Color"],
//   "initial": "Varies from one user agent to another",
//   "appliesto": "allElements",
//   "computed": "asSpecified",
//   "order": "uniqueOrder",
//   "status": "standard",
//   "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color"
// }

// Find all inherited CSS properties
const inheritedProperties = Object.entries(css.properties)
  .filter(([name, data]) => data.inherited)
  .map(([name]) => name);

// Find experimental CSS properties
const experimentalProperties = Object.entries(css.properties)
  .filter(([name, data]) => data.status === 'experimental')
  .map(([name]) => name);

/**
 * CSS functions data with syntax and specification metadata
 */
const functions: CSSFunctionsData;

interface CSSFunctionsData {
  [functionName: string]: CSSFunctionEntry;
}

interface CSSFunctionEntry {
  /** CSS syntax definition for the function */
  syntax: string;
  /** CSS specification groups this function belongs to */
  groups: string[];
  /** Standardization status */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

// Get RGB function information
const rgbFunction = css.functions['rgb()'];
console.log(rgbFunction.syntax);
// Output: "rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? )"

// Find all color-related functions
const colorFunctions = Object.entries(css.functions)
  .filter(([name, data]) => data.groups.includes('CSS Color'))
  .map(([name]) => name);

/**
 * CSS selectors data with syntax and specification metadata
 */
const selectors: CSSSelectorsData;

interface CSSSelectorsData {
  [selectorName: string]: CSSSelectorEntry;
}

interface CSSSelectorEntry {
  /** CSS syntax definition for the selector */
  syntax: string;
  /** CSS specification groups this selector belongs to */
  groups: string[];
  /** Standardization status */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

/**
 * CSS types data with syntax definitions
 */
const types: CSSTypesData;

interface CSSTypesData {
  [typeName: string]: CSSTypeEntry;
}

interface CSSTypeEntry {
  /** CSS syntax definition for the type */
  syntax: string;
  /** CSS specification groups this type belongs to */
  groups: string[];
  /** Standardization status */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

/**
 * CSS units data with categorization
 */
const units: CSSUnitsData;

interface CSSUnitsData {
  [unitName: string]: CSSUnitEntry;
}

interface CSSUnitEntry {
  /** CSS specification groups this unit belongs to */
  groups: string[];
  /** Standardization status */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

/**
 * CSS syntaxes data for grammar components
 */
const syntaxes: CSSSyntaxesData;

interface CSSSyntaxesData {
  [syntaxName: string]: CSSSyntaxEntry;
}

interface CSSSyntaxEntry {
  /** CSS syntax definition */
  syntax: string;
  /** CSS specification groups this syntax belongs to */
  groups: string[];
  /** Standardization status */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

/**
 * CSS at-rules data with descriptors and specification metadata
 */
const atRules: CSSAtRulesData;

interface CSSAtRulesData {
  [atRuleName: string]: CSSAtRuleEntry;
}

interface CSSAtRuleEntry {
  /** CSS syntax definition for the at-rule */
  syntax: string;
  /** Associated CSS interfaces (optional) */
  interfaces?: string[];
  /** CSS specification groups this at-rule belongs to */
  groups: string[];
  /** Descriptors available within this at-rule (optional) */
  descriptors?: {
    [descriptorName: string]: {
      syntax: string;
      media: string;
      percentages: string;
      computed: string;
      order: string;
      status: string;
      mdn_url?: string;
    };
  };
  /** Standardization status */
  status: string;
  /** MDN documentation URL (optional) */
  mdn_url?: string;
}

// Get @media rule information
const mediaRule = css.atRules['@media'];
console.log(mediaRule.syntax);

// Get @font-face descriptors
const fontFaceRule = css.atRules['@font-face'];
console.log(Object.keys(fontFaceRule.descriptors || {}));
// Output: ['font-family', 'src', 'font-style', 'font-weight', ...]