Add position-anchor

Author: jamesnw

src/parse.ts

@@ -100,6 +100,7 @@ const ANCHOR_SIDES: AnchorSideKeyword[] = [
   'center',
 ];
 
+const POSITION_ANCHOR_DATASET_KEY = 'polyfillPositionAnchorName';
 export type AnchorSide = AnchorSideKeyword | number;
 
 export type AnchorSize =
@@ -221,6 +222,10 @@ function isIdentifier(node: csstree.CssNode): node is csstree.Identifier {
   return Boolean(node.type === 'Identifier' && node.name);
 }
 
+function getDeclarationValue(node: DeclarationWithValue) {
+  return (node.value.children.first as csstree.Identifier).name;
+}
+
 function isPercentage(node: csstree.CssNode): node is csstree.Percentage {
   return Boolean(node.type === 'Percentage' && node.value);
 }
@@ -249,6 +254,12 @@ export function isBoxAlignmentProp(
   return BOX_ALIGNMENT_PROPS.includes(property as BoxAlignmentProperty);
 }
 
+function isPositionAnchorDeclaration(
+  node: csstree.CssNode,
+): node is DeclarationWithValue {
+  return node.type === 'Declaration' && node.property === 'position-anchor';
+}
+
 function parseAnchorFn(
   node: csstree.FunctionNode,
   replaceCss?: boolean,
@@ -338,7 +349,7 @@ function getAnchorNameData(node: csstree.CssNode, rule?: csstree.Raw) {
     node.value.children.first &&
     rule?.value
   ) {
-    const name = (node.value.children.first as csstree.Identifier).name;
+    const name = getDeclarationValue(node);
     return { name, selector: rule.value };
   }
   return {};
@@ -394,12 +405,25 @@ function getAnchorFunctionData(
   return {};
 }
 
+function getPositionAnchorData(node: csstree.CssNode, rule?: csstree.Raw) {
+  if (isPositionAnchorDeclaration(node) && rule?.value) {
+    const targets = document.querySelectorAll(rule.value);
+    const name = getDeclarationValue(node);
+
+    for (const targetEl of targets) {
+      (targetEl as HTMLElement).dataset[POSITION_ANCHOR_DATASET_KEY] = name;
+    }
+    return { name, selector: rule.value };
+  }
+  return {};
+}
+
 function getPositionFallbackDeclaration(
   node: csstree.Declaration,
   rule?: csstree.Raw,
 ) {
   if (isFallbackDeclaration(node) && node.value.children.first && rule?.value) {
-    const name = (node.value.children.first as csstree.Identifier).name;
+    const name = getDeclarationValue(node);
     return { name, selector: rule.value };
   }
   return {};
@@ -452,6 +476,8 @@ async function getAnchorEl(
       return await validatedForPositioning(targetEl, [
         `#${CSS.escape(anchorAttr)}`,
       ]);
+    } else if (targetEl.dataset[POSITION_ANCHOR_DATASET_KEY]) {
+      anchorName = targetEl.dataset[POSITION_ANCHOR_DATASET_KEY];
     }
   }
   const anchorSelectors = anchorName ? anchorNames[anchorName] ?? [] : [];
@@ -571,6 +597,17 @@ export async function parseCSS(styleData: StyleData[]) {
         }
       }
 
+      // Parse `position-anchor` data
+      const { name: positionAnchorName, selector: positionAnchorSelector } =
+        getPositionAnchorData(node, rule);
+      if (positionAnchorName && positionAnchorSelector) {
+        if (anchorNames[positionAnchorName]) {
+          anchorNames[positionAnchorName].push(positionAnchorSelector);
+        } else {
+          anchorNames[positionAnchorName] = [positionAnchorSelector];
+        }
+      }
+
       // Parse `anchor()` function
       const {
         prop,

tests/unit/parse.test.ts

@@ -163,6 +163,120 @@ describe('parseCSS', () => {
     expect(rules).toEqual(expected);
   });
 
+  it('parses `position-anchor` on different selector', async () => {
+    document.body.innerHTML = `
+    <div style="position: relative">
+      <div id="my-anchor"></div>
+      <div id="my-target-1" class="my-targets"></div>
+      <div id="my-target-2" class="my-targets"></div>
+    </div>`;
+    const css = `
+      #my-target-1 {
+        top: anchor(bottom);
+      }
+      #my-target-2 {
+        bottom: anchor(top);
+      }
+      .my-targets {
+        position: absolute;
+        position-anchor: --my-anchor;
+      }
+      #my-anchor {
+        anchor-name: --my-anchor;
+      }
+    `;
+    document.head.innerHTML = `<style>${css}</style>`;
+    const { rules } = await parseCSS([{ css }] as StyleData[]);
+    const expected = {
+      '#my-target-1': {
+        declarations: {
+          top: [
+            {
+              anchorName: undefined,
+              anchorEl: document.getElementById('my-anchor'),
+              targetEl: document.getElementById('my-target-1'),
+              anchorSide: 'bottom',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+      '#my-target-2': {
+        declarations: {
+          bottom: [
+            {
+              anchorName: undefined,
+              anchorEl: document.getElementById('my-anchor'),
+              targetEl: document.getElementById('my-target-2'),
+              anchorSide: 'top',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+    };
+    expect(rules).toEqual(expected);
+  });
+
+  it('parses `position-anchor` declared multiple times', async () => {
+    document.body.innerHTML = `
+    <div style="position: relative">
+      <div id="my-anchor"></div>
+      <div id="my-target-1"></div>
+      <div id="my-target-2"></div>
+    </div>`;
+    const css = `
+      #my-target-1 {
+        top: anchor(bottom);
+        position-anchor: --my-anchor;
+        position: absolute;
+      }
+      #my-target-2 {
+        bottom: anchor(top);
+        position-anchor: --my-anchor;
+        position: absolute;
+      }
+      #my-anchor {
+        anchor-name: --my-anchor;
+      }
+    `;
+    document.head.innerHTML = `<style>${css}</style>`;
+    const { rules } = await parseCSS([{ css }] as StyleData[]);
+    const expected = {
+      '#my-target-1': {
+        declarations: {
+          top: [
+            {
+              anchorName: undefined,
+              anchorEl: document.getElementById('my-anchor'),
+              targetEl: document.getElementById('my-target-1'),
+              anchorSide: 'bottom',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+      '#my-target-2': {
+        declarations: {
+          bottom: [
+            {
+              anchorName: undefined,
+              anchorEl: document.getElementById('my-anchor'),
+              targetEl: document.getElementById('my-target-2'),
+              anchorSide: 'top',
+              fallbackValue: '0px',
+              uuid: expect.any(String),
+            },
+          ],
+        },
+      },
+    };
+    expect(rules).toEqual(expected);
+  });
+
   it('handles duplicate anchor-names', async () => {
     document.body.innerHTML =
       '<div style="position: relative"><div id="f1"></div><div id="a2"></div></div>';