Merge pull request #258 from oddbird/non-css-link

Warn if mime type for a <link> is not CSS
oddbird · Oct 14, 2024 · 919b7c4 · 919b7c4
2 parents 6f2bff4 + a199f0f
commit 919b7c4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -16,6 +16,8 @@
       defer
     ></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" />

diff --git a/src/fetch.ts b/src/fetch.ts
@@ -2,6 +2,8 @@ import { nanoid } from 'nanoid/non-secure';
 
 import { type StyleData } from './utils.js';
 
+const INVALID_MIME_TYPE_ERROR = 'InvalidMimeType';
+
 export function isStyleLink(link: HTMLLinkElement): link is HTMLLinkElement {
   return Boolean(
     (link.type === 'text/css' || link.rel === 'stylesheet') && link.href,
@@ -18,17 +20,35 @@ function getStylesheetUrl(link: HTMLLinkElement): URL | undefined {
 async function fetchLinkedStylesheets(
   sources: Partial<StyleData>[],
 ): Promise<StyleData[]> {
-  return Promise.all(
+  const results = await Promise.all(
     sources.map(async (data) => {
       if (!data.url) {
         return data as StyleData;
       }
       // fetch css and add to array
-      const response = await fetch(data.url.toString());
-      const css = await response.text();
-      return { ...data, css } as StyleData;
+      try {
+        const response = await fetch(data.url.toString());
+        const type = response.headers.get('content-type');
+        if (!type?.startsWith('text/css')) {
+          const error = new Error(
+            `Error loading ${data.url}: expected content-type "text/css", got "${type}".`,
+          );
+          error.name = INVALID_MIME_TYPE_ERROR;
+          throw error;
+        }
+        const css = await response.text();
+        return { ...data, css } as StyleData;
+      } catch (error) {
+        if (error instanceof Error && error.name === INVALID_MIME_TYPE_ERROR) {
+          // eslint-disable-next-line no-console
+          console.warn(error);
+          return null;
+        }
+        throw error;
+      }
     }),
   );
+  return results.filter((loaded) => loaded !== null);
 }
 
 // Searches for all elements with inline style attributes that include `anchor`.

diff --git a/tests/helpers.ts b/tests/helpers.ts
@@ -25,3 +25,8 @@ export function cascadeCSSForTest(css: string) {
   cascadeCSS([styleObj]);
   return styleObj.css;
 }
+
+export const requestWithCSSType = (css: string) => ({
+  body: css,
+  headers: { 'Content-Type': 'text/css' },
+});
diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts
@@ -1,7 +1,7 @@
 import fetchMock from 'fetch-mock';
 
 import { fetchCSS } from '../../src/fetch.js';
-import { getSampleCSS } from '../helpers.js';
+import { getSampleCSS, requestWithCSSType } from '../helpers.js';
 
 describe('fetch stylesheet', () => {
   beforeAll(() => {
@@ -22,7 +22,7 @@ describe('fetch stylesheet', () => {
 
   it('fetches CSS', async () => {
     const css = getSampleCSS('anchor-positioning');
-    fetchMock.getOnce('end:sample.css', css);
+    fetchMock.getOnce('end:sample.css', requestWithCSSType(css));
     const styleData = await fetchCSS();
 
     expect(styleData).toHaveLength(2);
@@ -81,7 +81,7 @@ describe('fetch inline styles', () => {
 
   it('fetch returns inline CSS', async () => {
     const css = getSampleCSS('anchor-positioning');
-    fetchMock.getOnce('end:sample.css', css);
+    fetchMock.getOnce('end:sample.css', requestWithCSSType(css));
     const styleData = await fetchCSS();
 
     expect(styleData).toHaveLength(4);