From 0c93eac82732728e4dbf6b761c7ec16488ba19ee Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 15 May 2024 12:49:05 -0400
Subject: [PATCH 1/3] Support list of anchor names

---
 index.html                  | 33 ++++++++++++++++++++
 public/anchor-name-list.css | 15 ++++++++++
 src/parse.ts                | 29 ++++++++++--------
 tests/unit/parse.test.ts    | 60 +++++++++++++++++++++++++++++++++++++
 4 files changed, 124 insertions(+), 13 deletions(-)
 create mode 100644 public/anchor-name-list.css

diff --git a/index.html b/index.html
index 890339a3..4368a4be 100644
--- a/index.html
+++ b/index.html
@@ -29,6 +29,7 @@
     <link rel="stylesheet" href="/anchor-size.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" />
     <link rel="stylesheet" href="/anchor-custom-props.css" />
     <link rel="stylesheet" href="/anchor-duplicate-custom-props.css" />
     <link rel="stylesheet" href="/anchor-implicit.css" />
@@ -664,6 +665,38 @@ <h2>
   right: anchor(--my-anchor-update right);
   top: anchor(--my-anchor-update bottom);
 }</code></pre>
+    </section>
+    <section id="anchor-name-list" class="demo-item">
+      <h2>
+        <a href="#anchor-name-list" aria-hidden="true">🔗</a>
+        Use a list of anchor names
+      </h2>
+      <div style="position: relative" class="demo-elements">
+        <div id="my-anchor-name-list" class="anchor">Anchor</div>
+        <div id="my-target-name-list-a" class="target">Target A</div>
+        <div id="my-target-name-list-b" class="target">Target B</div>
+      </div>
+      <p class="note">
+        With polyfill applied: Target A is positioned at Anchor's top left
+        corner. Target B is positioned at Anchor's bottom right corner.
+      </p>
+      <pre><code class="language-css"
+>#my-anchor-name-list {
+  anchor-name: --my-anchor-name-a, --my-anchor-name-b;
+}
+
+#my-target-name-list-a {
+  position: absolute;
+  right: anchor(--my-anchor-name-a left);
+  bottom: anchor(--my-anchor-name-a top);
+}
+
+#my-target-name-list-b {
+  position: absolute;
+  left: anchor(--my-anchor-name-b right);
+  top: anchor(--my-anchor-name-b bottom);
+}
+</code></pre>
     </section>
     <section id="sponsor">
       <h2>Sponsor OddBird's OSS Work</h2>
diff --git a/public/anchor-name-list.css b/public/anchor-name-list.css
new file mode 100644
index 00000000..b9a60e45
--- /dev/null
+++ b/public/anchor-name-list.css
@@ -0,0 +1,15 @@
+#my-anchor-name-list {
+  anchor-name: --my-anchor-name-a, --my-anchor-name-b;
+}
+
+#my-target-name-list-a {
+  position: absolute;
+  right: anchor(--my-anchor-name-a left);
+  bottom: anchor(--my-anchor-name-a top);
+}
+
+#my-target-name-list-b {
+  position: absolute;
+  left: anchor(--my-anchor-name-b right);
+  top: anchor(--my-anchor-name-b bottom);
+}
diff --git a/src/parse.ts b/src/parse.ts
index 9f7ae1ba..6442f035 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -338,10 +338,12 @@ function getAnchorNameData(node: csstree.CssNode, rule?: csstree.Raw) {
     node.value.children.first &&
     rule?.value
   ) {
-    const name = (node.value.children.first as csstree.Identifier).name;
-    return { name, selector: rule.value };
+    return node.value.children.map((item) => {
+      const { name } = item as csstree.Identifier;
+      return { name, selector: rule.value };
+    });
   }
-  return {};
+  return [];
 }
 
 let anchorNames: AnchorNames = {};
