Skip to content

function-whitespace-after ​

Require or disallow whitespace after functions.

css
a { transform: translate(1, 1) scale(3); }
/**                           ↑
 *                   This space */

This rule does not check for space immediately after ) if the very next character is ,, ), / or }, allowing some of the patterns exemplified below.

Under never, whitespace in front of a + or a - used as an operator is kept, as in a { width: calc(var(--x) + 1px); }; a sign followed by a digit or a decimal point starts a number, so a { width: url(x) -1px; } is closed up. Under Sass and Less the whitespace in front of any + or - is kept, since it decides between a list and a subtraction. A * and a / are closed up under all three.

A parenthesis that opens no call is not read: a { width: calc((100% - 20px) - 1rem); } and h1 { width: (@a * 2) px; } are left as written under either option.

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

Options ​

string: "always"|"never"

"always" ​

There must always be whitespace after the function.

The following patterns are considered problems:

css
a { transform: translate(1, 1)scale(3); }

The following patterns are not considered problems:

css
a { transform: translate(1, 1) scale(3); }
css
a { transform: translate(1, 1)     scale(3); }
css
a {
  transform:
    translate(1, 1)
    scale(3);
}
css
/* the inner parentheses group an expression and open no call, and the outer ones close the value */
a { top: calc(1 * (1 + 3)); }
css
/* notice the ), with no space after the closing parenthesis */
a { padding: calc(1 * 2px), calc(2 * 5px); }

"never" ​

There must never be whitespace after the function.

The following patterns are considered problems:

css
a { transform: translate(1, 1) scale(3); }

The following patterns are not considered problems:

css
a { transform: translate(1, 1)scale(3); }

Released under the MIT License.