value-slash-space-before

Require a single space or disallow whitespace before the solidus that separates the parts of a value.

a { grid-area: 1 /2; }
/**              ↑
 * The space before this solidus */

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

The solidus this rule reads is the separator CSS spells between the numbers of a ratio (aspect-ratio: 16 / 9), the sizes of a font shorthand (font: 12px / 1.5 serif), the lines of a grid area (grid-area: 1 / 3) and the color and the alpha of a color function (rgb(0 0 0 / 50%)). A solidus inside the arguments of a math function is the division operator and is not read, and neither is one inside a url() address, a string or a comment. The solidus of a media feature is read by media-feature-slash-space-before.

Where the fix would move code into a // comment, it leaves the whitespace alone and the warning stands.

Options

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

"always"

There must always be a single space before the solidus.

The following patterns are considered problems:

a { grid-area: 1/2; }

a { grid-area: 1
      / 2; }

The following patterns are not considered problems:

a { grid-area: 1 /2; }

a { grid-area: 1 /
      2; }

"never"

There must never be whitespace before the solidus.

The following patterns are considered problems:

a { grid-area: 1 /2; }

a { grid-area: 1
      / 2; }

The following patterns are not considered problems:

a { grid-area: 1/2; }

a { grid-area: 1/
      2; }

"always-single-line"

There must always be a single space before the solidus in single-line declarations.

The following patterns are considered problems:

a { grid-area: 1/2; }

The following patterns are not considered problems:

a { grid-area: 1 /2; }

a { grid-area: 1 /
      2; }

a { grid-area: 1
      / 2; }

"never-single-line"

There must never be whitespace before the solidus in single-line declarations.

The following patterns are considered problems:

a { grid-area: 1 /2; }

The following patterns are not considered problems:

a { grid-area: 1/2; }

a { grid-area: 1/
      2; }

a { grid-area: 1
      / 2; }

Optional secondary options

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

Ignore the solidi inside the specified functions, including those of any function nested within them.

Function names are matched case-sensitively as written. Use a case-insensitive regex (e.g. "/^rgb$/i") to match other letter cases.

For example, with "always".

Given:

["rgb", "/^hsl/"]

The following patterns are not considered problems:

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

a { color: hsla(0 0% 0%/50%); }

a { color: rgb(var(--c, 1/2)/50%); }

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

Ignore the solidi in the values of the specified properties.

Property names are matched case-sensitively as written. Use a case-insensitive regex (e.g. "/^grid-area$/i") to match other letter cases.

For example, with "always".

Given:

["grid-area", "/^font/"]

The following patterns are not considered problems:

a { grid-area: 1/2; }

a { font-size: 12px/1.5; }