chore(postcss): add PostCSS nesting plugin

package.json

@@ -36,6 +36,7 @@
 		"eslint-plugin-svelte": "^2.19.1",
 		"husky": "^8.0.0",
 		"lint-staged": "^13.1.1",
+		"postcss-nesting": "^11.2.2",
 		"prettier": "^2.8.4",
 		"prettier-plugin-astro": "^0.8.0",
 		"prettier-plugin-organize-imports": "^3.2.2",

pnpm-lock.yaml

@@ -20,6 +20,7 @@ specifiers:
   husky: ^8.0.0
   lint-staged: ^13.1.1
   postcss: ^8.4.21
+  postcss-nesting: ^11.2.2
   preact: ^10.6.5
   prettier: ^2.8.4
   prettier-plugin-astro: ^0.8.0
@@ -47,7 +48,6 @@ dependencies:
   preact: 10.13.2
   svelte: 3.55.1
   tailwindcss: 3.2.6_postcss@8.4.21
-  tailwindcss-opentype: 1.1.0_tailwindcss@3.2.6
 
 devDependencies:
   '@typescript-eslint/parser': 5.52.0_7kw3g6rralp5ps6mg3uyzz6azm
@@ -60,6 +60,7 @@ devDependencies:
   eslint-plugin-svelte: 2.19.1_dbthnr4b2bdkhyiebwn7su3hnq
   husky: 8.0.3
   lint-staged: 13.1.1
+  postcss-nesting: 11.2.2_postcss@8.4.21
   prettier: 2.8.4
   prettier-plugin-astro: 0.8.0
   prettier-plugin-organize-imports: 3.2.2_silln3pw57har7jydmecgzoypa
@@ -67,6 +68,7 @@ devDependencies:
   prettier-plugin-tailwindcss: 0.2.2_zngl3ja5mobnb73fmtl7szyqby
   rollup: 3.15.0
   tailwindcss-logical: 3.0.0_gbtt6ss3tbiz4yjtvdr6fbrj44
+  tailwindcss-opentype: 1.1.0_tailwindcss@3.2.6
   typescript: 4.9.5
   vite: 4.1.1
 
@@ -467,6 +469,15 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
+  /@csstools/selector-specificity/2.2.0_laljekdltgzr3kfi7r4exvsr5a:
+    resolution: {integrity: sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss-selector-parser: ^6.0.10
+    dependencies:
+      postcss-selector-parser: 6.0.11
+    dev: true
+
   /@emmetio/abbreviation/2.2.3:
     resolution: {integrity: sha512-87pltuCPt99aL+y9xS6GPZ+Wmmyhll2WXH73gG/xpGcQ84DRnptBsI2r0BeIQ0EB/SQTOe2ANPqFqj3Rj5FOGA==}
     dependencies:
@@ -3980,7 +3991,6 @@ packages:
   /object-hash/3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: false
 
   /object-inspect/1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -4231,7 +4241,6 @@ packages:
   /pify/2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /pify/4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
@@ -4332,7 +4341,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.1
-    dev: false
 
   /postcss-js/3.0.3:
     resolution: {integrity: sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==}
@@ -4350,7 +4358,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.21
-    dev: false
 
   /postcss-load-config/3.1.4_postcss@8.4.21:
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
@@ -4471,7 +4478,17 @@ packages:
     dependencies:
       postcss: 8.4.21
       postcss-selector-parser: 6.0.11
-    dev: false
+
+  /postcss-nesting/11.2.2_postcss@8.4.21:
+    resolution: {integrity: sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.4
+    dependencies:
+      '@csstools/selector-specificity': 2.2.0_laljekdltgzr3kfi7r4exvsr5a
+      postcss: 8.4.21
+      postcss-selector-parser: 6.0.11
+    dev: true
 
   /postcss-normalize-charset/5.1.0_postcss@8.4.21:
     resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
@@ -4823,7 +4840,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: false
 
   /readable-stream/3.6.0:
     resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
@@ -5422,7 +5438,7 @@ packages:
       tailwindcss: '>= 3'
     dependencies:
       tailwindcss: 3.2.6_postcss@8.4.21
-    dev: false
+    dev: true
 
   /tailwindcss/3.0.7_gbtt6ss3tbiz4yjtvdr6fbrj44:
     resolution: {integrity: sha512-rZdKNHtC64jcQncLoWOuCzj4lQDTAgLtgK3WmQS88tTdpHh9OwLqULTQxI3tw9AMJsqSpCKlmcjW/8CSnni6zQ==}
@@ -5491,7 +5507,6 @@ packages:
       resolve: 1.22.1
     transitivePeerDependencies:
       - ts-node
-    dev: false
 
   /text-table/0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

postcss.config.cjs

@@ -1,6 +1,9 @@
 module.exports = {
-	plugins: [
+	plugins: {
-		require('autoprefixer'),
+		'postcss-import': {},
-		// require('cssnano')
+		'tailwindcss/nesting': 'postcss-nesting',
-	],
+		tailwindcss: {},
+		autoprefixer: {},
+		// cssnano: {},
+	},
 };