From e0212ca4b94b1ef392e9e20b629fab47ca039adc Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Fri, 3 Apr 2026 23:53:46 -0700
Subject: [PATCH] Remove the svelte-preprocess dev dependency, keeping global
 styles with a custom Vite plugin (#4003)

* Remove the svelte-preprocess dev dependency, keeping global styles with a custom Vite plugin

* More robust style tag detection

* Fix CSS regressions
---
 frontend/package-lock.json                    | 57 -------------------
 frontend/package.json                         |  1 -
 frontend/src/components/Editor.svelte         |  2 +-
 .../floating-menus/ColorPicker.svelte         |  2 +-
 .../components/floating-menus/Dialog.svelte   |  2 +-
 .../floating-menus/EyedropperPreview.svelte   |  2 +-
 .../components/floating-menus/MenuList.svelte |  2 +-
 .../floating-menus/NodeCatalog.svelte         |  2 +-
 .../components/floating-menus/Tooltip.svelte  |  2 +-
 .../layout/ConditionalWrapper.svelte          |  2 +-
 .../src/components/layout/FloatingMenu.svelte |  2 +-
 .../src/components/layout/LayoutCol.svelte    |  2 +-
 .../src/components/layout/LayoutRow.svelte    |  2 +-
 frontend/src/components/panels/Data.svelte    |  2 +-
 .../src/components/panels/Document.svelte     |  2 +-
 frontend/src/components/panels/Layers.svelte  |  2 +-
 .../src/components/panels/Properties.svelte   |  2 +-
 frontend/src/components/panels/Welcome.svelte |  2 +-
 frontend/src/components/views/Graph.svelte    |  6 +-
 .../components/widgets/WidgetLayout.svelte    |  2 +-
 .../components/widgets/WidgetSection.svelte   |  2 +-
 .../src/components/widgets/WidgetSpan.svelte  |  2 +-
 .../src/components/widgets/WidgetTable.svelte |  2 +-
 .../buttons/BreadcrumbTrailButtons.svelte     |  2 +-
 .../widgets/buttons/IconButton.svelte         |  2 +-
 .../widgets/buttons/ImageButton.svelte        |  2 +-
 .../buttons/ParameterExposeButton.svelte      |  2 +-
 .../widgets/buttons/PopoverButton.svelte      |  2 +-
 .../widgets/buttons/TextButton.svelte         | 20 +++----
 .../widgets/inputs/CheckboxInput.svelte       |  2 +-
 .../widgets/inputs/ColorInput.svelte          |  2 +-
 .../widgets/inputs/CurveInput.svelte          |  2 +-
 .../widgets/inputs/DropdownInput.svelte       |  2 +-
 .../widgets/inputs/FieldInput.svelte          |  2 +-
 .../widgets/inputs/NumberInput.svelte         |  2 +-
 .../widgets/inputs/RadioInput.svelte          |  2 +-
 .../widgets/inputs/ReferencePointInput.svelte |  2 +-
 .../widgets/inputs/RulerInput.svelte          |  2 +-
 .../widgets/inputs/ScrollbarInput.svelte      |  2 +-
 .../widgets/inputs/SpectrumInput.svelte       |  2 +-
 .../widgets/inputs/TextAreaInput.svelte       |  2 +-
 .../widgets/inputs/TextInput.svelte           |  2 +-
 .../widgets/inputs/WorkingColorsInput.svelte  |  2 +-
 .../widgets/labels/IconLabel.svelte           |  2 +-
 .../widgets/labels/ImageLabel.svelte          |  2 +-
 .../widgets/labels/Separator.svelte           |  2 +-
 .../widgets/labels/ShortcutLabel.svelte       | 44 +++++++-------
 .../widgets/labels/TextLabel.svelte           |  2 +-
 .../src/components/window/MainWindow.svelte   |  2 +-
 frontend/src/components/window/Panel.svelte   |  2 +-
 .../src/components/window/StatusBar.svelte    |  2 +-
 .../src/components/window/TitleBar.svelte     |  2 +-
 .../src/components/window/Workspace.svelte    |  2 +-
 frontend/svelte.config.js                     |  4 +-
 frontend/vite.config.ts                       | 15 ++++-
 55 files changed, 99 insertions(+), 144 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 49f3289e5c..4f2bd398e0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -27,7 +27,6 @@
 				"sass": "^1.98.0",
 				"svelte": "^5.54.1",
 				"svelte-check": "^4.4.5",
-				"svelte-preprocess": "^6.0.3",
 				"tar": "^7.5.12",
 				"typescript": "^5.9.3",
 				"typescript-eslint": "^8.57.1",
@@ -6039,62 +6038,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/svelte-preprocess": {
-			"version": "6.0.3",
-			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
-			"integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==",
-			"dev": true,
-			"hasInstallScript": true,
-			"license": "MIT",
-			"engines": {
-				"node": ">= 18.0.0"
-			},
-			"peerDependencies": {
-				"@babel/core": "^7.10.2",
-				"coffeescript": "^2.5.1",
-				"less": "^3.11.3 || ^4.0.0",
-				"postcss": "^7 || ^8",
-				"postcss-load-config": ">=3",
-				"pug": "^3.0.0",
-				"sass": "^1.26.8",
-				"stylus": ">=0.55",
-				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
-				"typescript": "^5.0.0"
-			},
-			"peerDependenciesMeta": {
-				"@babel/core": {
-					"optional": true
-				},
-				"coffeescript": {
-					"optional": true
-				},
-				"less": {
-					"optional": true
-				},
-				"postcss": {
-					"optional": true
-				},
-				"postcss-load-config": {
-					"optional": true
-				},
-				"pug": {
-					"optional": true
-				},
-				"sass": {
-					"optional": true
-				},
-				"stylus": {
-					"optional": true
-				},
-				"sugarss": {
-					"optional": true
-				},
-				"typescript": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/synckit": {
 			"version": "0.11.12",
 			"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9450f8f356..3250957599 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -48,7 +48,6 @@
 		"sass": "^1.98.0",
 		"svelte": "^5.54.1",
 		"svelte-check": "^4.4.5",
-		"svelte-preprocess": "^6.0.3",
 		"tar": "^7.5.12",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.57.1",
diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte
index 9592e34bf5..bc507dc93a 100644
--- a/frontend/src/components/Editor.svelte
+++ b/frontend/src/components/Editor.svelte
@@ -75,7 +75,7 @@
 
 <MainWindow />
 
-<style lang="scss" global>
+<style lang="scss">
 	// Disable the spinning loading indicator
 	body::before,
 	body::after {
diff --git a/frontend/src/components/floating-menus/ColorPicker.svelte b/frontend/src/components/floating-menus/ColorPicker.svelte
index 3a6774da90..73bf170a0f 100644
--- a/frontend/src/components/floating-menus/ColorPicker.svelte
+++ b/frontend/src/components/floating-menus/ColorPicker.svelte
@@ -732,7 +732,7 @@
 	</LayoutRow>
 </FloatingMenu>
 
-<style lang="scss" global>
+<style lang="scss">
 	.color-picker {
 		--widget-height: 24px;
 		--picker-size: 256px;
diff --git a/frontend/src/components/floating-menus/Dialog.svelte b/frontend/src/components/floating-menus/Dialog.svelte
index 5a83073adf..4e5e0da385 100644
--- a/frontend/src/components/floating-menus/Dialog.svelte
+++ b/frontend/src/components/floating-menus/Dialog.svelte
@@ -73,7 +73,7 @@
 	</LayoutRow>
 </FloatingMenu>
 
-<style lang="scss" global>
+<style lang="scss">
 	.dialog {
 		position: absolute;
 		pointer-events: none;
diff --git a/frontend/src/components/floating-menus/EyedropperPreview.svelte b/frontend/src/components/floating-menus/EyedropperPreview.svelte
index b89e777fc2..7c38a80f5d 100644
--- a/frontend/src/components/floating-menus/EyedropperPreview.svelte
+++ b/frontend/src/components/floating-menus/EyedropperPreview.svelte
@@ -63,7 +63,7 @@
 	</div>
 </FloatingMenu>
 
-<style lang="scss" global>
+<style lang="scss">
 	.eyedropper-preview {
 		pointer-events: none;
 
diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte
index 66cccf0c91..1a8e0279a6 100644
--- a/frontend/src/components/floating-menus/MenuList.svelte
+++ b/frontend/src/components/floating-menus/MenuList.svelte
@@ -560,7 +560,7 @@
 	</LayoutCol>
 </FloatingMenu>
 
-<style lang="scss" global>
+<style lang="scss">
 	.menu-list {
 		.search {
 			margin: 4px;
diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index bb23f1a06a..08d287d4b7 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -136,7 +136,7 @@
 	</div>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.node-catalog {
 		max-height: 30vh;
 		min-width: 250px;
diff --git a/frontend/src/components/floating-menus/Tooltip.svelte b/frontend/src/components/floating-menus/Tooltip.svelte
index b9f308e5c5..643d23bdda 100644
--- a/frontend/src/components/floating-menus/Tooltip.svelte
+++ b/frontend/src/components/floating-menus/Tooltip.svelte
@@ -76,7 +76,7 @@
 	</div>
 {/if}
 
-<style lang="scss" global>
+<style lang="scss">
 	.tooltip {
 		position: absolute;
 		pointer-events: none;
diff --git a/frontend/src/components/layout/ConditionalWrapper.svelte b/frontend/src/components/layout/ConditionalWrapper.svelte
index 46d5e80b04..f46cfc0042 100644
--- a/frontend/src/components/layout/ConditionalWrapper.svelte
+++ b/frontend/src/components/layout/ConditionalWrapper.svelte
@@ -11,4 +11,4 @@
 	<slot />
 {/if}
 
-<style lang="scss" global></style>
+<style lang="scss"></style>
diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte
index 489013f1d0..a1198d7838 100644
--- a/frontend/src/components/layout/FloatingMenu.svelte
+++ b/frontend/src/components/layout/FloatingMenu.svelte
@@ -500,7 +500,7 @@
 	{/if}
 </div>
 
-<style lang="scss" global>
+<style lang="scss">
 	.floating-menu {
 		position: absolute;
 		width: 0;
diff --git a/frontend/src/components/layout/LayoutCol.svelte b/frontend/src/components/layout/LayoutCol.svelte
index 18b66d4a97..52f60bb726 100644
--- a/frontend/src/components/layout/LayoutCol.svelte
+++ b/frontend/src/components/layout/LayoutCol.svelte
@@ -90,7 +90,7 @@ on:touchcancel
 on:touchend
 -->
 
-<style lang="scss" global>
+<style lang="scss">
 	.layout-col {
 		display: flex;
 		flex-direction: column;
diff --git a/frontend/src/components/layout/LayoutRow.svelte b/frontend/src/components/layout/LayoutRow.svelte
index e648281641..b91a1f38d8 100644
--- a/frontend/src/components/layout/LayoutRow.svelte
+++ b/frontend/src/components/layout/LayoutRow.svelte
@@ -90,7 +90,7 @@ on:touchcancel
 on:touchend
 -->
 
-<style lang="scss" global>
+<style lang="scss">
 	.layout-row {
 		display: flex;
 		flex-direction: row;
diff --git a/frontend/src/components/panels/Data.svelte b/frontend/src/components/panels/Data.svelte
index 0dc727677d..d92d22c899 100644
--- a/frontend/src/components/panels/Data.svelte
+++ b/frontend/src/components/panels/Data.svelte
@@ -28,7 +28,7 @@
 	</LayoutCol>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.data-panel {
 		flex-grow: 1;
 		padding: 4px;
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
index d1e7e6611a..17ef4d1ad4 100644
--- a/frontend/src/components/panels/Document.svelte
+++ b/frontend/src/components/panels/Document.svelte
@@ -703,7 +703,7 @@
 	</LayoutRow>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.document {
 		height: 100%;
 
diff --git a/frontend/src/components/panels/Layers.svelte b/frontend/src/components/panels/Layers.svelte
index ae0dc92a9c..14c022f955 100644
--- a/frontend/src/components/panels/Layers.svelte
+++ b/frontend/src/components/panels/Layers.svelte
@@ -689,7 +689,7 @@
 	</LayoutRow>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.layers {
 		// Control bar
 		.control-bar {
diff --git a/frontend/src/components/panels/Properties.svelte b/frontend/src/components/panels/Properties.svelte
index 125d436dc7..31e96629c9 100644
--- a/frontend/src/components/panels/Properties.svelte
+++ b/frontend/src/components/panels/Properties.svelte
@@ -28,7 +28,7 @@
 	</LayoutCol>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.properties {
 		height: 100%;
 		flex: 1 1 100%;
diff --git a/frontend/src/components/panels/Welcome.svelte b/frontend/src/components/panels/Welcome.svelte
index 8888fcfcc7..c21b57c389 100644
--- a/frontend/src/components/panels/Welcome.svelte
+++ b/frontend/src/components/panels/Welcome.svelte
@@ -56,7 +56,7 @@
 	</LayoutCol>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.welcome-panel {
 		background: var(--color-2-mildblack);
 		margin: 4px;
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
index d86e5d65ea..4a2a0618e4 100644
--- a/frontend/src/components/views/Graph.svelte
+++ b/frontend/src/components/views/Graph.svelte
@@ -813,7 +813,7 @@
 	></div>
 {/if}
 
-<style lang="scss" global>
+<style lang="scss">
 	.graph {
 		position: relative;
 		overflow: hidden;
@@ -996,7 +996,7 @@
 			z-index: 1;
 
 			// Zero specificity with `:where()` to allow other rules to override `pointer-events`
-			:where(.graph-view.open & > *) {
+			:where(.graph-view.open .graph .imports-and-exports > *) {
 				pointer-events: auto;
 			}
 
@@ -1098,7 +1098,7 @@
 			height: 100%;
 
 			// Zero specificity with `:where()` to allow other rules to override `pointer-events`
-			:where(.graph-view.open & > *) {
+			:where(.graph-view.open .graph .layers-and-nodes > *) {
 				pointer-events: auto;
 			}
 		}
diff --git a/frontend/src/components/widgets/WidgetLayout.svelte b/frontend/src/components/widgets/WidgetLayout.svelte
index 003a9ee47e..a2bc018f61 100644
--- a/frontend/src/components/widgets/WidgetLayout.svelte
+++ b/frontend/src/components/widgets/WidgetLayout.svelte
@@ -23,4 +23,4 @@
 	{/if}
 {/each}
 
-<style lang="scss" global></style>
+<style lang="scss"></style>
diff --git a/frontend/src/components/widgets/WidgetSection.svelte b/frontend/src/components/widgets/WidgetSection.svelte
index e998176a39..20d713edf7 100644
--- a/frontend/src/components/widgets/WidgetSection.svelte
+++ b/frontend/src/components/widgets/WidgetSection.svelte
@@ -68,7 +68,7 @@
 	{/if}
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.widget-section {
 		flex: 0 0 auto;
 		margin: 0 4px;
diff --git a/frontend/src/components/widgets/WidgetSpan.svelte b/frontend/src/components/widgets/WidgetSpan.svelte
index fdb794b1fa..1bc2aa2982 100644
--- a/frontend/src/components/widgets/WidgetSpan.svelte
+++ b/frontend/src/components/widgets/WidgetSpan.svelte
@@ -283,7 +283,7 @@
 	{/each}
 </div>
 
-<style lang="scss" global>
+<style lang="scss">
 	.widget-span.column {
 		flex: 0 0 auto;
 		display: flex;
diff --git a/frontend/src/components/widgets/WidgetTable.svelte b/frontend/src/components/widgets/WidgetTable.svelte
index a466b89855..2f6717ab05 100644
--- a/frontend/src/components/widgets/WidgetTable.svelte
+++ b/frontend/src/components/widgets/WidgetTable.svelte
@@ -22,7 +22,7 @@
 	</tbody>
 </table>
 
-<style lang="scss" global>
+<style lang="scss">
 	table:not(.unstyled) {
 		background: var(--color-3-darkgray);
 		border: none;
diff --git a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
index 73da7d2e7e..8d4de70086 100644
--- a/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+++ b/frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
@@ -20,7 +20,7 @@
 	{/each}
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.breadcrumb-trail-buttons {
 		.text-button {
 			position: relative;
diff --git a/frontend/src/components/widgets/buttons/IconButton.svelte b/frontend/src/components/widgets/buttons/IconButton.svelte
index 9dfaa34b65..c7610ccebd 100644
--- a/frontend/src/components/widgets/buttons/IconButton.svelte
+++ b/frontend/src/components/widgets/buttons/IconButton.svelte
@@ -45,7 +45,7 @@
 	{/if}
 </button>
 
-<style lang="scss" global>
+<style lang="scss">
 	.icon-button {
 		display: flex;
 		justify-content: center;
diff --git a/frontend/src/components/widgets/buttons/ImageButton.svelte b/frontend/src/components/widgets/buttons/ImageButton.svelte
index fe169cae84..40fddcd8d5 100644
--- a/frontend/src/components/widgets/buttons/ImageButton.svelte
+++ b/frontend/src/components/widgets/buttons/ImageButton.svelte
@@ -34,7 +34,7 @@
 	on:click={action}
 />
 
-<style lang="scss" global>
+<style lang="scss">
 	.image-button {
 		width: auto;
 		height: auto;
diff --git a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
index 17cc45d9e8..8ce109844e 100644
--- a/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+++ b/frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
@@ -44,7 +44,7 @@
 	</button>
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.parameter-expose-button {
 		display: flex;
 		align-items: center;
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.svelte b/frontend/src/components/widgets/buttons/PopoverButton.svelte
index bfe147a784..9e49bcca45 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.svelte
+++ b/frontend/src/components/widgets/buttons/PopoverButton.svelte
@@ -54,7 +54,7 @@
 	</FloatingMenu>
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.popover-button {
 		position: relative;
 		width: 16px;
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index fd80a0eb35..e239b04dd8 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -105,7 +105,7 @@
 	{/if}
 </ConditionalWrapper>
 
-<style lang="scss" global>
+<style lang="scss">
 	.text-button-container {
 		display: flex;
 		position: relative;
@@ -194,15 +194,15 @@
 		.text-label {
 			overflow: hidden;
 		}
+	}
 
-		// Custom styling for when multiple TextButton widgets are used next to one another in a row or column
-		.widget-span.row > & + .text-button,
-		.layout-row > & + .text-button {
-			margin-left: 8px;
-		}
-		.widget-span.column > & + .text-button,
-		.layout-column > & + .text-button {
-			margin-top: 8px;
-		}
+	// Custom styling for when multiple TextButton widgets are used next to one another in a row or column
+	.widget-span.row > .text-button + .text-button,
+	.layout-row > .text-button + .text-button {
+		margin-left: 8px;
+	}
+	.widget-span.column > .text-button + .text-button,
+	.layout-column > .text-button + .text-button {
+		margin-top: 8px;
 	}
 </style>
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.svelte b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
index d078e95773..3ddc7fc245 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.svelte
+++ b/frontend/src/components/widgets/inputs/CheckboxInput.svelte
@@ -63,7 +63,7 @@
 	</label>
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.checkbox-input {
 		flex: 0 0 auto;
 		align-items: center;
diff --git a/frontend/src/components/widgets/inputs/ColorInput.svelte b/frontend/src/components/widgets/inputs/ColorInput.svelte
index 3b8bac24de..d010292641 100644
--- a/frontend/src/components/widgets/inputs/ColorInput.svelte
+++ b/frontend/src/components/widgets/inputs/ColorInput.svelte
@@ -56,7 +56,7 @@
 	/>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.color-button {
 		position: relative;
 		min-width: 80px;
diff --git a/frontend/src/components/widgets/inputs/CurveInput.svelte b/frontend/src/components/widgets/inputs/CurveInput.svelte
index 973a74dac9..31975b3cd7 100644
--- a/frontend/src/components/widgets/inputs/CurveInput.svelte
+++ b/frontend/src/components/widgets/inputs/CurveInput.svelte
@@ -209,7 +209,7 @@
 	<slot />
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.curve-input {
 		background: var(--color-1-nearblack);
 		display: flex;
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.svelte b/frontend/src/components/widgets/inputs/DropdownInput.svelte
index 5dfd40bcce..414d741f70 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.svelte
+++ b/frontend/src/components/widgets/inputs/DropdownInput.svelte
@@ -161,7 +161,7 @@
 	/>
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.dropdown-input {
 		position: relative;
 		--widget-height: 24px;
diff --git a/frontend/src/components/widgets/inputs/FieldInput.svelte b/frontend/src/components/widgets/inputs/FieldInput.svelte
index eeba5f9ca9..0288141a83 100644
--- a/frontend/src/components/widgets/inputs/FieldInput.svelte
+++ b/frontend/src/components/widgets/inputs/FieldInput.svelte
@@ -120,7 +120,7 @@
 	<slot />
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.field-input {
 		min-width: 80px;
 		height: auto;
diff --git a/frontend/src/components/widgets/inputs/NumberInput.svelte b/frontend/src/components/widgets/inputs/NumberInput.svelte
index 8fa3416594..b8d6cec04c 100644
--- a/frontend/src/components/widgets/inputs/NumberInput.svelte
+++ b/frontend/src/components/widgets/inputs/NumberInput.svelte
@@ -794,7 +794,7 @@
 	{/if}
 </FieldInput>
 
-<style lang="scss" global>
+<style lang="scss">
 	.number-input {
 		&.narrow {
 			--widget-height: 20px;
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index 98b88ac114..76e65661c1 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -46,7 +46,7 @@
 	{/each}
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.radio-input {
 		background: var(--color-4-dimgray);
 		border-radius: 2px;
diff --git a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
index 9b887e1855..804827f138 100644
--- a/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+++ b/frontend/src/components/widgets/inputs/ReferencePointInput.svelte
@@ -35,7 +35,7 @@
 	<button on:click={() => setValue("BottomRight")} class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
 </div>
 
-<style lang="scss" global>
+<style lang="scss">
 	.reference-point-input {
 		position: relative;
 		flex: 0 0 auto;
diff --git a/frontend/src/components/widgets/inputs/RulerInput.svelte b/frontend/src/components/widgets/inputs/RulerInput.svelte
index b1f5495943..1c8511ace7 100644
--- a/frontend/src/components/widgets/inputs/RulerInput.svelte
+++ b/frontend/src/components/widgets/inputs/RulerInput.svelte
@@ -111,7 +111,7 @@
 	</svg>
 </div>
 
-<style lang="scss" global>
+<style lang="scss">
 	.ruler-input {
 		flex: 1 1 100%;
 		background: var(--color-2-mildblack);
diff --git a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
index f4d610a2b8..beca63c3ec 100644
--- a/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
+++ b/frontend/src/components/widgets/inputs/ScrollbarInput.svelte
@@ -214,7 +214,7 @@
 	<button class="arrow increase" on:pointerdown={() => pressArrow(1)} tabindex="-1" data-scrollbar-arrow></button>
 </div>
 
-<style lang="scss" global>
+<style lang="scss">
 	.scrollbar-input {
 		display: flex;
 		flex: 1 1 100%;
diff --git a/frontend/src/components/widgets/inputs/SpectrumInput.svelte b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
index c5c096de32..e749e4217a 100644
--- a/frontend/src/components/widgets/inputs/SpectrumInput.svelte
+++ b/frontend/src/components/widgets/inputs/SpectrumInput.svelte
@@ -414,7 +414,7 @@
 	</LayoutRow>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.spectrum-input {
 		position: relative;
 		--marker-half-width: 6px;
diff --git a/frontend/src/components/widgets/inputs/TextAreaInput.svelte b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
index 1bc7d9dfd0..edaa502b20 100644
--- a/frontend/src/components/widgets/inputs/TextAreaInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextAreaInput.svelte
@@ -63,5 +63,5 @@
 	bind:this={self}
 />
 
-<style lang="scss" global>
+<style lang="scss">
 </style>
diff --git a/frontend/src/components/widgets/inputs/TextInput.svelte b/frontend/src/components/widgets/inputs/TextInput.svelte
index f5e2e3efaa..a56a40ed0f 100644
--- a/frontend/src/components/widgets/inputs/TextInput.svelte
+++ b/frontend/src/components/widgets/inputs/TextInput.svelte
@@ -87,7 +87,7 @@
 	bind:this={self}
 />
 
-<style lang="scss" global>
+<style lang="scss">
 	.text-input {
 		flex-shrink: 0;
 
diff --git a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
index 028ac6adb6..a0ff2393eb 100644
--- a/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+++ b/frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
@@ -63,7 +63,7 @@
 	</LayoutRow>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.working-colors-button {
 		flex: 0 0 auto;
 
diff --git a/frontend/src/components/widgets/labels/IconLabel.svelte b/frontend/src/components/widgets/labels/IconLabel.svelte
index 10828136ca..dcfd5ef489 100644
--- a/frontend/src/components/widgets/labels/IconLabel.svelte
+++ b/frontend/src/components/widgets/labels/IconLabel.svelte
@@ -37,7 +37,7 @@
 	{@html ICON_SVG_STRINGS[icon] || "�"}
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.icon-label {
 		flex: 0 0 auto;
 		fill: var(--color-e-nearwhite);
diff --git a/frontend/src/components/widgets/labels/ImageLabel.svelte b/frontend/src/components/widgets/labels/ImageLabel.svelte
index 5ed44cf1cd..6dc37e9f73 100644
--- a/frontend/src/components/widgets/labels/ImageLabel.svelte
+++ b/frontend/src/components/widgets/labels/ImageLabel.svelte
@@ -30,7 +30,7 @@
 	alt=""
 />
 
-<style lang="scss" global>
+<style lang="scss">
 	.image-label {
 		width: auto;
 		height: auto;
diff --git a/frontend/src/components/widgets/labels/Separator.svelte b/frontend/src/components/widgets/labels/Separator.svelte
index ecbd255e8c..88f1766c15 100644
--- a/frontend/src/components/widgets/labels/Separator.svelte
+++ b/frontend/src/components/widgets/labels/Separator.svelte
@@ -12,7 +12,7 @@
 	{/if}
 </div>
 
-<style lang="scss" global>
+<style lang="scss">
 	.separator {
 		&.vertical {
 			flex: 0 0 auto;
diff --git a/frontend/src/components/widgets/labels/ShortcutLabel.svelte b/frontend/src/components/widgets/labels/ShortcutLabel.svelte
index d1b7f5426f..af85d3cf9f 100644
--- a/frontend/src/components/widgets/labels/ShortcutLabel.svelte
+++ b/frontend/src/components/widgets/labels/ShortcutLabel.svelte
@@ -130,7 +130,7 @@
 	{/each}
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.shortcut-label {
 		align-items: center;
 
@@ -156,34 +156,34 @@
 				fill: var(--color-8-uppergray);
 			}
 		}
+	}
 
-		.floating-menu-content .row > & {
-			.key-label,
-			.mouse-icon {
-				color: var(--color-8-uppergray);
-				background: none;
+	.floating-menu-content .row > .shortcut-label {
+		.key-label,
+		.mouse-icon {
+			color: var(--color-8-uppergray);
+			background: none;
 
-				&:first-child {
-					padding-left: 0;
-				}
-
-				&:last-child {
-					padding-right: 0;
-				}
+			&:first-child {
+				padding-left: 0;
 			}
 
-			.key-label svg {
-				fill: var(--color-8-uppergray);
+			&:last-child {
+				padding-right: 0;
 			}
+		}
 
-			.mouse-icon svg {
-				// 3 shades brighter than the 8-uppergray of key labels/icons
-				fill: var(--color-b-lightgray);
+		.key-label svg {
+			fill: var(--color-8-uppergray);
+		}
 
-				.dim {
-					// 3 shades darker than the 8-uppergray of key labels/icons
-					fill: var(--color-5-dullgray);
-				}
+		.mouse-icon svg {
+			// 3 shades brighter than the 8-uppergray of key labels/icons
+			fill: var(--color-b-lightgray);
+
+			.dim {
+				// 3 shades darker than the 8-uppergray of key labels/icons
+				fill: var(--color-5-dullgray);
 			}
 		}
 	}
diff --git a/frontend/src/components/widgets/labels/TextLabel.svelte b/frontend/src/components/widgets/labels/TextLabel.svelte
index 14bd095be6..b2bec8561f 100644
--- a/frontend/src/components/widgets/labels/TextLabel.svelte
+++ b/frontend/src/components/widgets/labels/TextLabel.svelte
@@ -88,7 +88,7 @@
 	<slot />
 </label>
 
-<style lang="scss" global>
+<style lang="scss">
 	.text-label {
 		line-height: 18px;
 		white-space: nowrap;
diff --git a/frontend/src/components/window/MainWindow.svelte b/frontend/src/components/window/MainWindow.svelte
index 59320d8414..dcb42f7c9b 100644
--- a/frontend/src/components/window/MainWindow.svelte
+++ b/frontend/src/components/window/MainWindow.svelte
@@ -41,7 +41,7 @@
 	{/if}
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.main-window {
 		height: 100%;
 		overflow: auto;
diff --git a/frontend/src/components/window/Panel.svelte b/frontend/src/components/window/Panel.svelte
index df17cbbbb2..61499ab446 100644
--- a/frontend/src/components/window/Panel.svelte
+++ b/frontend/src/components/window/Panel.svelte
@@ -250,7 +250,7 @@
 	</LayoutCol>
 </LayoutCol>
 
-<style lang="scss" global>
+<style lang="scss">
 	.panel {
 		background: var(--color-1-nearblack);
 		border-radius: 6px;
diff --git a/frontend/src/components/window/StatusBar.svelte b/frontend/src/components/window/StatusBar.svelte
index a8736156a9..8ca11f7463 100644
--- a/frontend/src/components/window/StatusBar.svelte
+++ b/frontend/src/components/window/StatusBar.svelte
@@ -36,7 +36,7 @@
 	<WidgetLayout class="info" layout={statusBarInfoLayout} layoutTarget="StatusBarInfo" />
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.status-bar {
 		height: 24px;
 		width: 100%;
diff --git a/frontend/src/components/window/TitleBar.svelte b/frontend/src/components/window/TitleBar.svelte
index 8ce8f6eed1..a93c0181ef 100644
--- a/frontend/src/components/window/TitleBar.svelte
+++ b/frontend/src/components/window/TitleBar.svelte
@@ -79,7 +79,7 @@
 	</LayoutRow>
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.title-bar {
 		flex: 0 0 auto;
 		height: var(--height);
diff --git a/frontend/src/components/window/Workspace.svelte b/frontend/src/components/window/Workspace.svelte
index b09ded67ed..486f69b44e 100644
--- a/frontend/src/components/window/Workspace.svelte
+++ b/frontend/src/components/window/Workspace.svelte
@@ -203,7 +203,7 @@
 	</LayoutRow>
 </LayoutRow>
 
-<style lang="scss" global>
+<style lang="scss">
 	.workspace {
 		position: relative;
 		flex: 1 1 100%;
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index e5bfbadbc8..43f3005cc2 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,7 +1,7 @@
-import { sveltePreprocess } from "svelte-preprocess";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
 
 export default {
-	preprocess: sveltePreprocess(),
+	preprocess: [vitePreprocess()],
 	compilerOptions: /** @type {import("svelte/compiler").ModuleCompileOptions} */ ({
 		warningFilter: (warning) => !warning.code.startsWith("a11y_") && !["css_unused_selector"].includes(warning.code),
 	}),
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c5e1c736b6..241df61326 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -11,7 +11,7 @@ const projectRootDir = path.resolve(__dirname);
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
 	return {
-		plugins: [svelte(), staticAssets(), mode !== "native" && thirdPartyLicenses(), mode !== "native" && serviceWorker()],
+		plugins: [svelteGlobalStyles(), svelte(), staticAssets(), mode !== "native" && thirdPartyLicenses(), mode !== "native" && serviceWorker()],
 		resolve: {
 			alias: [{ find: /\/..\/branding\/(.*\.svg)/, replacement: path.resolve(projectRootDir, "../branding", "$1?raw") }],
 		},
@@ -22,6 +22,19 @@ export default defineConfig(({ mode }) => {
 	};
 });
 
+// Wraps the content of every `<style lang="scss">...</style>` block in Svelte components with `:global { ... }` to work around Svelte's unwanted scoped styles
+function svelteGlobalStyles(): PluginOption {
+	return {
+		name: "svelte-global-styles",
+		enforce: "pre",
+		transform(code, id) {
+			if (!id.endsWith(".svelte")) return;
+
+			return code.replace(/<style(?=\s|>)([^>]*)>(.*?)<\/style>/gs, (_, attrs, content) => `<style${attrs}>\n:global {\n${content}\n}\n</style>`);
+		},
+	};
+}
+
 function staticAssets(): PluginOption {
 	const STATIC_ASSET_DIRS: { source: string; urlPrefix: string }[] = [
 		{ source: "../demo-artwork", urlPrefix: "/demo-artwork" },