function-comma-space-before

Require a single space or disallow whitespace before the commas of functions.

a { transform: translate(1 ,1) }
/**                        ↑
 * The space before this comma */

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

Options

string: "always"|"never"|"always-single-line"|"never-single-line"

"always"

There must always be a single space before the commas.

The following patterns are considered problems:

a { transform: translate(1,1) }

a { transform: translate(1, 1) }

The following patterns are not considered problems:

a { transform: translate(1 ,1) }

a { transform: translate(1 , 1) }

"never"

There must never be whitespace before the commas.

The following patterns are considered problems:

a { transform: translate(1 ,1) }

a { transform: translate(1 , 1) }

The following patterns are not considered problems:

a { transform: translate(1,1) }

a { transform: translate(1, 1) }

"always-single-line"

There must always be a single space before the commas in single-line functions.

The following patterns are considered problems:

a { transform: translate(1,1) }

a { transform: translate(1, 1) }

The following patterns are not considered problems:

a { transform: translate(1 ,1) }

a { transform: translate(1 , 1) }

a {
  transform: translate(1,
    1)
}

"never-single-line"

There must never be whitespace before the commas in single-line functions.

The following patterns are considered problems:

a { transform: translate(1 ,1) }

a { transform: translate(1 , 1) }

The following patterns are not considered problems:

a { transform: translate(1,1) }

a { transform: translate(1, 1) }

a {
  transform: translate(1 ,
    1)
}

Optional secondary options

ignoreFunctions: ["/regex/", /regex/, "non-regex"]

Ignore the commas of specified functions, including the commas of any function nested within them.

Function names are matched case-sensitively as written. Use a case-insensitive regex (e.g. "/^translate$/i") to match other letter cases. This is important for custom functions like --my-function(), whose names are case-sensitive.

For example, with "always".

Given:

["translate", "/^rgba?$/"]

The following patterns are not considered problems:

a { transform: translate(1,1) }

a { color: rgba(0,0,0,0.5) }

a { transform: translate(min(1px,2px),1) }

The following patterns are still considered problems:

a { transform: scale(1,1) }

a { background: linear-gradient(45deg,rgba(0,0,0,0.5)) }