From 416b024ddd9ea74a6b14b87da917138743ad28b0 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Fri, 22 Sep 2023 11:22:43 -0400
Subject: [PATCH 1/5] Inefficient POC for unapplying polyfill.

---
 index.html                   | 110 ++++++++++++++++++++++++++++-------
 public/anchor-added.css      |  14 +++++
 src/constants.ts             |   3 +
 src/fetch.ts                 |  21 +++----
 src/index-fn.ts              |   4 +-
 src/parse.ts                 |  14 +++--
 src/polyfill.ts              |  87 ++++++++++++++++++++++-----
 src/transform.ts             |  58 +++++++++++-------
 tests/unit/fetch.test.ts     |   5 +-
 tests/unit/parse.test.ts     |   3 +-
 tests/unit/transform.test.ts |  13 +++--
 11 files changed, 253 insertions(+), 79 deletions(-)
 create mode 100644 public/anchor-added.css
 create mode 100644 src/constants.ts

diff --git a/index.html b/index.html
index d616e770..51fac1ac 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,7 @@
     <link rel="stylesheet" href="/anchor-duplicate-custom-props.css" />
     <link rel="stylesheet" href="/anchor-implicit.css" />
     <link rel="stylesheet" href="/anchor-update.css" />
+    <link rel="stylesheet" href="/anchor-added.css" />
     <style>
       #my-anchor-style-tag {
         anchor-name: --my-anchor-style-tag;
@@ -45,18 +46,31 @@
       }
     </style>
     <script type="module">
-      import polyfill from '/src/index-fn.ts';
+      import { polyfill, restore } from '/src/index-fn.ts';
 
       const btn = document.getElementById('apply-polyfill');
+      let applied = false;
+      window.polyfill = polyfill;
+      window.restore = restore;
 
       if (!('anchorName' in document.documentElement.style)) {
-        btn.addEventListener('click', () =>
-          polyfill().then((rules) => {
-            btn.innerText = 'Polyfill Applied';
-            btn.setAttribute('disabled', '');
-            console.log(rules);
-          }),
-        );
+        btn.addEventListener('click', () => {
+          btn.setAttribute('disabled', '');
+          if (applied) {
+            restore().then(() => {
+              applied = false;
+              btn.innerText = 'Apply Polyfill';
+              btn.removeAttribute('disabled');
+            });
+          } else {
+            polyfill().then((rules) => {
+              console.log(rules);
+              applied = true;
+              btn.innerText = 'Unapply Polyfill';
+              btn.removeAttribute('disabled');
+            });
+          }
+        });
       } else {
         btn.innerText = 'No Polyfill Needed';
         btn.setAttribute('disabled', '');
@@ -64,18 +78,6 @@
           'anchor-positioning is supported in this browser; polyfill skipped.',
         );
       }
-
-      const updateBtn = document.getElementById('toggle-anchor-width');
-      const updateAnchor = document.getElementById('my-anchor-update');
-      updateBtn.addEventListener('click', () => {
-        if (updateAnchor.getAttribute('data-small')) {
-          updateAnchor.setAttribute('data-large', true);
-          updateAnchor.removeAttribute('data-small');
-        } else {
-          updateAnchor.setAttribute('data-small', true);
-          updateAnchor.removeAttribute('data-large');
-        }
-      });
     </script>
     <script src="https://unpkg.com/prismjs@v1.x/components/prism-core.min.js"></script>
     <script src="https://unpkg.com/prismjs@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
@@ -621,13 +623,25 @@ <h2>
     <section id="anchor-update" class="demo-item">
       <h2>
         <a href="#anchor-update" aria-hidden="true">🔗</a>
-        Dynamically update anchors
+        Dynamically updated anchors
       </h2>
       <div style="position: relative" class="demo-elements">
         <div id="my-anchor-update" class="anchor">Anchor</div>
         <div id="my-target-update" class="target">Target</div>
       </div>
       <button id="toggle-anchor-width">Toggle anchor width</button>
+      <script>
+        document.getElementById('toggle-anchor-width').addEventListener('click', () => {
+          const updateAnchor = document.getElementById('my-anchor-update');
+          if (updateAnchor.getAttribute('data-small')) {
+            updateAnchor.setAttribute('data-large', true);
+            updateAnchor.removeAttribute('data-small');
+          } else {
+            updateAnchor.setAttribute('data-small', true);
+            updateAnchor.removeAttribute('data-large');
+          }
+        });
+      </script>
       <p class="note">
         With polyfill applied: Target and Anchor's right edges line up. Target's
         top edge lines up with the bottom edge of the Anchor.
