Skip to content

Feature request: Add unitless number properties data #1767

@lifeiscontent

Description

@lifeiscontent

Summary

It would be helpful to have a machine-readable list of CSS properties that accept unitless <number> or <integer> values (where units like px should not be added).

Use Case

CSS-in-JS libraries need to know which properties accept raw numbers without units. For example:

  • opacity: 0.5 (unitless)
  • z-index: 10 (unitless)
  • flex-grow: 2 (unitless)
  • line-height: 1.5 (unitless)

vs properties that need units:

  • width: 100width: 100px
  • margin: 10margin: 10px

Current State

The syntax field shows <number> or <integer> but doesn't clearly indicate whether the property is "unitless" in the sense that numeric values should NOT have units appended.

Proposed Enhancement

Add a unitless boolean field or similar indicator to properties that accept bare numbers:

{
  "name": "opacity",
  "syntax": "<alpha-value>",
  "unitless": true,
  ...
}

Or alternatively, a separate list of unitless properties.

Affected Properties

Common unitless properties include:

  • opacity, fill-opacity, stroke-opacity, flood-opacity, stop-opacity
  • z-index, order
  • flex-grow, flex-shrink
  • line-height (when unitless)
  • font-weight (numeric values)
  • orphans, widows
  • column-count
  • tab-size (when specifying character count)
  • And more...

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions