Skip to main content

color-function-notation

Specify modern or legacy notation for color-functions.

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

Use this rule to enforce a convention. rgb() and hsl() accept a modern syntax and a legacy syntax. The modern syntax follows the rest of CSS, where values are space-separated, the alpha value follows a slash, and commas separate repetitions only, while the legacy syntax separates every argument with commas.

Choose:

  • "modern" to follow the specification, which keeps the legacy syntax only for compatibility
  • "legacy" for older browsers, which accept only the comma-separated syntax

The fix option can automatically fix some of the problems reported by this rule when the primary option is "modern".

This rule supports 1 message argument: the configured notation.

Options​

"modern"​

Applicable color-functions must always use modern notation.

{
  "color-function-notation": "modern"
}

The following patterns are considered problems:

a { color: rgb(0, 0, 0) }
a { color: rgba(12, 122, 231, 0.2) }
a { color: hsla(270, 60%, 50%, 15%) }
a { color: hsl(.75turn, 60%, 70%) }

The following patterns are not considered problems:

a { color: rgb(0 0 0) }
a { color: rgb(12 122 231 / 0.2) }
a { color: hsl(270 60% 50% / 15%) }
a { color: hsl(.75turn 60% 70%) }

"legacy"​

Applicable color-functions must always use the legacy notation.

{
  "color-function-notation": "legacy"
}

The following patterns are considered problems:

a { color: rgb(0 0 0) }
a { color: rgb(12 122 231 / 0.2) }
a { color: hsl(270 60% 50% / 15%) }
a { color: hsl(.75turn 60% 70%) }

The following patterns are not considered problems:

a { color: rgb(0, 0, 0) }
a { color: rgba(12, 122, 231, 0.2) }
a { color: hsla(270, 60%, 50%, 15%) }
a { color: hsl(.75turn, 60%, 70%) }

Optional secondary options​

ignore​

{ "ignore": ["array", "of", "options"] }

"with-var-inside"​

Ignore color functions containing variables.

Given:

{
  "color-function-notation": ["modern", { "ignore": ["with-var-inside"] }]
}

The following patterns are not considered problems:

a {
  color: rgba(var(--foo), 0.5);
}

Given:

{
  "color-function-notation": ["legacy", { "ignore": ["with-var-inside"] }]
}

The following patterns are not considered problems:

a {
  color: rgba(var(--foo) / 0.5);
}