From a4261350d29ad7213d7e2c43680b6e801e371f21 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Mon, 5 Jun 2023 16:27:51 -0700 Subject: [PATCH] Removing some postcss and refactoring to use nested postcss. --- package.json | 1 - postcss.config.cjs | 15 ++++++++++++--- src/lib/components/articles/index.svelte | 15 ++++++++------- src/lib/components/bandcamp/index.svelte | 2 +- src/lib/components/logo/index.svelte | 8 ++++---- src/lib/components/nav/index.svelte | 2 +- src/routes/+layout.svelte | 2 +- src/routes/about/+page.svelte | 8 ++++---- src/routes/articles/[page]/+page.svelte | 4 ++-- src/routes/portfolio/+page.svelte | 4 ++-- src/styles/global.pcss | 4 ++-- 11 files changed, 37 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index d2ae5d6..6e89942 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.cjs b/postcss.config.cjs index d9c713a..89840af 100644 --- a/postcss.config.cjs +++ b/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; diff --git a/src/lib/components/articles/index.svelte b/src/lib/components/articles/index.svelte index b811c98..09a25c6 100644 --- a/src/lib/components/articles/index.svelte +++ b/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) { diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte index a3af21b..b239fb3 100644 --- a/src/lib/components/bandcamp/index.svelte +++ b/src/lib/components/bandcamp/index.svelte @@ -103,7 +103,7 @@ justify-content: center; text-align: center; - figure { + & figure { margin-left: auto; margin-right: auto; } diff --git a/src/lib/components/logo/index.svelte b/src/lib/components/logo/index.svelte index 1cfb4fc..7a2a0d2 100644 --- a/src/lib/components/logo/index.svelte +++ b/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; } } diff --git a/src/lib/components/nav/index.svelte b/src/lib/components/nav/index.svelte index cf00090..e6eb500 100644 --- a/src/lib/components/nav/index.svelte +++ b/src/lib/components/nav/index.svelte @@ -40,7 +40,7 @@ margin: 0.5rem; padding: 2rem; - a + a { + & a + a { margin-left: 25px; } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b383b9a..1bab79a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -51,7 +51,7 @@ place-items: center; gap: 1rem; - h3 { + & h3 { color: white; } } diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 5f409b9..f0c8d6d 100644 --- a/src/routes/about/+page.svelte +++ b/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); } } diff --git a/src/routes/articles/[page]/+page.svelte b/src/routes/articles/[page]/+page.svelte index abc8526..c7fc9cf 100644 --- a/src/routes/articles/[page]/+page.svelte +++ b/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; diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte index cb1a479..6ea0468 100644 --- a/src/routes/portfolio/+page.svelte +++ b/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); } } diff --git a/src/styles/global.pcss b/src/styles/global.pcss index d029017..12fb178 100644 --- a/src/styles/global.pcss +++ b/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;