value-slash-newline-before

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

a { grid-template: "a a" 1fr
      / 1fr 1fr; }
/**   ↑
 * The newline before this solidus */

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

This rule reads the solidus value-slash-space-before reads. The two rules divide a declaration between them the way the value-list-comma-* rules do: this one under always-multi-line or never-multi-line speaks of a declaration spanning lines, and the space rule under always-single-line or never-single-line of one on a single line.

The fix writes the newline over the whitespace in front of the solidus; the indentation of the new line is the indentation rule's to write. Where the fix would move code into a // comment, it leaves the whitespace alone and the warning stands.

Options

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

"always"

There must always be a newline 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; }

"always-multi-line"

There must always be a newline before the solidus in multi-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; }

"never-multi-line"

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

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

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"]

The following patterns are not considered problems:

a { color: rgb(0 0 0 / 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-/"]

The following patterns are not considered problems:

a { grid-area: 1 / 2; }