@@ -645,6 +659,60 @@ <h2>
   position: absolute;
   right: anchor(--my-anchor-update right);
   top: anchor(--my-anchor-update bottom);
+}</code></pre>
+    </section>
+    <section id="anchor-added" class="demo-item">
+      <h2>
+        <a href="#anchor-added" aria-hidden="true">🔗</a>
+        Dynamically added anchors
+      </h2>
+      <div style="position: relative" class="demo-elements" id="my-anchor-added-container">
+        <div id="my-anchor-added-original" class="anchor">Original Anchor</div>
+        <div id="my-target-added" class="target">Target</div>
+      </div>
+      <button id="add-anchor">Add anchor</button>
+      <script>
+        document.getElementById('add-anchor').addEventListener('click', () => {
+          const addBtn = document.getElementById('add-anchor');
+          let addedAnchor = document.getElementById('my-anchor-added-new');
+          if (addedAnchor) {
+            addedAnchor.remove();
+            addBtn.innerText = 'Add anchor';
+            window.polyfill();
+          } else {
+            addedAnchor = document.createElement('div');
+            addedAnchor.id = 'my-anchor-added-new';
+            addedAnchor.classList.add('anchor');
+            addedAnchor.innerText = 'Added Anchor';
+            document.getElementById('my-anchor-added-container').prepend(addedAnchor);
+            addBtn.innerText = 'Remove anchor';
+            window.polyfill();
+          }
+        });
+      </script>
+      <p class="note">
+        With polyfill applied: Target and original Anchor's right edges line up.
+        Target's top edge lines up with the top edge of the original Anchor.
+        <br />
+        <br />
+        When another valid Anchor is added earlier in the DOM order and the
+        polyfill is re-applied, Target position updates relative to the added
+        Anchor.
+      </p>
+      <pre><code class="language-css"
+>#my-anchor-added-new {
+  anchor-name: --my-anchor-added;
+  margin-bottom: 1rem;
+}
+
+#my-anchor-added-original {
+  anchor-name: --my-anchor-added;
+}
+
+#my-target-added {
+  position: absolute;
+  left: anchor(--my-anchor-added right);
+  top: anchor(--my-anchor-added top);
 }</code></pre>
     </section>
     <footer>
diff --git a/public/anchor-added.css b/public/anchor-added.css
new file mode 100644
index 00000000..85ce3012
--- /dev/null
+++ b/public/anchor-added.css
@@ -0,0 +1,14 @@
+#my-anchor-added-new {
+  anchor-name: --my-anchor-added;
+  margin-bottom: 1rem;
+}
+
+#my-anchor-added-original {
+  anchor-name: --my-anchor-added;
+}
+
+#my-target-added {
+  position: absolute;
+  left: anchor(--my-anchor-added right);
+  top: anchor(--my-anchor-added top);
+}
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..17efb8bc
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,3 @@
+export const POLYFILL_ID_ATTR = 'data-anchor-polyfill-id';
+export const INLINE_STYLES_ID_ATTR = 'data-anchor-polyfill-inline-styles-id';
+export const TARGET_STYLE_ATTR = 'data-anchor-polyfill-target-style';
diff --git a/src/fetch.ts b/src/fetch.ts
index c54a9382..1c52b796 100644
--- a/src/fetch.ts
+++ b/src/fetch.ts
@@ -1,10 +1,13 @@
 import { nanoid } from 'nanoid/non-secure';
 
+import { INLINE_STYLES_ID_ATTR } from './constants.js';
+
 export interface StyleData {
   el: HTMLElement;
   css: string;
   url?: URL;
   changed?: boolean;
+  original: string;
 }
 
 export function isStyleLink(link: HTMLLinkElement): link is HTMLLinkElement {
@@ -31,15 +34,14 @@ async function fetchLinkedStylesheets(
       // fetch css and add to array
       const response = await fetch(data.url.toString());
       const css = await response.text();
-      return { ...data, css } as StyleData;
+      return { ...data, css, original: css } as StyleData;
     }),
   );
 }
 
 // Searches for all elements with inline style attributes that include `anchor`.
