oddbird · jamesnw · Apr 7, 2025 · Apr 4, 2025 · Apr 4, 2025 · Apr 7, 2025
diff --git a/index.html b/index.html
@@ -32,6 +32,7 @@
     <link rel="stylesheet" href="/position-anchor.css" />
     <link rel="stylesheet" href="/anchor-scroll.css" />
     <link rel="stylesheet" href="/anchor-size.css" />
+    <link rel="stylesheet" href="/anchor-size-extended.css" />
     <link rel="stylesheet" href="/anchor-math.css" />
     <link rel="stylesheet" href="/anchor-name-custom-prop.css" />
     <link rel="stylesheet" href="/anchor-name-list.css" />
@@ -960,6 +961,37 @@ <h2>
 
 #my-target-size {
   width: anchor-size(--my-anchor width);
+}</code></pre>
+    </section>
+    <section
+      id="anchor-size-extended"
+      class="demo-item"
+      style="position: relative"
+    >
+      <h2>
+        <a href="#anchor-size-extended" aria-hidden="true">🔗</a>
+        <code>anchor-size()</code> on margin and inset
+      </h2>
+      <div class="demo-elements">
+        <div id="my-anchor-anchor-size-extended" class="anchor">Anchor</div>
+        <div id="my-target-anchor-size-extended" class="target">Target</div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target's <code>margin</code> is the height of the
+        anchor, and its <code>right</code> inset is the width of the anchor.
+      </p>
+      <pre><code class="language-css"
+>#my-anchor-anchor-size-extended {
+  anchor-name: --my-anchor-size-extended;
+  resize: both;
+  overflow: hidden;
+}
+
+#my-target-anchor-size-extended {
+  position: absolute;
+  position-anchor: --my-anchor-size-extended;
+  right: anchor-size(width);
+  margin: anchor-size(height);
 }</code></pre>
     </section>
     <section id="anchor-update" class="demo-item">

diff --git a/public/anchor-size-extended.css b/public/anchor-size-extended.css
@@ -0,0 +1,12 @@
+#my-anchor-anchor-size-extended {
+  anchor-name: --my-anchor-size-extended;
+  resize: both;
+  overflow: hidden;
+}
+
+#my-target-anchor-size-extended {
+  position: absolute;
+  position-anchor: --my-anchor-size-extended;
+  right: anchor-size(width);
+  margin: anchor-size(height);
+}
diff --git a/src/parse.ts b/src/parse.ts
@@ -18,10 +18,12 @@ import {
 } from './dom.js';
 import { parsePositionFallbacks, type PositionTryOrder } from './fallback.js';
 import {
+  type AcceptedAnchorSizeProperty,
   type AcceptedPositionTryProperty,
   type AnchorSide,
   type AnchorSize,
   type InsetProperty,
+  isAcceptedAnchorSizeProp,
   isAnchorSide,
   isAnchorSize,
   isInsetProp,
@@ -53,10 +55,12 @@ export interface AnchorFunction {
   uuid: string;
 }
 
-// `key` is the property being declared
-// `value` is the anchor-positioning data for that property
+// - `key` is the property being declared
+// - `value` is the anchor-positioning data for that property
+// The valid properties for `anchor()` is a subset of the properties that are
+// valid for `anchor-size()`, so functional validation should be used as well.
 export type AnchorFunctionDeclaration = Partial<
-  Record<InsetProperty | SizingProperty, AnchorFunction[]>
+  Record<AcceptedAnchorSizeProperty, AnchorFunction[]>
 >;
 
 // `key` is the target element selector
@@ -228,8 +232,9 @@ function getAnchorFunctionData(node: CssNode, declaration: Declaration | null) {
       return { changed: true };
     }
     if (
-      isInsetProp(declaration.property) ||
-      isSizingProp(declaration.property)
+      (isAnchorFunction(node) && isInsetProp(declaration.property)) ||
+      (isAnchorSizeFunction(node) &&
+        isAcceptedAnchorSizeProp(declaration.property))
     ) {
       const data = parseAnchorFn(node, true);
       return { prop: declaration.property, data, changed: true };

diff --git a/src/polyfill.ts b/src/polyfill.ts
@@ -21,8 +21,8 @@ import {
   type AnchorSide,
   type AnchorSize,
   type InsetProperty,
+  isAcceptedAnchorSizeProp,
   isInsetProp,
-  isSizingProp,
   type SizingProperty,
 } from './syntax.js';
 import { transformCSS } from './transform.js';
@@ -154,9 +154,7 @@ export const getPixelValue = async ({
     return fallback;
   }
   if (anchorSize) {
-    // anchor-size() can only be assigned to sizing properties:
-    // https://drafts.csswg.org/css-anchor-1/#queries
-    if (!isSizingProp(targetProperty)) {
+    if (!isAcceptedAnchorSizeProp(targetProperty)) {
       return fallback;
     }
     // Calculate value for `anchor-size()` fn...

diff --git a/src/syntax.ts b/src/syntax.ts
@@ -92,6 +92,32 @@ export const ACCEPTED_POSITION_TRY_PROPERTIES = [
 export type AcceptedPositionTryProperty =
   (typeof ACCEPTED_POSITION_TRY_PROPERTIES)[number];
 
+export function isAcceptedPositionTryProp(
+  property: string,
+): property is AcceptedPositionTryProperty {
+  return ACCEPTED_POSITION_TRY_PROPERTIES.includes(
+    property as AcceptedPositionTryProperty,
+  );
+}
+
+// Accepted anchor-size() properties
+export const ACCEPTED_ANCHOR_SIZE_PROPERTIES = [
+  ...SIZING_PROPS,
+  ...INSET_PROPS,
+  ...MARGIN_PROPERTIES,
+] as const;
+
+export type AcceptedAnchorSizeProperty =
+  (typeof ACCEPTED_ANCHOR_SIZE_PROPERTIES)[number];
+
+export function isAcceptedAnchorSizeProp(
+  property: string,
+): property is AcceptedAnchorSizeProperty {
+  return ACCEPTED_ANCHOR_SIZE_PROPERTIES.includes(
+    property as AcceptedAnchorSizeProperty,
+  );
+}
+
 // Anchor Side properties
 export const ANCHOR_SIDES = [
   'top',