Removing some postcss and refactoring to use nested postcss.

package.json

@@ -41,7 +41,6 @@
 		"postcss": "^8.4.24",
 		"postcss-import": "^15.1.0",
 		"postcss-load-config": "^4.0.1",
-		"postcss-nested": "^6.0.1",
 		"postcss-preset-env": "^8.4.2",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",

postcss.config.cjs

@@ -1,9 +1,18 @@
-const autoprefixer = require('autoprefixer');
+const postcssPresetEnv = require('postcss-preset-env');
 const atImport = require('postcss-import');
-const postcssNested = require('postcss-nested');
 
 const config = {
-	plugins: [autoprefixer(), atImport(), postcssNested]
+	plugins: [
+		atImport(),
+		postcssPresetEnv({
+			stage: 3,
+			features: {
+				'nesting-rules': true,
+				'custom-media-queries': true,
+				'media-query-ranges': true
+			}
+		})
+	]
 };
 
 module.exports = config;

src/lib/components/articles/index.svelte

@@ -58,11 +58,11 @@
     gap: 0.5rem;
     margin: 1.5rem 0;
 
-    a {
+    & a {
       overflow-wrap: anywhere;
     }
 
-    p {
+    & p {
       margin: 0.4rem 0.25rem;
     }
 	}
@@ -74,7 +74,7 @@
     justify-content: left;
     align-items: center;
 
-    p + p {
+    & p + p {
       background-color: var(--linkHover);
       color: var(--buttonTextColor);
       padding: 0.25rem 0.5rem;
@@ -92,11 +92,12 @@
     align-items: center;
     gap: 1rem;
 
-    a {
+    & a {
       font-size: 2rem;
-      svg {
-        text-decoration: none;
-      }
+    }
+
+    & a + svg {
+      text-decoration: none;
     }
 
     @media (max-width: 1000px) {

src/lib/components/bandcamp/index.svelte

@@ -103,7 +103,7 @@
 		justify-content: center;
 		text-align: center;
 
-		figure {
+		& figure {
 			margin-left: auto;
 			margin-right: auto;
 		}

src/lib/components/logo/index.svelte

@@ -31,7 +31,7 @@
 		font-size: 2rem;
 		--scale: 0;
 
-		p::after {
+		& p::after {
 			content: '';
 			position: absolute;
 			width: 100%;
@@ -43,7 +43,7 @@
 			transform: scale(var(--scale));
 		}
 
-		a {
+		& a {
 			display: grid;
 			justify-items: center;
 			text-decoration: none;
@@ -57,7 +57,7 @@
 				--scale: 1;
 			}
 
-			p {
+			& p {
 				position: relative;
 				font-size: 0.5em;
 				/* padding-top: 0.3rem; */
@@ -70,7 +70,7 @@
 				}
 			}
 
-			img {
+			& img {
 				width: 3rem;
 			}
 		}

src/lib/components/nav/index.svelte

@@ -40,7 +40,7 @@
 		margin: 0.5rem;
 		padding: 2rem;
 
-		a + a {
+		& a + a {
 			margin-left: 25px;
 		}
 	}

src/routes/+layout.svelte

@@ -51,7 +51,7 @@
 		place-items: center;
 		gap: 1rem;
 
-		h3 {
+		& h3 {
 			color: white;
 		}
 	}

src/routes/about/+page.svelte

@@ -300,7 +300,7 @@
 		display: grid;
 		grid-gap: 2.5rem;
 
-		p {
+		& p {
 			margin: 1rem;
 			/* padding: 0.2rem; */
 		}
@@ -315,7 +315,7 @@
 		margin-top: 1rem;
 		font-size: 2rem;
 
-		a {
+		& a {
 			display: grid;
 			justify-items: center;
 
@@ -327,7 +327,7 @@
 			margin-left: 1rem;
 			color: var(--lightGrey);
 
-			p {
+			& p {
 				font-size: 1.5rem;
 				padding-top: 0.3rem;
 				margin: 0;
@@ -335,7 +335,7 @@
 
 			&:hover {
 				color: var(--shellYellow);
-				p {
+				& p {
 					color: var(--shellYellow);
 				}
 			}

src/routes/articles/[page]/+page.svelte

@@ -96,7 +96,7 @@
 		display: grid;
 		grid-template-rows: 1fr auto;
 		align-items: start;
-		a {
+		& a {
 			cursor: pointer;
 		}
 
@@ -112,7 +112,7 @@
 		justify-content: left;
 		align-items: center;
 
-		p + p {
+		& p + p {
 			background-color: var(--linkHover);
 			color: var(--buttonTextColor);
 			padding: 0.25rem 0.5rem;

src/routes/portfolio/+page.svelte

@@ -104,13 +104,13 @@
 	}
 
 	:global(.tab-unselected) {
-		h2 {
+		& h2 {
 			border-bottom: 2px solid var(--white);
 		}
 	}
 	
 	:global(.tab-selected) {
-		h2 {
+		& h2 {
 			border-bottom: 2px solid var(--shellYellow);
 		}
 	}

src/styles/global.pcss

@@ -197,7 +197,7 @@ hr {
 }
 
 nav {
-	a::after {
+	& a::after {
 		content: '';
 		position: absolute;
 		width: 100%;
@@ -209,7 +209,7 @@ nav {
 		transform: scale(0);
 	}
 
-	a {
+	& a {
 		position: relative;
 		font-size: 2rem;
 		text-decoration: none;