1 files changed, 26 insertions, 9 deletions
diff --git a/packages/astro/src/build/bundle/css.ts b/packages/astro/src/build/bundle/css.ts
index 6da84da02..e585ce393 100644
--- a/packages/astro/src/build/bundle/css.ts
+++ b/packages/astro/src/build/bundle/css.ts
@@ -115,23 +115,40 @@ export async function bundleCSS({
       if (buildState[id].contentType !== 'text/html') return;
 
       const $ = cheerio.load(buildState[id].contents);
-      const pageCSS = new Set<string>(); // keep track of page-specific CSS so we remove dupes
+      const stylesheets = new Set<string>(); // keep track of page-specific CSS so we remove dupes
+      const preloads = new Set<string>(); // list of stylesheets preloads, to remove dupes
+
       $('link[href]').each((i, el) => {
         const srcPath = getSrcPath(id, { astroConfig });
         const oldHref = getDistPath($(el).attr('href') || '', { astroConfig, srcPath }); // note: this may be a relative URL; transform to absolute to find a buildOutput match
         const newHref = cssMap.get(oldHref);
-        if (newHref) {
-          // note: link[href] will select too much, however, remote CSS and non-CSS link tags won’t be in cssMap
-          if (pageCSS.has(newHref)) {
-            $(el).remove(); // this is a dupe; remove
+
+        if (!newHref) {
+          return
+        }
+
+        if (el.attribs?.rel === 'preload') {
+          if (preloads.has(newHref)) {
+            $(el).remove();
           } else {
-            $(el).attr('href', cssHashes.get(newHref) || ''); // new CSS; update href (important! use cssHashes, not cssMap)
-            pageCSS.add(newHref);
+            $(el).attr("href", cssHashes.get(newHref) || "");
+            preloads.add(newHref);
           }
+          return
+        }
+
+        if (stylesheets.has(newHref)) {
+          $(el).remove(); // this is a dupe; remove
+        } else {
+          $(el).attr("href", cssHashes.get(newHref) || ""); // new CSS; update href (important! use cssHashes, not cssMap)
+
           // bonus: add [rel] and [type]. not necessary, but why not?
-          $(el).attr('rel', 'stylesheet');
-          $(el).attr('type', 'text/css');
+          $(el).attr("rel", "stylesheet");
+          $(el).attr("type", "text/css");
+
+          stylesheets.add(newHref);
         }
+
       });
       (buildState[id] as any).contents = $.html(); // save updated HTML in global buildState
     })