fix(beasties): add as=style for swap-high preload strategy

danielroe · danielroe · commit 32d96303d54c · 2026-01-20T15:11:24.000Z
resolves #158
diff --git a/packages/beasties/src/index.ts b/packages/beasties/src/index.ts
@@ -381,6 +381,7 @@ export default class Beasties {
         // @see http://filamentgroup.github.io/loadCSS/test/new-high.html
         link.setAttribute('rel', 'alternate stylesheet preload')
         link.setAttribute('title', 'styles')
+        link.setAttribute('as', 'style')
         link.setAttribute('onload', `this.title='';this.rel='stylesheet'`)
         noscriptFallback = true
       }
diff --git a/packages/beasties/test/__snapshots__/preload.test.ts.snap b/packages/beasties/test/__snapshots__/preload.test.ts.snap
@@ -56,7 +56,7 @@ exports[`preload modes > should use "swap-high" preload mode correctly 1`] = `
 "
       <html data-beasties-container>
         <head>
-          <style>h1{color:blue}</style><link rel="alternate stylesheet preload" href="/style.css" title="styles" onload="this.title='';this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/style.css"></noscript>
+          <style>h1{color:blue}</style><link rel="alternate stylesheet preload" href="/style.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/style.css"></noscript>
         </head>
         <body>
           <h1>Hello World!</h1>
diff --git a/packages/beasties/test/preload.test.ts b/packages/beasties/test/preload.test.ts
@@ -154,7 +154,7 @@ describe('preload modes', () => {
       </html>
     `)
     expect(result).toContain('<style>h1{color:blue}</style>')
-    expect(result).toContain(`<link rel="alternate stylesheet preload" href="/style.css" title="styles" onload="this.title='';this.rel='stylesheet'">`)
+    expect(result).toContain(`<link rel="alternate stylesheet preload" href="/style.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">`)
     expect(result).toContain('<noscript><link rel="stylesheet" href="/style.css"></noscript>')
     expect(result).toMatchSnapshot()
   })

Original file line number	Diff line number	Diff line change
`@@ -381,6 +381,7 @@ export default class Beasties {`
`381`	`381`	`// @see http://filamentgroup.github.io/loadCSS/test/new-high.html`
`382`	`382`	`link.setAttribute('rel', 'alternate stylesheet preload')`
`383`	`383`	`link.setAttribute('title', 'styles')`
	`384`	`+ link.setAttribute('as', 'style')`
`384`	`385`	link.setAttribute('onload', `this.title='';this.rel='stylesheet'`)
`385`	`386`	`noscriptFallback = true`
`386`	`387`	`}`
Original file line number	Diff line number	Diff line change
@@ -56,7 +56,7 @@ exports[`preload modes > should use "swap-high" preload mode correctly 1`] = `
`56`	`56`	`"`
`57`	`57`	`<html data-beasties-container>`
`58`	`58`	`<head>`
`59`		`- <style>h1{color:blue}</style><link rel="alternate stylesheet preload" href="/style.css" title="styles" onload="this.title='';this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/style.css"></noscript>`
	`59`	`+ <style>h1{color:blue}</style><link rel="alternate stylesheet preload" href="/style.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/style.css"></noscript>`
`60`	`60`	`</head>`
`61`	`61`	`<body>`
`62`	`62`	`<h1>Hello World!</h1>`