@@ -559,17 +561,18 @@ export async function parseCSS(styleData: StyleData[]) {
       const rule = this.rule?.prelude as csstree.Raw | undefined;
 
       // Parse `anchor-name` declaration
-      const { name: anchorName, selector: anchorSelector } = getAnchorNameData(
-        node,
-        rule,
+      const anchorNameData = getAnchorNameData(node, rule);
+      anchorNameData.forEach(
+        ({ name: anchorName, selector: anchorSelector }) => {
+          if (anchorName && anchorSelector) {
+            if (anchorNames[anchorName]) {
+              anchorNames[anchorName].push(anchorSelector);
+            } else {
+              anchorNames[anchorName] = [anchorSelector];
+            }
+          }
+        },
       );
-      if (anchorName && anchorSelector) {
-        if (anchorNames[anchorName]) {
-          anchorNames[anchorName].push(anchorSelector);
-        } else {
-          anchorNames[anchorName] = [anchorSelector];
-        }
-      }
 
       // Parse `anchor()` function
       const {
diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts
index 29048c64..62e5a602 100644
--- a/tests/unit/parse.test.ts
+++ b/tests/unit/parse.test.ts
@@ -341,6 +341,66 @@ describe('parseCSS', () => {
     expect(rules).toEqual(expected);
   });
 
+  it('parses `anchor-name` with a list of names', async () => {
+    document.body.innerHTML =
+      '<div style="position: relative"><div id="my-anchor-name-list"></div><div id="my-target-name-list-a"></div><div id="my-target-name-list-b"></div></div>';
+    const css = getSampleCSS('anchor-name-list');
+    document.head.innerHTML = `<style>${css}</style>`;
+    const { rules } = await parseCSS([{ css }] as StyleData[]);
+    const expected = {
+      '#my-target-name-list-a': {
+        declarations: {
+          right: [
+            {
+              anchorSide: 'left',
+              anchorEl: document.getElementById('my-anchor-name-list'),
+              targetEl: document.getElementById('my-target-name-list-a'),
+              anchorName: '--my-anchor-name-a',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+          bottom: [
+            {
+              anchorSide: 'top',
+              anchorEl: document.getElementById('my-anchor-name-list'),
+              targetEl: document.getElementById('my-target-name-list-a'),
+              anchorName: '--my-anchor-name-a',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+      '#my-target-name-list-b': {
+        declarations: {
+          left: [
+            {
+              anchorSide: 'right',
+              anchorEl: document.getElementById('my-anchor-name-list'),
+              targetEl: document.getElementById('my-target-name-list-b'),
+              anchorName: '--my-anchor-name-b',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+          top: [
+            {
+              anchorSide: 'bottom',
+              anchorEl: document.getElementById('my-anchor-name-list'),
+              targetEl: document.getElementById('my-target-name-list-b'),
+              anchorName: '--my-anchor-name-b',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+    };
+
+    expect(rules).toEqual(expected);
+  });
+
   it('parses `anchor()` function (math)', async () => {
     document.body.innerHTML =
       '<div style="position: relative"><div id="my-target-math"></div><div id="my-anchor-math"></div></div>';

From 3aebaf6d47f87c974a9b1a5a5b5025befed55fd8 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 15 May 2024 12:57:18 -0400
Subject: [PATCH 2/3] Remove multiple anchor names from limitations

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index a38a7548..ff54ae9a 100644
--- a/README.md
+++ b/README.md
@@ -91,7 +91,6 @@ following:
 - anchor functions with `implicit` anchor-element
 - automatic anchor positioning: anchor functions with `inside` or `outside`
   anchor-side
-- `anchor-name` property defining multiple anchor names
 - `position-visibility` property
 - dynamically added/removed anchors or targets
 - anchors or targets in the shadow-dom

From deda1ab655f505f19d23de8af62d72b0c9c2548c Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Thu, 16 May 2024 12:06:32 -0400
Subject: [PATCH 3/3] use isEmpty

---
 src/parse.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/parse.ts b/src/parse.ts
index 6442f035..b56107d3 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -335,7 +335,7 @@ function parseAnchorFn(
 function getAnchorNameData(node: csstree.CssNode, rule?: csstree.Raw) {
   if (
     isAnchorNameDeclaration(node) &&
-    node.value.children.first &&
+    !node.value.children.isEmpty &&
     rule?.value
   ) {
     return node.value.children.map((item) => {