Function isValidDeclaration

packages/css-data/src/parse-css-value.ts:250–354

(
  property: CssProperty,
  value: string
)

// Because csstree parser has bugs we use CSSStyleValue to validate css properties if available
// and fall back to csstree.
export const isValidDeclaration = (
  property: CssProperty,
  value: string
): boolean => {
  // Custom properties accept any valid declaration value token stream, but
  // malformed strings, URLs, comments, or blocks can invalidate the whole rule.
  if (property.startsWith("--")) {
    return isValidCustomPropertyValue(value);
  }

  // Parse once upfront for structural inspection. cssTryParseValue may return
  // null for values that the browser can still handle (csstree has known gaps),
  // so null here does NOT mean the value is invalid — we fall through to other paths.
  const ast = cssTryParseValue(value);

  // Two CSS constructs cannot be validated by any lexer path and must be accepted
  // unconditionally regardless of property:
  //   var()         — the variable's value is unknown at validation time
  //   relative color (rgb(from ...), oklch(from ...), etc.) — csstree lexer
  //                   returns the same "Mismatch" error as genuinely invalid values
  // Detecting these here also ensures var() stays valid for the keyword-only
  // properties below, which don't go through CSSStyleValue.parse.
  if (ast != null) {
    let hasUncheckedSyntax = false;
    walk(ast, (node) => {
      if (node.type === "Function") {
        if (
          node.name === "var" ||
          (node.children.first?.type === "Identifier" &&
            node.children.first.name === "from")
        ) {
          hasUncheckedSyntax = true;
        }
      }
    });
    if (hasUncheckedSyntax) {
      return true;
    }
  }

  // these properties have poor support in browser
  // though rendered styles are merged as shorthand
  // so validate artifically
  if (
    property === "white-space-collapse" ||
    property === "text-wrap-mode" ||
    property === "text-wrap-style"
  ) {
    return keywordValues[property].includes(value);
  }

  // @todo remove after csstree fixes
  // - https://github.com/csstree/csstree/issues/246
  // - https://github.com/csstree/csstree/issues/164
  if (typeof CSS !== "undefined" && CSS.supports(property, value)) {
    return true;
  }