review

Author: jgerigmeyer

Diff for: index.html

@@ -1329,7 +1329,6 @@ <h2>
   top: anchor(center);
 }</code></pre>
     </section>
-
     <section id="imports" class="demo-item">
       <h2>
         <a href="#imports" aria-hidden="true">🔗</a>
@@ -1340,17 +1339,20 @@ <h2>
         <div class="target" id="target-1">Target One</div>
         <div class="target" id="target-2">Target Two</div>
       </div>
-      <p class="note">
-        With polyfill applied: Target and Anchor text is orange (from styles
-        defined in an imported stylesheet). Target One is positioned at the
-        bottom right corner of the Anchor. The Anchor has an envelope icon on
-        both sides of the text.<br />
-
-        <strong>Note:</strong> Target Two has <code>position-area</code> defined
-        in an imported stylesheet, which is not parsed by the polyfill, so it is
-        not positioned correctly. It should be positioned at the bottom left
-        corner.
-      </p>
+      <div class="note">
+        <p>
+          With polyfill applied: Target and Anchor text is orange (from styles
+          defined in an imported stylesheet). Target One is positioned at the
+          bottom right corner of the Anchor. The Anchor has an envelope icon on
+          both sides of the text.
+        </p>
+        <p>
+          <strong>Note:</strong> Target Two has
+          <code>position-area</code> defined in an imported stylesheet, which is
+          not parsed by the polyfill, so it is not positioned correctly. It
+          should be positioned at the bottom left corner.
+        </p>
+      </div>
       <pre><code class="language-css">@import url('./import-is-imported-url.css') supports(display: grid) screen and (min-width: 400px);
 @import './import-is-imported-string.css';
 
@@ -1359,22 +1361,24 @@ <h2>
 }
 
 /* ./import-is-imported-url.css */
-#imports #target-1{
+#imports #target-1 {
   color: var(--brand-orange);
 }
 
-#imports #target-2{
+#imports #target-2 {
   position-area: block-end inline-start;
   color: var(--brand-orange);
 }
 
+#imports .anchor::before {
+  content: url('./mail.svg');
+}
+
 /* ./import-is-imported-string.css */
-#imports .anchor{
+#imports .anchor {
   color: var(--brand-orange);
-}
-      </code></pre>
+}</code></pre>
     </section>
-
     <section id="sponsor">
       <h2>Sponsor OddBird’s OSS Work</h2>
       <p>

Diff for: src/polyfill.ts

@@ -593,14 +593,14 @@ export async function polyfill(
   // pre parse CSS styles that we need to cascade
   const cascadeCausedChanges = cascadeCSS(styleData);
   if (cascadeCausedChanges) {
-    styleData = await transformCSS(styleData);
+    styleData = transformCSS(styleData);
   }
   // parse CSS
   const { rules, inlineStyles } = await parseCSS(styleData);
 
   if (Object.values(rules).length) {
     // update source code
-    await transformCSS(styleData, inlineStyles, true);
+    transformCSS(styleData, inlineStyles, true);
 
     // calculate position values
     await position(rules, options.useAnimationFrame);

Diff for: src/transform.ts

@@ -21,7 +21,7 @@ const excludeAttributes = [
   'type',
 ];
 
-export async function transformCSS(
+export function transformCSS(
   styleData: StyleData[],
   inlineStyles?: Map<HTMLElement, Record<string, string>>,
   cleanup = false,

Diff for: tests/unit/transform.test.ts

@@ -1,7 +1,7 @@
 import { transformCSS } from '../../src/transform.js';
 
 describe('transformCSS', () => {
-  it('parses and removes new anchor positioning CSS after transformation to JS', async () => {
+  it('parses and removes new anchor positioning CSS after transformation to JS', () => {
     document.head.innerHTML = `
       <link type="text/css" href="/sample.css" data-link="true" crossorigin="anonymous" />
       <style>
@@ -32,7 +32,7 @@ describe('transformCSS', () => {
     ];
     const inlineStyles = new Map();
     inlineStyles.set(div, { '--foo': '--bar' });
-    await transformCSS(styleData, inlineStyles, true);
+    transformCSS(styleData, inlineStyles, true);
 
     expect(link.isConnected).toBe(false);
     const newLink = document.querySelector(
@@ -49,7 +49,7 @@ describe('transformCSS', () => {
     expect(div2.hasAttribute('data-has-inline-styles')).toBeFalsy();
   });
 
-  it('preserves id, media, and title attributes when replacing link elements', async () => {
+  it('preserves id, media, and title attributes when replacing link elements', () => {
     document.head.innerHTML = `
       <link id="the-link" media="screen" title="stylish" rel="stylesheet" href="/sample.css"/>
     `;
@@ -58,7 +58,7 @@ describe('transformCSS', () => {
     const inlineStyles = new Map();
     const initialStyleElement = document.querySelector('style');
     expect(initialStyleElement).toBe(null);
-    await transformCSS(styleData, inlineStyles, true);
+    transformCSS(styleData, inlineStyles, true);
     const transformedStyleElement = document.querySelector(
       'style',
     ) as HTMLStyleElement;
@@ -70,7 +70,7 @@ describe('transformCSS', () => {
     expect(transformedLink).toBe(null);
   });
 
-  it('creates new style elements for created styles', async () => {
+  it('creates new style elements for created styles', () => {
     document.head.innerHTML = ``;
     const styleData = [
       {
@@ -80,7 +80,7 @@ describe('transformCSS', () => {
         created: true,
       },
     ];
-    await transformCSS(styleData, undefined, true);
+    transformCSS(styleData, undefined, true);
 
     const createdStyleElement = document.querySelector(
       'style',