fix: remove :global() from app.css — it's only valid in Svelte <style> blocks

Vite processes imported .css files as plain CSS, not Svelte styles.
:global() is a Svelte-specific directive that only works inside
component <style> tags. In standalone .css files it gets mangled into
invalid :is(:global(...)) selectors. Since Vite-imported CSS is already
global by nature, removing :global() wrappers produces correct output.
This commit is contained in:
2026-04-12 22:58:13 -04:00
parent 0cf703ccd9
commit 5a329ee426
2 changed files with 89 additions and 71 deletions

View File

@@ -1,16 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<title>English Style Converter</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="text-scale" content="scale" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"
rel="stylesheet"
/>
<title>English Style Converter</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>