dianping/cat · error · ValidationError

Expected end of value but found '{}'.

Error message

Expected end of value but found '{}'.

What it means

A ValidationError from the custom validator for `border-image-slice` (grammar `[<number> | <percentage>]{1,4} && fill?`). The validator consumed a valid slice expression (up to four numbers/percentages, optionally the `fill` keyword) but the value expression still holds tokens — i.e. there is a fifth value, a second `fill`, or junk after a complete slice list.

Source

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

        while (expression.hasNext() && count < max) {
            valid = ValidationTypes.isAny(expression, numeric);
            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,

View on GitHub (pinned to e815e74d4c)

Solutions

1. Keep at most 4 numbers/percentages and at most one `fill`: `border-image-slice: 10 20 30 40 fill;`.
2. If you pasted a shorthand, split it: slice, width, outset each go to their own longhand without the `/` separators.
3. Remove duplicated `fill` keywords.

Example fix

/* before */
.btn { border-image-slice: 30 / 30; } /* Expected end of value but found '/' */

/* after */
.btn { border-image-slice: 30; border-image-width: 30; }

function sliceOk(v) {
  var parts = v.trim().split(/\s+/);
  if (parts.length > 5) return false;
  return parts.every(function (p, i) { return p === 'fill' || /^\d+(\.\d+)?%?$/.test(p); })
    && parts.filter(function (p) { return p === 'fill'; }).length <= 1
    && !/\//.test(v);
}

try {
  Validation.validate('border-image-slice', value);
} catch (ex) {
  if (ex instanceof ValidationError) { addLint(ex.line, ex.col, ex.message); return; }
  throw ex;
}

When it happens

Trigger: `border-image-slice: 1 2 3 4 5` (five values), `border-image-slice: 10% fill fill`, `border-image-slice: 30 / 30` (the `/` belongs to the border-image shorthand, not the longhand).

Common situations: Splitting a `border-image` shorthand into longhands incorrectly — the slash-separated segments (slice / width / outset) pasted wholesale into `border-image-slice`; copying MDN shorthand examples into longhand form.

Related errors

• Expected ([<number> | <percentage>]{1,4} && fill?) 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/d442db57e3e323d6. Report an issue: GitHub.