dianping/cat · error · ValidationError

Expected ([<number> | <percentage>]{1,4} && fill?) but found

Error message

Expected ([<number> | <percentage>]{1,4} && fill?) but found '{}'.

What it means

The total-miss counterpart of the previous error: the `border-image-slice` validator found nothing valid from the start (`valid === false`, tokens remain), so it throws `ValidationError("Expected ([<number> | <percentage>]{1,4} && fill?) but found '{part}'")`. The first token of the value is neither a number, a percentage, nor `fill`.

Source

Thrown at cat-home/src/main/webapp/assets/js/editor/worker-css.js:3673

            if (!valid) {
                break;
            }
            count++;
        }


        if (!fill) {
            ValidationTypes.isAny(expression, "fill");
        } else {
            valid = true;
        }

        if (expression.hasNext()) {
            part = expression.next();
            if (valid) {
                throw new ValidationError("Expected end of value but found '" + part + "'.", part.line, part.col);
            } else {
                throw new ValidationError("Expected ([<number> | <percentage>]{1,4} && fill?) but found '" + part + "'.", part.line, part.col);
            }
        }
    },
    "border-image-source"           : "<image> | none",
    "border-image-width"            : { multi: "<length> | <percentage> | <number> | auto", max: 4 },
    "border-left"                   : "<border-width> || <border-style> || <color>",
    "border-left-color"             : "<color> | inherit",
    "border-left-style"             : "<border-style>",
    "border-left-width"             : "<border-width>",
    "border-radius"                 : function(expression) {

        var valid   = false,
            simple = "<length> | <percentage> | inherit",
            slash   = false,
            fill    = false,
            count   = 0,
            max     = 8,
            part;

View on GitHub (pinned to e815e74d4c)

Solutions

1. Use unitless numbers or percentages for slices: `border-image-slice: 10;` or `10 20% 30 40 fill;`.
2. Move misplaced values to the right longhand: widths `10px` → `border-image-width`, keyword `stretch` → `border-image-repeat`.
3. Consult the grammar in the message and shape the value to `[<number>|<percentage>]{1,4} && fill?` exactly.

Example fix

/* before */
.card { border-image-slice: 10px; } /* Expected ([<number>|<percentage>]{1,4} && fill?) but found '10px' */

/* after */
.card { border-image-slice: 10; }

function sliceStartsValid(v) {
  var first = v.trim().split(/\s+/)[0];
  return first === 'fill' || /^\d+(\.\d+)?%?$/.test(first);
}

try {
  Validation.validate('border-image-slice', value);
} catch (ex) {
  if (/border-image|number.*percentage/.test(ex.message)) { addLint(ex.line, ex.col, ex.message); return; }
  throw ex;
}

When it happens

Trigger: `border-image-slice: fill` alone is fine, but `border-image-slice: auto`, `border-image-slice: url(x.png)`, `border-image-slice: 10px` (lengths are not allowed here — widths use lengths, slices do not), or `border-image-slice: stretch` (keyword belongs to border-image-repeat).

Common situations: Confusing slice with width/outset/repeat longhands; copying the shorthand's first segment wrongly; assuming `px` is valid because sibling longhands accept lengths.

Related errors

• Expected end of value but found '{}'.
• Expected end of value but found '{part}'.
• Expected (<'azimuth'>) but found '{}'.
• Expected (<'border-radius'>) but found '{}'.
• Expected ({}) but found '{}'.

AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/14fe18d05a0fa1e3. Report an issue: GitHub.