From 5a329ee426b3fc70803394753fa2f3d43dd28969 Mon Sep 17 00:00:00 2001
From: Santhosh Janardhanan <santhoshj@gmail.com>
Date: Sun, 12 Apr 2026 22:58:13 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20remove=20:global()=20from=20app.css=20?=
 =?UTF-8?q?=E2=80=94=20it's=20only=20valid=20in=20Svelte=20<style>=20block?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app.css  | 129 ++++++++++++++++++++++++++++-----------------------
 src/app.html |  31 +++++++------
 2 files changed, 89 insertions(+), 71 deletions(-)

diff --git a/src/app.css b/src/app.css
index eab58c0..8414242 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,75 +1,90 @@
-:global(body) {
-	margin: 0;
-	padding: 0;
-	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-	background: #f9fafb;
-	color: #1f2937;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	line-height: 1.5;
+body {
+    margin: 0;
+    padding: 0;
+    font-family:
+        "Space Grotesk",
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        sans-serif;
+    background: #f9fafb;
+    color: #1f2937;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
 }
 
-:global(*),
-:global(*::before),
-:global(*::after) {
-	box-sizing: border-box;
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
 }
 
-:global(h1, h2, h3, h4, h5, h6, p) {
-	margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
 }
 
-:global(button, input, select, textarea) {
-	font-family: inherit;
-	font-size: inherit;
-	color: inherit;
+button,
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
 }
 
-:global(select) {
-	appearance: none;
-	-webkit-appearance: none;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
-	background-repeat: no-repeat;
-	background-position: right 0.75rem center;
-	padding-right: 2rem;
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    padding-right: 2rem;
 }
 
-:global(input[type='range']) {
-	appearance: none;
-	-webkit-appearance: none;
-	background: transparent;
-	cursor: pointer;
+input[type="range"] {
+    appearance: none;
+    -webkit-appearance: none;
+    background: transparent;
+    cursor: pointer;
 }
 
-:global(input[type='range']::-webkit-slider-runnable-track) {
-	height: 6px;
-	border-radius: 3px;
-	background: #e5e7eb;
+input[type="range"]::-webkit-slider-runnable-track {
+    height: 6px;
+    border-radius: 3px;
+    background: #e5e7eb;
 }
 
-:global(input[type='range']::-webkit-slider-thumb) {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	background: #3b82f6;
-	border: 2px solid #ffffff;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-	margin-top: -7px;
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #3b82f6;
+    border: 2px solid #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    margin-top: -7px;
 }
 
-:global(input[type='range']::-moz-range-track) {
-	height: 6px;
-	border-radius: 3px;
-	background: #e5e7eb;
+input[type="range"]::-moz-range-track {
+    height: 6px;
+    border-radius: 3px;
+    background: #e5e7eb;
 }
 
-:global(input[type='range']::-moz-range-thumb) {
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	background: #3b82f6;
-	border: 2px solid #ffffff;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
\ No newline at end of file
+input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #3b82f6;
+    border: 2px solid #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
diff --git a/src/app.html b/src/app.html
index 4770a13..4e3a133 100644
--- a/src/app.html
+++ b/src/app.html
@@ -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>
\ No newline at end of file
+    <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>