function-comma-newline-before

Require a newline or disallow whitespace before the commas of functions.

  a { transform: translate(1
    , 1) }
/** ↑
 * This comma */

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

Options

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

"always"

There must always be a newline before the commas.

The following patterns are considered problems:

a { transform: translate(1,1) }

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-multi-line"

There must always be a newline before the commas in multi-line functions.

The following patterns are considered problems:

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)
}

a {
  transform: translate(1
    , 1)
}

"never-multi-line"

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

The following patterns are considered problems:

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)) }