Skip to main content

alpha-value-notation

Specify percentage or number notation for alpha-values.

    a { color: rgb(0 0 0 / 0.5) }
/**                        ↑
 *                         This notation */

The fix option can automatically fix all of the problems reported by this rule.

The message secondary option can accept the arguments of this rule.

Options​

"number"​

Alpha-values must always use the number notation.

{
  "alpha-value-notation": "number"
}

The following patterns are considered problems:

a { opacity: 50% }
a { color: rgb(0 0 0 / 50%) }

The following patterns are not considered problems:

a { opacity: 0.5 }
a { color: rgb(0 0 0 / 0.5) }

"percentage"​

Alpha-values must always use percentage notation.

{
  "alpha-value-notation": "percentage"
}

The following patterns are considered problems:

a { opacity: 0.5 }
a { color: rgb(0 0 0 / 0.5) }

The following patterns are not considered problems:

a { opacity: 50% }
a { color: rgb(0 0 0 / 50%) }

Optional secondary options​

exceptProperties​

{ "exceptProperties": ["array", "of", "properties", "/regex/"] }

Reverse the primary option for matching properties.

Given:

{
  "alpha-value-notation": ["percentage", { "exceptProperties": ["opacity"] }]
}

The following patterns are considered problems:

a { opacity: 50% }
a { color: rgb(0 0 0 / 0.5) }

The following patterns are not considered problems:

a { opacity: 0.5 }
a { color: rgb(0 0 0 / 50%) }