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

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions