chore: move to postcss-nesting

components/ItemListNav.vue

@@ -44,7 +44,7 @@ const hasMore = computed(() => props.page < props.maxPage)
   text-align: center;
   user-select: none;
 
-  a {
+  & a {
     margin: 0 1em;
   }
 

components/PostComment.vue

@@ -70,7 +70,7 @@ function pluralize (n: number) {
   .by {
     color: #222;
 
-    a {
+    & a {
       color: #222;
       text-decoration: underline;
     }
@@ -79,11 +79,11 @@ function pluralize (n: number) {
   .text {
     overflow-wrap: break-word;
 
-    a:hover {
+    & a:hover {
       color: #111;
     }
 
-    pre {
+    & pre {
       white-space: pre-wrap;
     }
   }
@@ -93,7 +93,7 @@ function pluralize (n: number) {
     padding: 0.3em 0.5em;
     border-radius: 4px;
 
-    a {
+    & a {
       color: #222;
       cursor: pointer;
     }

components/PostItem.vue

@@ -72,11 +72,11 @@ defineProps<{
     font-size: 0.85em;
     color: #595959;
 
-    span {
+    & span {
       margin: 0 0.2rem;
     }
 
-    a {
+    & a {
       color: #595959;
       text-decoration: underline;
 

layouts/default.vue

@@ -80,7 +80,7 @@ a {
     place-items: center;
   }
 
-  a {
+  & a {
     color: #fff;
     line-height: 24px;
     transition: color 0.15s ease;
@@ -109,7 +109,7 @@ a {
     margin: auto;
     text-align: right;
     flex-grow: 1;
-    a {
+    & a {
       margin-right: 0;
     }
   }
@@ -149,7 +149,7 @@ a {
       padding: 15px;
     }
 
-    a {
+    & a {
       margin-right: 1em;
     }
 

nuxt.config.ts

 export default defineNuxtConfig({
   postcss: {
     plugins: {
-      'postcss-nested': {}
+      'postcss-nesting': {}
     }
   }
 })

package.json

@@ -32,7 +32,7 @@
     "@types/node": "^18.15.0",
     "eslint": "^8.35.0",
     "nuxt": "^3.2.3",
-    "postcss-nested": "^6.0.1",
+    "postcss-nesting": "^11.2.1",
     "typescript": "^4.9.5"
   }
 }

pages/[feed]/[page].vue

@@ -98,7 +98,7 @@ watch(page, to => pageChanged(to))
   width: 100%;
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 
-  ul {
+  & ul {
     list-style-type: none;
     padding: 0;
     margin: 0;

pages/item/[id].vue

@@ -64,7 +64,7 @@ useHead({
   padding: 1.8em 2em 1em;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 
-  h1 {
+  & h1 {
     display: inline;
     font-size: 1.5em;
     margin: 0;
@@ -109,7 +109,7 @@ useHead({
 
 @media (max-width: 600px) {
   .item-view-header {
-    h1 {
+    & h1 {
       font-size: 1.25em;
     }
   }

pages/user/[id].vue

@@ -49,7 +49,7 @@ useHead({
   box-sizing: border-box;
   padding: 2em 3em;
 
-  h1 {
+  & h1 {
     margin: 0;
     font-size: 1.5em;
   }