Update limitations and note

oddbird · Nov 20, 2024 · b076add · b076add
1 parent a1eae96
commit b076add
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -120,10 +120,6 @@ manually, by passing a single boolean with `polyfill(true)`.
 
 ## Limitations
 
-This polyfill was implemented against an early version of the spec, and updates
-were paused to allow the syntax to solidify. Now that browsers are working on
-implementation, we are in the process of bringing it up to date.
-
 While this polyfill supports many basic use cases, it doesn't (yet) support the
 following features:
 
@@ -147,7 +143,6 @@ following features:
 - `position-visibility` property
 - dynamically added/removed anchors or targets
 - anchors or targets in the shadow-dom
-- anchors or targets in constructed stylesheets (https://github.com/oddbird/css-anchor-positioning/issues/228)
 - anchor functions assigned to `inset-*` properties or `inset` shorthand
   property
 - vertical/rtl writing-modes (partial support)

diff --git a/index.html b/index.html
@@ -23,8 +23,6 @@
     </script>
     <link rel="stylesheet" href="/demo.css" />
 
-    <!-- Included to test invalid stylesheets -->
-    <link rel="stylesheet" href="/fake.css" />
     <link rel="stylesheet" href="/anchor.css" />
     <link rel="stylesheet" href="/anchor-positioning.css" />
     <link rel="stylesheet" href="/anchor-popover.css" />
@@ -44,6 +42,8 @@
     <link rel="stylesheet" href="/anchor-pseudo-element.css" />
     <link rel="stylesheet" href="/anchor-media-query.css" />
     <link rel="stylesheet" href="/anchor-scope.css" />
+    <!-- Included to test invalid stylesheets -->
+    <link rel="stylesheet" href="/fake.css" />
     <style>
       #my-anchor-style-tag {
         anchor-name: --my-anchor-style-tag;
@@ -262,9 +262,9 @@ <h2>Anchoring Elements Using CSS</h2>
           rel="noopener noreferrer"
           >specification</a
         >
-        defines anchor positioning, "where a positioned element can size and
-        position itself relative to one or more 'anchor elements' elsewhere on
-        the page." This CSS Anchor Positioning Polyfill supports and is based on
+        defines anchor positioning, “where a positioned element can size and
+        position itself relative to one or more ‘anchor elements’ elsewhere on
+        the page.” This CSS Anchor Positioning Polyfill supports and is based on
         this specification.
       </p>
       <p>
@@ -319,10 +319,8 @@ <h2>Anchoring Elements Using CSS</h2>
         </li>
       </ul>
       <p>
-        <strong>Note: </strong>This polyfill was implemented against an early
-        version of the spec, and updates were paused to allow the syntax to
-        solidify. Now that browsers are working on implementation, we are in the
-        process of bringing it up to date, and welcome
+        <strong>Note: </strong>We strive to keep the polyfill up-to-date with
+        ongoing changes to the spec, and we welcome
         <a
           href="https://github.com/oddbird/css-anchor-positioning"
           target="_blank"
@@ -342,7 +340,7 @@ <h2>
         <div id="my-anchor-positioning" class="anchor">Anchor</div>
       </div>
       <p class="note">
-        With polyfill applied: Target and Anchor's right edges line up. Target's
+        With polyfill applied: Target and Anchor’s right edges line up. Target’s
         top edge lines up with the bottom edge of the Anchor.
       </p>
       <pre><code class="language-css"
@@ -408,7 +406,7 @@ <h2>
         </div>
       </div>
       <p class="note">
-        With polyfill applied: Target and Anchor's right edges line up. Target's
+        With polyfill applied: Target and Anchor’s right edges line up. Target’s
         top edge lines up with the bottom edge of the Anchor.
       </p>
       <pre><code class="language-css"
@@ -833,7 +831,7 @@ <h2>
         <div id="my-target-math" class="target">Target</div>
       </div>
       <p class="note">
-        With polyfill applied: Target's left edge is 10px left of the Anchor's
+        With polyfill applied: Target’s left edge is 10px left of the Anchor’s
         right edge). The top edge of the Target is 10px below the bottom edge of
         the Anchor.
       </p>
@@ -862,9 +860,9 @@ <h2>
         <div id="my-target" class="target">Target</div>
       </div>
       <p class="note">
