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:
127
src/app.css
127
src/app.css
@@ -1,75 +1,90 @@
|
|||||||
:global(body) {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family:
|
||||||
background: #f9fafb;
|
"Space Grotesk",
|
||||||
color: #1f2937;
|
-apple-system,
|
||||||
-webkit-font-smoothing: antialiased;
|
BlinkMacSystemFont,
|
||||||
-moz-osx-font-smoothing: grayscale;
|
"Segoe UI",
|
||||||
line-height: 1.5;
|
Roboto,
|
||||||
|
sans-serif;
|
||||||
|
background: #f9fafb;
|
||||||
|
color: #1f2937;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(*),
|
*,
|
||||||
:global(*::before),
|
*::before,
|
||||||
:global(*::after) {
|
*::after {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(h1, h2, h3, h4, h5, h6, p) {
|
h1,
|
||||||
margin: 0;
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(button, input, select, textarea) {
|
button,
|
||||||
font-family: inherit;
|
input,
|
||||||
font-size: inherit;
|
select,
|
||||||
color: inherit;
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(select) {
|
select {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-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-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-repeat: no-repeat;
|
||||||
background-position: right 0.75rem center;
|
background-position: right 0.75rem center;
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input[type='range']) {
|
input[type="range"] {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input[type='range']::-webkit-slider-runnable-track) {
|
input[type="range"]::-webkit-slider-runnable-track {
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: #e5e7eb;
|
background: #e5e7eb;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input[type='range']::-webkit-slider-thumb) {
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #3b82f6;
|
background: #3b82f6;
|
||||||
border: 2px solid #ffffff;
|
border: 2px solid #ffffff;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
margin-top: -7px;
|
margin-top: -7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input[type='range']::-moz-range-track) {
|
input[type="range"]::-moz-range-track {
|
||||||
height: 6px;
|
height: 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: #e5e7eb;
|
background: #e5e7eb;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(input[type='range']::-moz-range-thumb) {
|
input[type="range"]::-moz-range-thumb {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #3b82f6;
|
background: #3b82f6;
|
||||||
border: 2px solid #ffffff;
|
border: 2px solid #ffffff;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
29
src/app.html
29
src/app.html
@@ -1,16 +1,19 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="text-scale" content="scale" />
|
<meta name="text-scale" content="scale" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<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" />
|
<link
|
||||||
<title>English Style Converter</title>
|
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"
|
||||||
%sveltekit.head%
|
rel="stylesheet"
|
||||||
</head>
|
/>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<title>English Style Converter</title>
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
%sveltekit.head%
|
||||||
</body>
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user