Refactor some postcss stuff

- put global files in /styles
- add postcss-nested plugin
- change runtime import for .dark enclosed classes

package.json

@@ -72,6 +72,7 @@
 		"nanoid": "^4.0.2",
 		"postcss": "^8.4.25",
 		"postcss-load-config": "^4.0.1",
+		"postcss-nested": "^6.0.1",
 		"posthog-js": "^1.70.2",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",

pnpm-lock.yaml

@@ -163,6 +163,9 @@ devDependencies:
   postcss-load-config:
     specifier: ^4.0.1
     version: 4.0.1(postcss@8.4.25)
+  postcss-nested:
+    specifier: ^6.0.1
+    version: 6.0.1(postcss@8.4.25)
   posthog-js:
     specifier: ^1.70.2
     version: 1.70.2

postcss.config.cjs

@@ -3,6 +3,8 @@ const autoprefixer = require('autoprefixer');
 
 const config = {
 	plugins: [
+		//Makes it easier to define .dark theme classes
+		require('postcss-nested'),
 		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
 		tailwindcss(),
 		//But others, like autoprefixer, need to run after,

src/lib/components/Differ/Differ.svelte

@@ -3,7 +3,6 @@
 	import { buildDiffRows, documentMap, RowType, type Row } from './renderer';
 
 	import './diff.postcss';
-	import './colors/gruvbox-alternative.css';
 	import type { DiffArray } from '$lib/diff';
 
 	export let filepath: string;

src/lib/components/Differ/diff.postcss

@@ -25,7 +25,6 @@
 .diff-line-addition .inner-diff {
 	--override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 60%);
 
-	color: white;
 	background-color: var(--override-addition-inner-diff-background-color);
 }
 

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '../app.postcss';
+	import '../styles/main.postcss';
 
 	import { open } from '@tauri-apps/api/dialog';
 	import { toasts, Toaster, events, hotkeys, stores } from '$lib';

src/routes/repo/[projectId]/FileCard.svelte

@@ -126,7 +126,6 @@
 									diff={hunk.diff}
 									filePath={hunk.filePath}
 									linesShown={maximized ? 8 : 2}
-									{userSettings}
 								/>
 							</div>
 							<div class="flex px-2 py-1">

src/routes/repo/[projectId]/HunkDiffViewer.svelte

@@ -2,14 +2,6 @@
 	import { buildDiffRows, documentMap, RowType, type Row } from '$lib/components/Differ/renderer';
 	import { line, type DiffArray } from '$lib/diff';
 	import { create } from '$lib/components/Differ/CodeHighlighter';
-	import type { SettingsStore } from '$lib/userSettings';
-
-	export let userSettings: SettingsStore;
-	$: if ($userSettings.theme) {
-		$userSettings.theme == 'dark'
-			? import('./colors/github-dark.css')
-			: import('./colors/github-light.css');
-	}
 
 	export let diff: string;
 	export let filePath: string;
@@ -112,13 +104,13 @@
 				? String(row.currentLineNumber + currentLineNumber - 1)
 				: ''}
 		<span
-			class="min-w-[1rem] select-none border-r  border-light-400 bg-light-200 px-1 text-right text-light-800 dark:border-dark-400 dark:bg-dark-800 dark:text-light-300"
+			class="min-w-[1rem] select-none border-r border-light-400 bg-light-200 px-1 text-right text-light-800 dark:border-dark-400 dark:bg-dark-800 dark:text-light-300"
 		>
 			{baseNumber}
 		</span>
 
 		<span
-			class="min-w-[1rem] select-none border-r  border-light-400 bg-light-200 px-1 text-right text-light-800 dark:border-dark-400 dark:bg-dark-800 dark:text-light-300"
+			class="min-w-[1rem] select-none border-r border-light-400 bg-light-200 px-1 text-right text-light-800 dark:border-dark-400 dark:bg-dark-800 dark:text-light-300"
 		>
 			{curNumber}
 		</span>
@@ -132,3 +124,6 @@
 		</span>
 	{/each}
 </div>
+
+<style lang="postcss">
+</style>

src/styles/main.postcss

