Add API support for CSS variables

[wise-king-sullyman]

Problem Statement

CSS variables documentation is currently only available through the UI component CSSTable, which pulls data from @patternfly/react-tokens. There is no API endpoint to fetch CSS variables data programmatically for a given component.

Goal

Create an API endpoint that exposes CSS variables data for components, enabling consumers to fetch CSS variable information programmatically.

Proposed Solution

Add a CSS variables endpoint that aligns with the existing API hierarchy:

GET /api/v6/components/accordion/css → Returns CSS variables for the Accordion component

Completion Criteria

• API Index Updates

  • Add cssPrefix field to API index structure to track pages with CSS variables
  • Store cssPrefix mapping: { 'v6::components::accordion': ['pf-v6-c-accordion'] }
  • Update generateApiIndex() to extract cssPrefix from frontmatter
  • Add getter function getCssPrefix(version, section, page) to retrieve cssPrefix for a page

• API Route Created

  • Create /api/[version]/[section]/[page]/css.ts route
  • Route uses API index to get cssPrefix for the page
  • Fetch CSS variables from @patternfly/react-tokens/dist/esm/componentIndex
  • Support multiple prefixes (return combined results when cssPrefix is an array)
  • Return JSON array of CSS variable objects
  • Each object includes: selector, property (variable name), value, and optional values array
  • Sort results consistently (by selector, then property)

• Error Handling

  • Return 404 when page doesn't have a cssPrefix in API index
  • Return empty array when prefix exists but no CSS variables are found in tokens module
  • Return appropriate error messages for invalid paths

• Documentation

  • Update src/pages/api/index.ts endpoints array with new CSS endpoint
  • Add example flow in usage section showing CSS endpoint
  • Update README.mdx with new CSS API endpoint
  • Add examples showing how to fetch CSS variables data
  • Update OpenAPI spec in /api/openapi.json.ts if applicable

• Testing

  • Add tests for API index cssPrefix extraction
  • Add tests for CSS route
  • Test single prefix lookup
  • Test error cases (missing cssPrefix, invalid paths, nonexistent prefix)

Out of Scope

• Changes to how CSS variables are extracted from @patternfly/react-tokens
• UI components for displaying CSS variables (already exists in CSSTable.tsx)
• Filtering or searching CSS variables (can be done client-side)