Skip to content

feat(css): add schema validation and supplementary documentation for custom properties#1057

Open
jonathandewitt-dev wants to merge 1 commit intomdn:mainfrom
jonathandewitt-dev:patch-1
Open

feat(css): add schema validation and supplementary documentation for custom properties#1057
jonathandewitt-dev wants to merge 1 commit intomdn:mainfrom
jonathandewitt-dev:patch-1

Conversation

@jonathandewitt-dev
Copy link
Copy Markdown

Description

Adds patternProperties validation to the CSS properties schema to explicitly validate custom property names (CSS variables). Custom properties matching the pattern ^-- are now recognized as valid property keys in the schema.

Motivation

The schema currently validates properties through additionalProperties, which treats every key individually without recognizing patterns. While properties.json contains a "--*" entry to document custom properties, the schema doesn't express that any key starting with -- is valid (e.g., --brand-color, --spacing-md).

This creates several problems:

  1. Semantic mismatch: The "--*" entry represents a pattern, but the schema has no pattern validation
  2. Downstream confusion: Libraries like csstype must hardcode special-case handling for custom properties because the schema doesn't express the pattern (see frenic/csstype#189)
  3. Incomplete validation: Tools consuming this schema can't programmatically validate that custom property names are structurally valid
  4. Spec alignment: The CSS spec defines custom properties as a naming pattern, not individual properties—the schema should reflect this

Adding patternProperties makes the schema semantically accurate and enables automated validation of custom properties without special-case logic.

Additional details

  • Pattern uses ^-- to match the CSS Custom Properties spec (CSS Variables Level 1)
  • The existing "--*" entry in properties.json is preserved as documentation/reference
  • Schema change is backwards compatible—only adds validation, doesn't restrict existing valid data
  • Documentation updated in css/properties.md to explain the pattern validation

Related issues and pull requests

The most notable downstream consumer is frenic/csstype#63, because several large ecosystems including giants like React all depend on the csstype library, which itself depends on mdn/data. As a result, there are StackOverflow questions and GitHub issues everywhere regarding this lack of schema recognition.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants