prettier/prettier · error · Error

Mixed descriptor in srcset is not supported

Error message

Mixed descriptor in srcset is not supported

What it means

Thrown by `printSrcset` when an `<img srcset>` or `<source srcset>` value mixes descriptor types (e.g. width `w` and pixel density `x`, or `w` and `h`) across its candidates. Prettier aligns srcset columns by a single descriptor kind, so mixed descriptors have no canonical layout and are rejected instead of mis-formatted.

Source

Thrown at src/language-html/embed/srcset.js:33

const SRCSET_UNITS = { width: "w", height: "h", density: "x" };
const SRCSET_TYPES = Object.keys(SRCSET_UNITS);

/** @type {AttributeValuePrint} */
function printSrcset(
  textToDoc,
  print,
  path,
  /* , options*/
) {
  const value = getUnescapedAttributeValue(path.node);
  const srcset = parseSrcset(value);
  const types = SRCSET_TYPES.filter((type) =>
    srcset.some((candidate) => Object.hasOwn(candidate, type)),
  );

  if (types.length > 1) {
    throw new Error("Mixed descriptor in srcset is not supported");
  }

  const [key] = types;
  const unit = SRCSET_UNITS[key];

  const urls = srcset.map((src) => src.source.value);
  const maxUrlLength = Math.max(...urls.map((url) => url.length));

  const descriptors = srcset.map((src) =>
    src[key] ? String(src[key].value) : "",
  );
  const descriptorLeftLengths = descriptors.map((descriptor) => {
    const index = descriptor.indexOf(".");
    return index === -1 ? descriptor.length : index;
  });
  const maxDescriptorLeftLength = Math.max(...descriptorLeftLengths);

  return printExpand(

View on GitHub (pinned to 315f281982)

Solutions

1. Edit the srcset to use a single descriptor kind (all `w`, all `x`, or all `h`).
2. Use `1x`/`2x` density descriptors OR `w` descriptors consistently across all candidates.
3. Run the markup through an HTML validator before formatting.

Example fix

<!-- before -->
<img srcset="a.jpg 1x, b.jpg 2w" src="a.jpg">
<!-- after -->
<img srcset="a.jpg 1x, b.jpg 2x" src="a.jpg">

// Validate srcset descriptor uniformity before formatting
function checkSrcset(value) {
  const candidates = value.split(',').map(s => s.trim());
  const kinds = new Set();
  for (const c of candidates) {
    const m = c.match(/\s+([0-9.]+)(w|h|x)$/);
    if (m) kinds.add(m[1].endsWith('w') ? 'w' : m[1].endsWith('h') ? 'h' : 'x');
  }
  if (kinds.size > 1) throw new Error('Mixed srcset descriptors');
}

When it happens

Trigger: Formatting HTML containing `<img srcset="a.jpg 1x, b.jpg 2w">` or any srcset where `SRCSET_TYPES` (`width`, `height`, `density`) yields more than one type after filtering the parsed candidates.

Common situations: Hand-written srcsets that combine `w` and `x` descriptors by mistake; copy-pasted responsive markup from design tools; legacy markup predating the srcset spec.

Related errors

• Unexpected HTML node type: ${node.type}.
• Unexpected PostCSS node type: ${node.type}.
• Unexpected Graphql node kind: ${node.kind}.
• Unexpected Handlebars node type: ${node.type}.
• Unexpected Angular node type: ${node.type}.

AI-assisted analysis of prettier/prettier@315f281982 (2026-08-03). Data as JSON: /data/errors/9141e57869909b56.json. Report an issue: GitHub.