-// For each element found, adds a new 'data-has-inline-styles' attribute with a
-// random UUID value, and then formats the styles in the same manner as CSS from
-// style tags.
+// For each element found, adds a new data attribute with a random UUID value,
+// and then formats the styles in the same manner as CSS from style tags.
 function fetchInlineStyles() {
   const elementsWithInlineAnchorStyles: NodeListOf<HTMLElement> =
     document.querySelectorAll('[style*="anchor"]');
@@ -47,11 +49,10 @@ function fetchInlineStyles() {
 
   elementsWithInlineAnchorStyles.forEach((el) => {
     const selector = nanoid(12);
-    const dataAttribute = 'data-has-inline-styles';
-    el.setAttribute(dataAttribute, selector);
-    const styles = el.getAttribute('style');
-    const css = `[${dataAttribute}="${selector}"] { ${styles} }`;
-    inlineStyles.push({ el, css });
+    el.setAttribute(INLINE_STYLES_ID_ATTR, selector);
+    const styles = el.getAttribute('style') as string;
+    const css = `[${INLINE_STYLES_ID_ATTR}="${selector}"] { ${styles} }`;
+    inlineStyles.push({ el, css, original: styles });
   });
 
   return inlineStyles;
@@ -70,7 +71,7 @@ export async function fetchCSS(): Promise<StyleData[]> {
       }
     }
     if (el.tagName.toLowerCase() === 'style') {
-      sources.push({ el, css: el.innerHTML });
+      sources.push({ el, css: el.innerHTML, original: el.innerHTML });
     }
   });
 
diff --git a/src/index-fn.ts b/src/index-fn.ts
index f70a79a2..1a01517d 100644
--- a/src/index-fn.ts
+++ b/src/index-fn.ts
@@ -1,3 +1,5 @@
-import { polyfill } from './polyfill.js';
+import { polyfill, restore } from './polyfill.js';
+
+export { polyfill, restore };
 
 export default polyfill;
diff --git a/src/parse.ts b/src/parse.ts
index e5b990c3..dc81e1c1 100644
--- a/src/parse.ts
+++ b/src/parse.ts
@@ -1,6 +1,7 @@
 import * as csstree from 'css-tree';
 import { nanoid } from 'nanoid/non-secure';
 
+import { POLYFILL_ID_ATTR, TARGET_STYLE_ATTR } from './constants.js';
 import { StyleData } from './fetch.js';
 import { validatedForPositioning } from './validate.js';
 
