diff --git a/packages/beasties/README.md b/packages/beasties/README.md
index 2c1be46..f1fa412 100644
--- a/packages/beasties/README.md
+++ b/packages/beasties/README.md
@@ -240,11 +240,12 @@ Note: JS indicates a strategy requiring JavaScript (falls back to `JS
- **"swap":** Convert stylesheet links to preloads that swap to `rel="stylesheet"` once loaded ([details](https://www.filamentgroup.com/lab/load-css-simpler/#the-code)). JS
- **"swap-high":** Use `` and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-high.html)). JS
+- **"swap-low":** Use `` (no `preload` in `rel` here!) and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-low.html)). It ensures lowest priority compared to `swap` and `swap-high`. JS
- **"js":** Inject an asynchronous CSS loader similar to [LoadCSS](https://github.com/filamentgroup/loadCSS) and use it to load stylesheets. JS
- **"js-lazy":** Like `"js"`, but the stylesheet is disabled until fully loaded.
- **false:** Disables adding preload tags.
-Type: (default | `"body"` | `"media"` | `"swap"` | `"swap-high"` | `"js"` | `"js-lazy"`)
+Type: (default | `"body"` | `"media"` | `"swap"` | `"swap-high"` | `"swap-low"` | `"js"` | `"js-lazy"`)
## Similar Libraries
diff --git a/packages/beasties/src/index.d.ts b/packages/beasties/src/index.d.ts
index f71fb19..3c0f79f 100644
--- a/packages/beasties/src/index.d.ts
+++ b/packages/beasties/src/index.d.ts
@@ -47,7 +47,7 @@ export interface Options {
pruneSource?: boolean
mergeStylesheets?: boolean
additionalStylesheets?: string[]
- preload?: 'body' | 'media' | 'swap' | 'swap-high' | 'js' | 'js-lazy'
+ preload?: 'body' | 'media' | 'swap' | 'swap-high' | 'swap-low' | 'js' | 'js-lazy'
noscriptFallback?: boolean
inlineFonts?: boolean
preloadFonts?: boolean
diff --git a/packages/beasties/src/index.ts b/packages/beasties/src/index.ts
index ee89522..7958736 100644
--- a/packages/beasties/src/index.ts
+++ b/packages/beasties/src/index.ts
@@ -310,6 +310,13 @@ export default class Beasties {
link.setAttribute('onload', `this.title='';this.rel='stylesheet'`)
noscriptFallback = true
}
+ else if (preloadMode === 'swap-low') {
+ // @see http://filamentgroup.github.io/loadCSS/test/new-low.html
+ link.setAttribute('rel', 'alternate stylesheet')
+ link.setAttribute('title', 'styles')
+ link.setAttribute('onload', `this.title='';this.rel='stylesheet'`)
+ noscriptFallback = true
+ }
else if (preloadMode === 'swap') {
link.setAttribute('onload', 'this.rel=\'stylesheet\'')
updateLinkToPreload = true
diff --git a/packages/beasties/src/types.ts b/packages/beasties/src/types.ts
index 0100045..7a2f7b4 100644
--- a/packages/beasties/src/types.ts
+++ b/packages/beasties/src/types.ts
@@ -10,11 +10,12 @@ import type { Logger, LogLevel } from './util'
* - **"media":** Load stylesheets asynchronously by adding `media="not x"` and removing once loaded. JS
* - **"swap":** Convert stylesheet links to preloads that swap to `rel="stylesheet"` once loaded ([details](https://www.filamentgroup.com/lab/load-css-simpler/#the-code)). JS
* - **"swap-high":** Use `` and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-high.html)). JS
+ * - **"swap-low":** Use `` (no `preload` in `rel` here!) and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-low.html)). It ensures lowest priority compared to `swap` and `swap-high`. JS
* - **"js":** Inject an asynchronous CSS loader similar to [LoadCSS](https://github.com/filamentgroup/loadCSS) and use it to load stylesheets. JS
* - **"js-lazy":** Like `"js"`, but the stylesheet is disabled until fully loaded.
* - **false:** Disables adding preload tags.
*/
-type PreloadStrategy = 'body' | 'media' | 'swap' | 'swap-high' | 'js' | 'js-lazy'
+type PreloadStrategy = 'body' | 'media' | 'swap' | 'swap-high' | 'swap-low' | 'js' | 'js-lazy'
/**
* Controls which keyframes rules are inlined.
diff --git a/packages/beasties/test/__snapshots__/beasties.test.ts.snap b/packages/beasties/test/__snapshots__/beasties.test.ts.snap
index adcca85..1782f47 100644
--- a/packages/beasties/test/__snapshots__/beasties.test.ts.snap
+++ b/packages/beasties/test/__snapshots__/beasties.test.ts.snap
@@ -188,3 +188,29 @@ exports[`preload modes > should use "swap" preload mode correctly 1`] = `