-        With polyfill applied: Target's top edge is positioned at 50% of the
+        With polyfill applied: Target’s top edge is positioned at 50% of the
         height of the Anchor. The right edge of the Target lines up with 100% of
-        the width of the Anchor (i.e. the Anchor's right edge).
+        the width of the Anchor (i.e. the Anchor’s right edge).
       </p>
       <pre><code class="language-css"
 >#my-anchor {
@@ -891,8 +889,8 @@ <h2>
         <div id="my-target-props" class="target">Target</div>
       </div>
       <p class="note">
-        With polyfill applied: Target's left edge is positioned in Anchor's
-        horizontal center. Target's bottom edge is 10% above the bottom edge of
+        With polyfill applied: Target’s left edge is positioned in Anchor’s
+        horizontal center. Target’s bottom edge is 10% above the bottom edge of
         Anchor.
       </p>
       <pre><code class="language-css"
@@ -921,7 +919,7 @@ <h2>
         <div id="target-duplicate-custom-props" class="target">Target</div>
       </div>
       <p class="note">
-        With polyfill applied: Target's top left corner is positioned in the
+        With polyfill applied: Target’s top left corner is positioned in the
         center (vertically and horizontally) of the Anchor.
       </p>
       <pre><code class="language-css"
@@ -974,7 +972,7 @@ <h2>
       </div>
       <button id="toggle-anchor-width">Toggle anchor width</button>
       <p class="note">
-        With polyfill applied: Target and Anchor's right edges line up. Target's
+        With polyfill applied: Target and Anchor’s right edges line up. Target’s
         top edge lines up with the bottom edge of the Anchor.
         <br />
         <br />
@@ -1003,8 +1001,8 @@ <h2>
         <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.
+        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 {
@@ -1070,7 +1068,7 @@ <h2>
         <div id="my-target-pseudo-element" class="target">Target</div>
       </div>
       <p class="note">
-        Target is positioned at the bottom right corner of the Anchor's
+        Target is positioned at the bottom right corner of the Anchor’s
         <code>::before</code> pseudo-element.
       </p>
       <pre><code class="language-css"
@@ -1097,7 +1095,7 @@ <h2>
         <div id="my-target-media-query" class="target">Target</div>
       </div>
       <p class="note">
-        With polyfill applied: Target and Screen Anchor's right and top edges
+        With polyfill applied: Target and Screen Anchor’s right and top edges
         line up.
       </p>
       <pre><code class="language-css"
@@ -1228,7 +1226,7 @@ <h2>
       </div>
       <p class="note">
         With polyfill applied: Targets are positioned to the right of their
-        corresponding item's arrow.
+        corresponding item’s arrow.
       </p>
       <pre><code class="language-css">#anchor-scope li {
   anchor-scope: --anchor-scope;
@@ -1246,10 +1244,10 @@ <h2>
 }</code></pre>
     </section>
     <section id="sponsor">
-      <h2>Sponsor OddBird's OSS Work</h2>
+      <h2>Sponsor OddBird’s OSS Work</h2>
       <p>
         At OddBird, we love contributing to the languages & tools developers
-        rely on. We're currently working on polyfills for new Popover & Anchor
+        rely on. We’re currently working on polyfills for new Popover & Anchor
         Positioning functionality, as well as CSS specifications for functions,
         mixins, and responsive typography. Help us keep this work sustainable
         and centered on your needs as a developer! We display sponsor logos and
@@ -1265,7 +1263,7 @@ <h2>Sponsor OddBird's OSS Work</h2>
         href="https://github.com/sponsors/oddbird"
         target="_blank"
         rel="noopener noreferrer"
-        >Sponsor OddBird's OSS Work</a
+        >Sponsor OddBird’s OSS Work</a
       >
     </section>
     <footer>

diff --git a/src/parse.ts b/src/parse.ts
@@ -138,11 +138,9 @@ function parseAnchorFn(
     name = undefined;
   }
   if (name) {
-    if (isIdentifier(name)) {
-      if (name.name.startsWith('--')) {
-        // Store anchor name
-        anchorName = name.name;
-      }
+    if (isIdentifier(name) && name.name.startsWith('--')) {
+      // Store anchor name
+      anchorName = name.name;
     } else if (isVarFunction(name) && name.children.first) {
       // Store CSS custom prop for anchor name
       customPropName = (name.children.first as csstree.Identifier).name;