Merge pull request #244 from tuespetre/fallbacks-nested-functions

Fallbacks: flip anchor functions that are nested in other function calls

Author: jgerigmeyer

README.md

@@ -88,8 +88,8 @@ following features:
   - The `flip-start` `try-tactic` is only partially supported. The tactic is
     only applied to property names and anchor sides.
   - a `position-area` as a `try-tactic`
-  - Fallback does does not support anchor functions that are nested or passed
-    through custom properties.
+  - Fallback does not support percentage anchor-side values, nor anchor
+    functions that are passed through custom properties.
 - Polyfill allows anchoring in scroll more permissively than the spec allows,
   for instance without a default `position-anchor`.
 - `anchor-scope` property on pseudo-elements

src/fallback.ts

@@ -421,15 +421,20 @@ export function applyTryTacticToBlock(
       declarations[key] ??= 'revert';
     }
 
-    // todo: This does not support anchor functions that are nested or passed
-    // through custom properties.
-    if (isAnchorFunction(valueAst.children.first)) {
-      valueAst.children.first.children.forEach((item) => {
-        if (isIdentifier(item) && isAnchorSide(item.name)) {
-          item.name = mapAnchorSide(item.name, tactic);
+    // todo: This does not support percentage anchor-side values, nor anchor
+    // functions that are passed through custom properties.
+    csstree.walk(valueAst, {
+      visit: 'Function',
+      enter(node) {
+        if (isAnchorFunction(node)) {
+          node.children.forEach((item) => {
+            if (isIdentifier(item) && isAnchorSide(item.name)) {
+              item.name = mapAnchorSide(item.name, tactic);
+            }
+          });
         }
-      });
-    }
+      },
+    });
 
     if (key === 'position-area') {
       valueAst.children.forEach((id) => {

tests/unit/fallback.test.ts

@@ -47,6 +47,14 @@ describe('fallback', () => {
             bottom: 'anchor(self-start)',
           },
         ],
+        [
+          'flips anchor functions that are nested',
+          `${propWrap('bottom')}: calc(anchor(top) + 5px);${propWrap('top')}:calc(calc(anchor(--a top) + 5px) - 0.5em)`,
+          {
+            top: 'calc(anchor(bottom) + 5px)',
+            bottom: 'calc(calc(anchor(--a bottom) + 5px) - 0.5em)',
+          },
+        ],
         [
           'does not flip left and right anchors',
           `${propWrap('left')}: anchor(right);${propWrap('right')}:anchor(--a left)`,
@@ -147,6 +155,14 @@ describe('fallback', () => {
             right: 'anchor(self-start)',
           },
         ],
+        [
+          'flips anchor functions that are nested',
+          `${propWrap('right')}: calc(anchor(left) + 5px);${propWrap('left')}:calc(calc(anchor(--a left) + 5px) - 0.5em)`,
+          {
+            left: 'calc(anchor(right) + 5px)',
+            right: 'calc(calc(anchor(--a right) + 5px) - 0.5em)',
+          },
+        ],
         [
           'does not flip top and bottom anchors',
           `${propWrap('top')}: anchor(bottom);${propWrap('bottom')}:anchor(--a top)`,