diff --git a/scripts/critical-css.js b/scripts/critical-css.js index 80ecbb4..6fbd1f8 100644 --- a/scripts/critical-css.js +++ b/scripts/critical-css.js @@ -5,6 +5,8 @@ import { readFileSync, writeFileSync, readdirSync } from 'fs'; import { join, dirname } from 'path'; import { fileURLToPath } from 'url'; +import { log, error } from 'node:console'; +import process from 'node:process'; import Beasties from 'beasties'; const __dirname = dirname(fileURLToPath(import.meta.url)); @@ -23,20 +25,49 @@ const beasties = new Beasties({ path: buildDir, preload: 'default', logLevel: 'warn', - inlineThreshold: 50 * 1024, // inline any stylesheet < 50KB - minimumExternalSize: 50 * 1024 // inline any leftover < 50KB - }); + inlineThreshold: 50 * 1024, + minimumExternalSize: 50 * 1024 +}); + +/** + * Remove SvelteKit wrapper div and Svelte SSR fragment comments from HTML. + * With csr = false these add noise and the inline style is unnecessary. + */ +function cleanHtml(html) { + // Remove extra SvelteKit body attribute: data-sveltekit-preload-data="hover" + html = html.replace(//i, ''); + // Remove SvelteKit's root wrapper:
...
+ html = html.replace(//i, ''); + const bodyEnd = html.indexOf(''); + if (bodyEnd !== -1) { + const beforeBody = html.slice(0, bodyEnd); + const lastDiv = beforeBody.lastIndexOf(''); + if (lastDiv !== -1) { + html = beforeBody.slice(0, lastDiv) + beforeBody.slice(lastDiv + 6) + html.slice(bodyEnd); + } + } + // Remove Svelte fragment/hydration comments (unused when csr = false) + html = html + .replace(//g, '') + .replace(//g, '') + .replace(//g, '') + .replace(//g, '') + .replace(//g, ''); + return html; +} async function main() { const htmlFiles = getFiles(buildDir, '.html'); for (const htmlFile of htmlFiles) { - const html = readFileSync(htmlFile, 'utf8'); - const inlined = await beasties.process(html); - writeFileSync(htmlFile, inlined); + let html = readFileSync(htmlFile, 'utf8'); + html = await beasties.process(html); + html = cleanHtml(html); + writeFileSync(htmlFile, html); } - console.log('Critical CSS inlined:', htmlFiles.length, 'file(s)'); + log('Critical CSS inlined:', htmlFiles.length, 'file(s)'); } + main().catch((err) => { - console.error(err); + error(err); process.exit(1); }); diff --git a/src/lib/components/Lightbox.svelte b/src/lib/components/Lightbox.svelte index cafbb3b..fe268ad 100644 --- a/src/lib/components/Lightbox.svelte +++ b/src/lib/components/Lightbox.svelte @@ -5,7 +5,12 @@ */ -