@@ -514,7 +515,7 @@ export async function parseCSS(styleData: StyleData[]) {
           }
           // Add each `@try` block, scoped to a unique data-attr
           for (const block of fallbacks[name].blocks) {
-            const dataAttr = `[data-anchor-polyfill="${block.uuid}"]`;
+            const dataAttr = `[${POLYFILL_ID_ATTR}="${block.uuid}"]`;
             this.stylesheet?.children.prependData({
               type: 'Rule',
               prelude: {
@@ -915,7 +916,7 @@ export async function parseCSS(styleData: StyleData[]) {
   for (const [targetSel, anchorFns] of Object.entries(anchorFunctions)) {
     let targets: NodeListOf<HTMLElement>;
     if (
-      targetSel.startsWith('[data-anchor-polyfill=') &&
+      targetSel.startsWith(`[${POLYFILL_ID_ATTR}=`) &&
       fallbackTargets[targetSel]
     ) {
       // If we're dealing with a `@position-fallback` `@try` block,
@@ -939,13 +940,16 @@ export async function parseCSS(styleData: StyleData[]) {
             ...(inlineStyles.get(targetEl) ?? {}),
             [anchorObj.uuid]: uuid,
           });
+          const original = targetEl.getAttribute('style') ?? '';
           // Point original uuid to new uuid
           targetEl.setAttribute(
             'style',
-            `${anchorObj.uuid}: var(${uuid}); ${
-              targetEl.getAttribute('style') ?? ''
-            }`,
+            `${anchorObj.uuid}: var(${uuid}); ${original}`,
           );
+          if (!targetEl.hasAttribute(TARGET_STYLE_ATTR)) {
+            // Store original styles (for potential later restoration)
+            targetEl.setAttribute(TARGET_STYLE_ATTR, original);
+          }
           // Populate new data for each anchor/target combo
           validPositions[targetSel] = {
             ...validPositions[targetSel],
diff --git a/src/polyfill.ts b/src/polyfill.ts
index 930bfdd9..2888de7a 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -6,7 +6,8 @@ import {
   type Rect,
 } from '@floating-ui/dom';
 
-import { fetchCSS } from './fetch.js';
+import { POLYFILL_ID_ATTR, TARGET_STYLE_ATTR } from './constants.js';
+import { fetchCSS, StyleData } from './fetch.js';
 import {
   AnchorFunction,
   AnchorFunctionDeclaration,
@@ -21,7 +22,7 @@ import {
   SizingProperty,
   TryBlock,
 } from './parse.js';
-import { transformCSS } from './transform.js';
+import { replaceLink, transformCSS } from './transform.js';
 
 const platformWithCache = { ...platform, _c: new Map() };
 
@@ -281,6 +282,7 @@ async function applyAnchorPositions(
   useAnimationFrame = false,
 ) {
   const root = document.documentElement;
+  const cleanups: (() => void)[] = [];
 
   for (const [property, anchorValues] of Object.entries(declarations) as [
     InsetProperty | SizingProperty,
@@ -290,7 +292,7 @@ async function applyAnchorPositions(
       const anchor = anchorValue.anchorEl;
       const target = anchorValue.targetEl;
       if (anchor && target) {
-        autoUpdate(
+        const cleanup = autoUpdate(
           anchor,
           target,
           async () => {
@@ -311,6 +313,7 @@ async function applyAnchorPositions(
           },
           { animationFrame: useAnimationFrame },
         );
+        cleanups.push(cleanup);
       } else {
         // Use fallback value
         const resolved = await getPixelValue({
@@ -323,6 +326,7 @@ async function applyAnchorPositions(
       }
     }
   }
+  return cleanups;
 }
 
 async function applyPositionFallbacks(
@@ -330,8 +334,9 @@ async function applyPositionFallbacks(
   fallbacks: TryBlock[],
   useAnimationFrame = false,
 ) {
+  const cleanups: (() => void)[] = [];
   if (!fallbacks.length) {
-    return;
+    return cleanups;
   }
 
   const targets: NodeListOf<HTMLElement> = document.querySelectorAll(targetSel);
@@ -339,7 +344,7 @@ async function applyPositionFallbacks(
   for (const target of targets) {
     let checking = false;
     const offsetParent = await getOffsetParent(target);
-    autoUpdate(
+    const cleanup = autoUpdate(
       target,
       target,
       async () => {
@@ -353,7 +358,7 @@ async function applyPositionFallbacks(
         // reach one that does not cause the target's margin-box to overflow
         // its offsetParent (containing block).
         for (const [index, { uuid }] of fallbacks.entries()) {
-          target.setAttribute('data-anchor-polyfill', uuid);
+          target.setAttribute(POLYFILL_ID_ATTR, uuid);
           if (index === fallbacks.length - 1) {
             checking = false;
             break;
@@ -387,32 +392,52 @@ async function applyPositionFallbacks(
       },
       { animationFrame: useAnimationFrame },
     );
+    cleanups.push(cleanup);
   }
+  return cleanups;
 }
 
 async function position(rules: AnchorPositions, useAnimationFrame = false) {
+  const cleanups = [];
   for (const pos of Object.values(rules)) {
     // Handle `anchor()` and `anchor-size()` functions...
-    await applyAnchorPositions(pos.declarations ?? {}, useAnimationFrame);
+    cleanups.push(
+      ...(await applyAnchorPositions(
+        pos.declarations ?? {},
+        useAnimationFrame,
+      )),
+    );
   }
 
   for (const [targetSel, position] of Object.entries(rules)) {
     // Handle `@position-fallback` blocks...
-    await applyPositionFallbacks(
-      targetSel,
-      position.fallbacks ?? [],
-      useAnimationFrame,
+    cleanups.push(
+      ...(await applyPositionFallbacks(
+        targetSel,
+        position.fallbacks ?? [],
+        useAnimationFrame,
+      )),
     );
   }
+  return cleanups;
 }
 
+let styleData: StyleData[] = [];
+let rootStyle: string | null;
+let cleanups: (() => void)[] = [];
+let polyfilled = false;
+
 export async function polyfill(animationFrame?: boolean) {
+  if (polyfilled) {
+    await restore();
+  }
+  rootStyle = document.documentElement.getAttribute('style');
   const useAnimationFrame =
     animationFrame === undefined
       ? Boolean(window.UPDATE_ANCHOR_ON_ANIMATION_FRAME)
       : animationFrame;
   // fetch CSS from stylesheet and inline style
-  const styleData = await fetchCSS();
+  styleData = await fetchCSS();
 
   // parse CSS
   const { rules, inlineStyles } = await parseCSS(styleData);
@@ -422,8 +447,44 @@ export async function polyfill(animationFrame?: boolean) {
     await transformCSS(styleData, inlineStyles);
 
     // calculate position values
-    await position(rules, useAnimationFrame);
+    cleanups = await position(rules, useAnimationFrame);
   }
 
+  polyfilled = true;
   return rules;
 }
+
+export async function restore() {
+  for (const cleanup of cleanups) {
+    cleanup();
+  }
+  document.querySelectorAll(`[${POLYFILL_ID_ATTR}]`).forEach((el) => {
+    el.removeAttribute(POLYFILL_ID_ATTR);
+  });
+  document.querySelectorAll(`[${TARGET_STYLE_ATTR}]`).forEach((el) => {
+    const original = el.getAttribute(TARGET_STYLE_ATTR);
+    if (original) {
+      el.setAttribute('style', original);
+    } else {
+      el.removeAttribute('style');
+    }
+    el.removeAttribute(TARGET_STYLE_ATTR);
+  });
+  for (const { el, original, changed, url } of styleData) {
+    if (changed) {
+      if (el.tagName.toLowerCase() === 'style') {
+        el.innerHTML = original;
+      } else if (el.tagName.toLowerCase() === 'link') {
+        await replaceLink(el as HTMLLinkElement, original, url);
+      } else {
+        el.setAttribute('style', original);
+      }
+    }
+  }
+  if (rootStyle) {
+    document.documentElement.setAttribute('style', rootStyle);
+  } else {
+    document.documentElement.removeAttribute('style');
+  }
+  polyfilled = false;
+}
diff --git a/src/transform.ts b/src/transform.ts
index 19005352..7e91da8b 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,33 +1,51 @@
+import { INLINE_STYLES_ID_ATTR } from './constants.js';
 import { type StyleData } from './fetch.js';
 
+export async function replaceLink(
+  el: HTMLLinkElement,
+  contents: string,
+  url?: URL,
+) {
+  // Create new link
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  let blobUrl;
+  if (url) {
+    link.href = url.toString();
+  } else {
+    const blob = new Blob([contents], { type: 'text/css' });
+    blobUrl = URL.createObjectURL(blob);
+    link.href = blobUrl;
+  }
+  const promise = new Promise((res) => {
+    link.onload = res;
+  });
+  el.replaceWith(link);
+  // Wait for new stylesheet to be loaded
+  await promise;
+  if (blobUrl) {
+    URL.revokeObjectURL(blobUrl);
+  }
+  return link;
+}
+
 export async function transformCSS(
   styleData: StyleData[],
   inlineStyles?: Map<HTMLElement, Record<string, string>>,
 ) {
-  for (const { el, css, changed } of styleData) {
+  styleData.forEach(async (data) => {
+    const { el, css, changed } = data;
     if (changed) {
       if (el.tagName.toLowerCase() === 'style') {
         // Handle inline stylesheets
         el.innerHTML = css;
       } else if (el.tagName.toLowerCase() === 'link') {
-        // Create new link
-        const blob = new Blob([css], { type: 'text/css' });
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = url;
-        const promise = new Promise((res) => {
-          link.onload = res;
-        });
-        el.replaceWith(link);
-        // Wait for new stylesheet to be loaded
-        await promise;
-        URL.revokeObjectURL(url);
-      } else if (el.hasAttribute('data-has-inline-styles')) {
+        data.el = await replaceLink(el as HTMLLinkElement, css);
+      } else if (el.hasAttribute(INLINE_STYLES_ID_ATTR)) {
         // Handle inline styles
-        const attr = el.getAttribute('data-has-inline-styles');
+        const attr = el.getAttribute(INLINE_STYLES_ID_ATTR);
         if (attr) {
-          const pre = `[data-has-inline-styles="${attr}"]{`;
+          const pre = `[${INLINE_STYLES_ID_ATTR}="${attr}"]{`;
           const post = `}`;
           let styles = css.slice(pre.length, 0 - post.length);
           // Check for custom anchor-element mapping, so it is not overwritten
@@ -43,8 +61,8 @@ export async function transformCSS(
       }
     }
     // Remove no-longer-needed data-attribute
-    if (el.hasAttribute('data-has-inline-styles')) {
-      el.removeAttribute('data-has-inline-styles');
+    if (el.hasAttribute(INLINE_STYLES_ID_ATTR)) {
+      el.removeAttribute(INLINE_STYLES_ID_ATTR);
     }
-  }
+  });
 }
diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
index 6bfb1f8d..909818e5 100644
--- a/tests/unit/fetch.test.ts
+++ b/tests/unit/fetch.test.ts
@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 
+import { INLINE_STYLES_ID_ATTR } from '../../src/constants.js';
 import { fetchCSS } from '../../src/fetch.js';
 import { getSampleCSS } from '../helpers.js';
 
@@ -87,11 +88,11 @@ describe('fetch inline styles', () => {
     expect(styleData).toHaveLength(4);
     expect(styleData[2].url).toBeUndefined();
     expect(styleData[3].url).toBeUndefined();
-    expect(styleData[2].css.trim()).toContain('[data-has-inline-styles=');
+    expect(styleData[2].css.trim()).toContain(`[${INLINE_STYLES_ID_ATTR}=`);
     expect(styleData[2].css.trim()).toContain(
       'top: anchor(--my-anchor-in-line end)',
     );
-    expect(styleData[3].css.trim()).toContain('[data-has-inline-styles=');
+    expect(styleData[3].css.trim()).toContain(`[${INLINE_STYLES_ID_ATTR}=`);
     expect(styleData[3].css.trim()).toContain(
       'anchor-name: --my-anchor-in-line',
     );
diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts
index 29048c64..9ebff4ae 100644
--- a/tests/unit/parse.test.ts
+++ b/tests/unit/parse.test.ts
@@ -1,3 +1,4 @@
+import { POLYFILL_ID_ATTR } from '../../src/constants.js';
 import { type StyleData } from '../../src/fetch.js';
 import { AnchorPositions, parseCSS } from '../../src/parse.js';
 import { getSampleCSS, sampleBaseCSS } from './../helpers.js';
@@ -527,7 +528,7 @@ describe('parseCSS', () => {
       },
     };
     for (const { uuid } of rules['#my-target-fallback']?.fallbacks ?? []) {
-      expected[`[data-anchor-polyfill="${uuid}"]`] = {
+      expected[`[${POLYFILL_ID_ATTR}="${uuid}"]`] = {
         declarations: expect.any(Object),
       };
     }
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index a00ec38d..249b0564 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -1,3 +1,4 @@
+import { INLINE_STYLES_ID_ATTR } from '../../src/constants.js';
 import { transformCSS } from '../../src/transform.js';
 
 describe('transformCSS', () => {
@@ -14,8 +15,8 @@ describe('transformCSS', () => {
       </style>
     `;
     document.body.innerHTML = `
-      <div id="div" data-has-inline-styles="key" style="--foo: var(--bar); color: red;" />
-      <div id="div2" data-has-inline-styles="key2" style="color: red;" />
+      <div id="div" ${INLINE_STYLES_ID_ATTR}="key" style="--foo: var(--bar); color: red;" />
+      <div id="div2" ${INLINE_STYLES_ID_ATTR}="key2" style="color: red;" />
     `;
     let link = document.querySelector('link') as HTMLLinkElement;
     const style = document.querySelector('style') as HTMLStyleElement;
@@ -26,12 +27,12 @@ describe('transformCSS', () => {
       { el: style, css: 'html { padding: 0; }', changed: true },
       {
         el: div,
-        css: '[data-has-inline-styles="key"]{color:blue;}',
+        css: `[${INLINE_STYLES_ID_ATTR}="key"]{color:blue;}`,
         changed: true,
       },
       {
         el: div2,
-        css: '[data-has-inline-styles="key2"]{color:blue;}',
+        css: `[${INLINE_STYLES_ID_ATTR}="key2"]{color:blue;}`,
         changed: false,
       },
     ];
@@ -46,7 +47,7 @@ describe('transformCSS', () => {
     expect(style.innerHTML).toBe('html { padding: 0; }');
     expect(div.getAttribute('style')).toBe('--foo: var(--bar); color:blue;');
     expect(div2.getAttribute('style')).toBe('color: red;');
-    expect(div.hasAttribute('data-has-inline-styles')).toBeFalsy();
-    expect(div2.hasAttribute('data-has-inline-styles')).toBeFalsy();
+    expect(div.hasAttribute(INLINE_STYLES_ID_ATTR)).toBeFalsy();
+    expect(div2.hasAttribute(INLINE_STYLES_ID_ATTR)).toBeFalsy();
   });
 });

From d2cf6818860cf799a2e8bc4c84d4cae209917132 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Fri, 22 Sep 2023 11:37:16 -0400
Subject: [PATCH 2/5] lint

---
 index.html                   | 32 ++++++++++++++++++++------------
 src/polyfill.ts              |  4 +++-
 tests/unit/transform.test.ts | 19 ++++++++++++++++---
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 51fac1ac..17292c29 100644
--- a/index.html
+++ b/index.html
@@ -631,16 +631,18 @@ <h2>
       </div>
       <button id="toggle-anchor-width">Toggle anchor width</button>
       <script>
-        document.getElementById('toggle-anchor-width').addEventListener('click', () => {
-          const updateAnchor = document.getElementById('my-anchor-update');
-          if (updateAnchor.getAttribute('data-small')) {
-            updateAnchor.setAttribute('data-large', true);
-            updateAnchor.removeAttribute('data-small');
-          } else {
-            updateAnchor.setAttribute('data-small', true);
-            updateAnchor.removeAttribute('data-large');
-          }
-        });
+        document
+          .getElementById('toggle-anchor-width')
+          .addEventListener('click', () => {
+            const updateAnchor = document.getElementById('my-anchor-update');
+            if (updateAnchor.getAttribute('data-small')) {
+              updateAnchor.setAttribute('data-large', true);
+              updateAnchor.removeAttribute('data-small');
+            } else {
+              updateAnchor.setAttribute('data-small', true);
+              updateAnchor.removeAttribute('data-large');
+            }
+          });
       </script>
       <p class="note">
         With polyfill applied: Target and Anchor's right edges line up. Target's
@@ -666,7 +668,11 @@ <h2>
         <a href="#anchor-added" aria-hidden="true">🔗</a>
         Dynamically added anchors
       </h2>
-      <div style="position: relative" class="demo-elements" id="my-anchor-added-container">
+      <div
+        style="position: relative"
+        class="demo-elements"
+        id="my-anchor-added-container"
+      >
         <div id="my-anchor-added-original" class="anchor">Original Anchor</div>
         <div id="my-target-added" class="target">Target</div>
       </div>
@@ -684,7 +690,9 @@ <h2>
             addedAnchor.id = 'my-anchor-added-new';
             addedAnchor.classList.add('anchor');
             addedAnchor.innerText = 'Added Anchor';
-            document.getElementById('my-anchor-added-container').prepend(addedAnchor);
+            document
+              .getElementById('my-anchor-added-container')
+              .prepend(addedAnchor);
             addBtn.innerText = 'Remove anchor';
             window.polyfill();
           }
diff --git a/src/polyfill.ts b/src/polyfill.ts
index 2888de7a..7d239283 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -475,7 +475,9 @@ export async function restore() {
       if (el.tagName.toLowerCase() === 'style') {
         el.innerHTML = original;
       } else if (el.tagName.toLowerCase() === 'link') {
-        await replaceLink(el as HTMLLinkElement, original, url);
+        if (url) {
+          await replaceLink(el as HTMLLinkElement, original, url);
+        }
       } else {
         el.setAttribute('style', original);
       }
diff --git a/tests/unit/transform.test.ts b/tests/unit/transform.test.ts
index 249b0564..ad698ad3 100644
--- a/tests/unit/transform.test.ts
+++ b/tests/unit/transform.test.ts
@@ -23,17 +23,30 @@ describe('transformCSS', () => {
     const div = document.getElementById('div') as HTMLDivElement;
     const div2 = document.getElementById('div2') as HTMLDivElement;
     const styleData = [
-      { el: link, css: 'html { margin: 0; }', changed: true },
-      { el: style, css: 'html { padding: 0; }', changed: true },
+      {
+        el: link,
+        css: 'html { margin: 0; }',
+        changed: true,
+        original: 'html { margin: 1; }',
+        url: new URL(link.href, document.baseURI),
+      },
+      {
+        el: style,
+        css: 'html { padding: 0; }',
+        changed: true,
+        original: 'p { color: red; }',
+      },
       {
         el: div,
         css: `[${INLINE_STYLES_ID_ATTR}="key"]{color:blue;}`,
         changed: true,
+        original: '--foo: var(--bar); color: red;',
       },
       {
         el: div2,
-        css: `[${INLINE_STYLES_ID_ATTR}="key2"]{color:blue;}`,
+        css: `[${INLINE_STYLES_ID_ATTR}="key2"]{color:red;}`,
         changed: false,
+        original: 'color: red;',
       },
     ];
     const inlineStyles = new Map();

From a34baff88f1a6247773c272c71a342b903175c3c Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Fri, 22 Sep 2023 11:44:11 -0400
Subject: [PATCH 3/5] &nbsp;

---
 public/demo.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/demo.css b/public/demo.css
index 40306d4a..b7e24516 100644
--- a/public/demo.css
+++ b/public/demo.css
@@ -155,7 +155,7 @@ footer p {
 
 /* prettier-ignore */
 [href*='://']::after {
-  content: ' ↗';
+  content: '\a0↗';
 }
 
 nav a:any-link,

From 274da87f4ae5d78e294f9650c654c528e21901cf Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 18 Jul 2024 15:10:48 -0400
Subject: [PATCH 4/5] reset and restoring

---
 src/polyfill.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/polyfill.ts b/src/polyfill.ts
index 7a350166..c987c5ce 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -425,7 +425,7 @@ async function position(rules: AnchorPositions, useAnimationFrame = false) {
 }
 
 let styleData: StyleData[] = [];
-let rootStyle: string | null;
+let rootStyle: string | null = null;
 let cleanups: (() => void)[] = [];
 let polyfilled = false;
 
@@ -495,5 +495,8 @@ export async function restore() {
   } else {
     document.documentElement.removeAttribute('style');
   }
+  styleData = [];
+  rootStyle = null;
+  cleanups = [];
   polyfilled = false;
 }

From 75a01894e9ecc0b172727f362a95c1fe22179f6a Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 18 Jul 2024 15:30:22 -0400
Subject: [PATCH 5/5] Fix restore fn

---
 src/polyfill.ts  |  2 +-
 src/transform.ts | 11 ++++-------
 src/utils.ts     |  1 +
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/polyfill.ts b/src/polyfill.ts
index c987c5ce..904e6b6c 100644
--- a/src/polyfill.ts
+++ b/src/polyfill.ts
@@ -444,7 +444,7 @@ export async function polyfill(animationFrame?: boolean) {
   // pre parse CSS styles that we need to cascade
   const cascadeCausedChanges = await cascadeCSS(styleData);
   if (cascadeCausedChanges) {
-    styleData = await transformCSS(styleData);
+    await transformCSS(styleData);
   }
   // parse CSS
   const { rules, inlineStyles } = await parseCSS(styleData);
diff --git a/src/transform.ts b/src/transform.ts
index a22f45e2..a07cfdd8 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -34,16 +34,14 @@ export async function transformCSS(
   inlineStyles?: Map<HTMLElement, Record<string, string>>,
   cleanup = false,
 ) {
-  const updatedStyleData: StyleData[] = [];
   styleData.forEach(async (data) => {
-    const { el, css, changed, original } = data;
-    const updatedObject: StyleData = { el, css, changed: false, original };
-    if (changed) {
+    const { el, css, changed, updated } = data;
+    if (changed && !updated) {
       if (el.tagName.toLowerCase() === 'style') {
         // Handle inline stylesheets
         el.innerHTML = css;
       } else if (el.tagName.toLowerCase() === 'link') {
-        updatedObject.el = await replaceLink(el as HTMLLinkElement, css);
+        data.el = await replaceLink(el as HTMLLinkElement, css);
       } else if (el.hasAttribute(INLINE_STYLES_ID_ATTR)) {
         // Handle inline styles
         const attr = el.getAttribute(INLINE_STYLES_ID_ATTR);
@@ -62,12 +60,11 @@ export async function transformCSS(
           el.setAttribute('style', styles);
         }
       }
+      data.updated = true;
     }
     // Remove no-longer-needed data-attribute
     if (cleanup && el.hasAttribute(INLINE_STYLES_ID_ATTR)) {
       el.removeAttribute(INLINE_STYLES_ID_ATTR);
     }
-    updatedStyleData.push(updatedObject);
   });
-  return updatedStyleData;
 }
diff --git a/src/utils.ts b/src/utils.ts
index f4df6171..5390e2cd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -31,6 +31,7 @@ export interface StyleData {
   url?: URL;
   changed?: boolean;
   original: string;
+  updated?: boolean;
 }
 
 export const POSITION_ANCHOR_PROPERTY = `--position-anchor-${nanoid(12)}`;