[css-minifier]Support CSS Anchor Positioning

[yisibl]

• Spec: https://drafts.csswg.org/css-anchor-position-1/
• Shiped in Chrome 125
• Article: Introducing the CSS anchor positioning API

Example:

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

[evanw]

Since esbuild passes through all CSS it doesn't understand, your example seems like it should already work fine. What needs to be added to esbuild for you to consider esbuild to have support? Just nicer formatting for the @position-try rule? Anything else?

[yisibl]

Shorthand

position-try: <'position-try-order'>? <'position-try-options'>

Input

.foo {
  position-try-order: most-width;
  position-try-options: flip-block;
}

Expected

Note: I've kept all the whitespace for ease of reading.

.foo {
  position-try: most-width flip-block;
}

When position-anchor is present, <anchor-element> can be omitted from anchor() and anchor-size()

Input

.foo {
  position: absolute;
  position-anchor: --target-something;
  top: anchor(--target-something bottom, 20px);
  width: calc(anchor-size(--target-something block) * 2);
}
/* Demo: https://codepen.io/web-dot-dev/pen/ZEMpBzP */
.container {
    position: absolute;
    position-anchor: --handle-1;
    inset: anchor(--handle-1 top) anchor(--handle-2 right)
      anchor(--handle-2 bottom) anchor(--handle-1 left);
}

Expected

.foo {
  position: absolute;
  position-anchor: --target-something;
  top: anchor(bottom, 20px);
  width: calc(anchor-size(block) * 2);
}
.container {
    position: absolute;
    position-anchor: --handle-1;
    inset: anchor(top) anchor(--handle-2 right)
      anchor(--handle-2 bottom) anchor(left);
}

Converts keywords in anchor() to percentages.

https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-center

Refers to a position a corresponding percentage between the start and end sides, with 0% being equivalent to start and 100% being equivalent to end. center is equivalent to 50%.

The @position-try Rule

1. Only specific attributes are allowed in @position-try, if others are present we need to throw a hint.
2. Remove the extra whitespace.

Convert to anchor(inside)

Demo:

• https://codepen.io/wheatup/pen/NWeGbLj
• https://codepen.io/kizu/pen/vYwBNBO

Note: inside/outside was only implemented in Chrome 127.

Input

.foo {
  left: anchor(var(--target) left);
  right: anchor(var(--target) right);
  top: anchor(var(--target) top);
  bottom: anchor(var(--target) bottom);
}
.bar {
  inset: anchor(start) anchor(end) anchor(end) anchor(start);
}

Expected

.foo {
  inset: anchor(var(--target) inside);
}
.bar {
  inset: anchor(inside);
}

---

There are more details to discover, I've just listed the most common ones.