Replace import with use for sass and reduce css output bundle by only prepending partials

- Moved main scss files to src/styles.
- Instead of prepending all our global styles in svelte.config.js, we now only prepend our sass logic that doesn't build to css, which reduces the output css massively by avoiding duplicative imports. Our norm.scss is now imported in the root +layout file.
- Update sass package
- Renamed mixins and vars scss files to start with an underscore, which indicates they are partial files

package-lock.json

@@ -25,7 +25,7 @@
 				"eslint-plugin-svelte": "^2.45.1",
 				"prettier": "^3.4.2",
 				"prettier-plugin-svelte": "^3.4.0",
-				"sass": "^1.89.0",
+				"sass": "^1.97.3",
 				"svelte": "^5.17.3",
 				"svelte-check": "^4.1.3",
 				"svelte-eslint-parser": "^0.42.0",
@@ -6829,11 +6829,10 @@
 			}
 		},
 		"node_modules/sass": {
-			"version": "1.89.0",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.89.0.tgz",
-			"integrity": "sha512-ld+kQU8YTdGNjOLfRWBzewJpU5cwEv/h5yyqlSeJcj6Yh8U4TDA9UA5FPicqDz/xgRPWRSYIQNiFks21TbA9KQ==",
+			"version": "1.97.3",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
+			"integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
 			"dev": true,
-			"license": "MIT",
 			"dependencies": {
 				"chokidar": "^4.0.0",
 				"immutable": "^5.0.2",

package.json

@@ -25,7 +25,7 @@
 		"eslint-plugin-svelte": "^2.45.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.4.0",
-		"sass": "^1.89.0",
+		"sass": "^1.97.3",
 		"svelte": "^5.17.3",
 		"svelte-check": "^4.1.3",
 		"svelte-eslint-parser": "^0.42.0",

src/routes/+layout.svelte

@@ -59,3 +59,7 @@
 </div>
 
 {@render children?.()}
+
+<style lang="scss">
+	@use "../styles/norm.scss";
+</style>

src/styles/_mixins.scss

@@ -1,3 +1,5 @@
+// NOTE: This file is a partial, it shouldn't include anything that will produce css on it's own.
+
 @mixin nav-blur {
 	backdrop-filter: blur(2.5px) saturate(120%);
 	background-color: var(--nav-color);

src/styles/_vars.scss

@@ -1,34 +1,4 @@
-:root {
-	--bg-color: white;
-	--bg-color-accent: rgb(180, 180, 180);
-	--nav-color: rgba(255, 255, 255, 0.8);
-	--text-color: black;
-	--text-color-accent: rgb(90, 90, 90);
-	--accent-color: rgba(128, 128, 128, 0.226);
-	--accent-color-hover: rgba(46, 46, 46);
-	--backdrop-filter: blur(4px) grayscale(80%);
-	--backdrop-mix-blend-mode: multiply;
-	--rating-color: black;
-	--placeholder-color: #8e8e8e;
-	--poster-rating-color: gold;
-	--img-blend-multiply-bg-col: rgba(0, 0, 0, 0.85);
-}
-
-:root.theme-dark {
-	--bg-color: rgb(15, 15, 15);
-	--bg-color-accent: rgb(70, 70, 70);
-	--nav-color: rgba(15, 15, 15, 0.438);
-	--text-color: white;
-	--text-color-accent: rgb(180, 180, 180);
-	--accent-color: rgba(46, 46, 46);
-	--accent-color-hover: rgba(255, 255, 255, 0.8);
-	--backdrop-filter: blur(0.5px) grayscale(50%);
-	--backdrop-mix-blend-mode: difference;
-	--rating-color: gold;
-	--placeholder-color: #8e8e8e;
-	--poster-rating-color: black;
-	--img-blend-multiply-bg-col: rgba(255, 255, 255, 0.03);
-}
+// NOTE: This file is a partial, it shouldn't include anything that will produce css on it's own.
 
 $bg-color: var(--bg-color);
 $bg-color-accent: var(--bg-color-accent);

src/styles/norm.scss

@@ -1,5 +1,37 @@
-@import "./mixins.scss";
-@import "./vars.scss";
+@use "./mixins.scss" as *;
+@use "./vars.scss" as *;
+
+:root {
+	--bg-color: white;
+	--bg-color-accent: rgb(180, 180, 180);
+	--nav-color: rgba(255, 255, 255, 0.8);
+	--text-color: black;
+	--text-color-accent: rgb(90, 90, 90);
+	--accent-color: rgba(128, 128, 128, 0.226);
+	--accent-color-hover: rgba(46, 46, 46);
+	--backdrop-filter: blur(4px) grayscale(80%);
+	--backdrop-mix-blend-mode: multiply;
+	--rating-color: black;
+	--placeholder-color: #8e8e8e;
+	--poster-rating-color: gold;
+	--img-blend-multiply-bg-col: rgba(0, 0, 0, 0.85);
+}
+
+:root.theme-dark {
+	--bg-color: rgb(15, 15, 15);
+	--bg-color-accent: rgb(70, 70, 70);
+	--nav-color: rgba(15, 15, 15, 0.438);
+	--text-color: white;
+	--text-color-accent: rgb(180, 180, 180);
+	--accent-color: rgba(46, 46, 46);
+	--accent-color-hover: rgba(255, 255, 255, 0.8);
+	--backdrop-filter: blur(0.5px) grayscale(50%);
+	--backdrop-mix-blend-mode: difference;
+	--rating-color: gold;
+	--placeholder-color: #8e8e8e;
+	--poster-rating-color: black;
+	--img-blend-multiply-bg-col: rgba(255, 255, 255, 0.03);
+}
 
 @font-face {
 	font-family: "Shrikhand";

svelte.config.js

@@ -9,7 +9,13 @@ const config = {
 	preprocess: [
 		sveltePreprocess({
 			scss: {
-				prependData: `@import "./src/norm.scss";`,
+				// Only prepend partials that we want access to everywhere
+				// by default. They can't have css otherwise our css output
+				// will be bloated. Global styles can be in our `norm.scss` file
+				// which is imported (`@use`d) in our root `+layout.svelte` file.
+				prependData:
+					`@use "./src/styles/_vars.scss" as *;` +
+					`@use "./src/styles/_mixins.scss" as *;`,
 			},
 		}),
 		vitePreprocess(),