dianping/cat · error · ValidationError

Expected (none | [ <flex-grow> <flex-shrink>? || <flex-basis

Error message

Expected (none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]) but found '{}'.

What it means

A custom validator for the flex shorthand in the bundled parserlib (worker-css.js:~5653) inside the ACE CSS worker. It hand-checks the CSS3 flex grammar 'none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]' because the generic matcher cannot express it; when the value doesn't fit, it throws ValidationError with this fixed message. Note the thrown position uses peek()'s coordinates while the message shows expression.value.text — minor inconsistency, but harmless.

Source

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

                            if (expression.peek()) {
                                result = ValidationTypes.isType(expression, "<flex-basis>");
                            } else {
                                result = true;
                            }
                        } else if (ValidationTypes.isType(expression, "<flex-basis>")) {
                            result = expression.peek() === null;
                        }
                    } else {
                        result = true;
                    }
                } else if (ValidationTypes.isType(expression, "<flex-basis>")) {
                    result = true;
                }
            }

            if (!result) {
                part = expression.peek();
                throw new ValidationError("Expected (none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]) but found '" + expression.value.text + "'.", part.line, part.col);
            }

            return result;
        }
    }
};

parserlib.css = {
Colors              :Colors,
Combinator          :Combinator,
Parser              :Parser,
PropertyName        :PropertyName,
PropertyValue       :PropertyValue,
PropertyValuePart   :PropertyValuePart,
MediaFeature        :MediaFeature,
MediaQuery          :MediaQuery,
Selector            :Selector,
SelectorPart        :SelectorPart,

View on GitHub (pinned to e815e74d4c)

Solutions

1. Rewrite as 'flex: none' or 'flex: <grow> <shrink>? <basis>?' with unitless numbers and a valid width for basis (e.g. 'flex: 1 1 0%').
2. Remember grow/shrink must be plain <number>; only basis takes units/keywords.
3. If your value is valid per current spec but flagged, upgrade parserlib/the worker bundle (this custom validator is old).
4. Use longhands (flex-grow, flex-shrink, flex-basis) to sidestep the shorthand validator.

Example fix

/* before */
.item { flex: 1 2 3 4; }

/* after */
.item { flex: 1 2 0%; }

// Check the flex shorthand shape before emitting:
function flexOk(v) {
  if (v === 'none' || v === 'initial' || v === 'auto') return true;
  return /^(?:\d+)(?:\s+\d+)?(?:\s+(?:0+\.?\d*%|auto|\d+(?:px|em|rem|%)))?$/.test(v.trim());
}
flexOk('1 1 0%'); // true

try {
  validateProperty('flex', value);
} catch (ex) {
  if (ex instanceof ValidationError) { collect(ex); } else throw ex;
}

When it happens

Trigger: Invalid flex shorthand such as 'flex: 1 2 3 4' (too many numbers), 'flex: none 1', 'flex: auto red', or 'flex: 0 0' (two numbers but basis missing is fine — 'flex: 0 0' is actually two numbers... only invalid shapes throw). Any sequence that is neither the keyword 'none' nor number(s) optionally followed by a width keyword/length.

Common situations: Learning the 1-3 component flex syntax ('flex: 1' vs 'flex: 1 1 0%'), using units on grow/shrink ('flex: 1px 1'), or old grammars not accepting calc()/new keywords as <flex-basis>.

Related errors

• Unknown property '{}'.
• Expected {name} at line {line}, col {col}.
• Expected end of value but found '{part}'.
• Expected (<'azimuth'>) but found '{}'.
• Expected end of value but found '{}'.

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