Support list of anchor names

Author: jamesnw

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>

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);
+}

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 {

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>';