Summary

container-type: anchored (Chrome 143+) and @container anchored(fallback: ...) fail to parse.

Input

.popover {
  container-type: anchored;
  position-try-fallbacks: flip-block;
}

@container anchored(fallback: flip-block) {
  .popover-arrow {
    inset-block-start: auto;
    inset-block-end: calc(-0.5rem + 1px);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
  }
}

Error

Unexpected token Function("anchored")

Context

container-type: anchored enables anchor fallback detection on positioned elements. @container anchored(fallback: <try-fallback>) queries which position-try-fallbacks option was chosen, allowing styles (e.g. arrow direction) to adapt.

• Spec: https://drafts.csswg.org/css-anchor-position-1/#container-queries
• Chrome status: https://chromestatus.com/feature/5196024964833280
• Shipping in Chrome 143

This blocks all Turbopack-based Next.js apps from using anchored container queries since Turbopack uses lightningcss for CSS parsing.