@@ -1,4 +1,6 @@
 @import 'inter-ui/inter.css';
+@import './syntax-highlighting.postcss';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -196,7 +198,7 @@ button:focus {
 	@apply bg-[#524C93]/20;
 }
 .purple.filled {
-	@apply border-t border-b border-b-[#3C386D] border-t-[#7570B1] bg-gradient-to-b from-[#5852A0] to-[#474281] text-light-50 no-underline drop-shadow;
+	@apply border-b border-t border-b-[#3C386D] border-t-[#7570B1] bg-gradient-to-b from-[#5852A0] to-[#474281] text-light-50 no-underline drop-shadow;
 }
 .purple.filled:hover {
 	@apply bg-[#423E7A];

src/styles/syntax-highlighting.postcss

@@ -0,0 +1,197 @@
+.token-variable {
+	color: #8953800;
+}
+
+.token-property {
+	color: #0550ae;
+}
+
+.token-type {
+	color: #116329;
+}
+
+.token-variable-special {
+	color: #953800;
+}
+
+.token-definition {
+	color: #953800;
+}
+
+/* .token-builtin {
+		color: #d3869b;
+} */
+
+.token-number {
+	color: #0550ae;
+}
+
+.token-string {
+	color: #0550ae;
+}
+
+.token-string-special {
+	color: #0a3069;
+}
+
+/* .token-atom {
+		color: #0a3069;
+} */
+
+.token-keyword {
+	color: #cf222e;
+}
+
+.token-comment {
+	color: #6e7781;
+}
+
+.token-meta {
+	color: #1f2328;
+}
+
+.token-invalid {
+	color: #82071e;
+}
+
+.token-tag {
+	color: #116329;
+}
+
+.token-attribute {
+	color: #1f2328;
+}
+
+.token-attribute-value {
+	color: var(--color-token-attribute-value);
+}
+
+.token-inserted {
+	color: #116329;
+}
+
+.token-deleted {
+	color: #82071e;
+}
+
+.token-heading {
+	color: var(--color-token-variable-special);
+	font-weight: bold;
+}
+
+.token-link {
+	color: var(--color-token-variable-special);
+	text-decoration: underline;
+}
+
+.token-strikethrough {
+	text-decoration: strike-through;
+}
+
+.token-strong {
+	font-weight: bold;
+}
+
+.token-emphasis {
+	font-style: italic;
+}
+
+.dark {
+	.token-variable {
+		color: #79c0ff;
+	}
+
+	.token-property {
+		color: #79c0ff;
+	}
+
+	.token-type {
+		color: #7ee787;
+	}
+
+	.token-variable-special {
+		color: #79c0ff;
+	}
+
+	.token-definition {
+		color: #ffa657;
+	}
+
+	/* .token-builtin {
+			color: #d3869b;
+    } */
+
+	.token-number {
+		color: #a5d6ff;
+	}
+
+	.token-string {
+		color: #79c0ff;
+	}
+
+	.token-string-special {
+		color: #a5d6ff;
+	}
+
+	/* .token-atom {
+			color: #0a3069;
+    } */
+
+	.token-keyword {
+		color: #ff7b72;
+	}
+
+	.token-comment {
+		color: #8b949e;
+	}
+
+	.token-meta {
+		color: #ffa657;
+	}
+
+	.token-invalid {
+		color: #ffa198;
+	}
+
+	.token-tag {
+		color: #7ee787;
+	}
+
+	.token-attribute {
+		color: #e6edf3;
+	}
+
+	.token-attribute-value {
+		color: var(--color-token-attribute-value);
+	}
+
+	.token-inserted {
+		color: #7ee787;
+	}
+
+	.token-deleted {
+		color: #ffa198;
+	}
+
+	.token-heading {
+		color: var(--color-token-variable-special);
+		font-weight: bold;
+	}
+
+	.token-link {
+		color: var(--color-token-variable-special);
+		text-decoration: underline;
+	}
+
+	.token-strikethrough {
+		text-decoration: strike-through;
+	}
+
+	.token-strong {
+		font-weight: bold;
+	}
+
+	.token-emphasis {
+		font-style: italic;
+	}
+}