chore: support css nesting (#2266)

- Fixes #2257
- Nested one file to check everything works as expected :)

packages/css/error-summary.css

@@ -8,14 +8,14 @@
   padding: var(--dsc-errorsummary-padding);
   border-radius: var(--dsc-errorsummary-border-radius);
   background-color: var(--dsc-errorsummary-background);
-}
 
-.ds-error-summary a {
-  color: var(--dsc-errorsummary-link-color);
-}
+  & a {
+    color: var(--dsc-errorsummary-link-color);
+  }
 
-.ds-error-summary li:last-of-type {
-  margin-bottom: 0;
+  & li:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 .ds-error-summary__heading {

packages/css/package.json

@@ -37,6 +37,7 @@
     "postcss": "^8.4.41",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.0",
     "rimraf": "^6.0.1"
   }
 }

packages/css/postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: [
     require('postcss-import'),
+    require('postcss-nesting'),
     require('cssnano')({
       preset: 'default',
     }),

yarn.lock

@@ -2869,6 +2869,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/selector-resolve-nested@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@csstools/selector-resolve-nested@npm:2.0.0"
+  peerDependencies:
+    postcss-selector-parser: ^6.1.0
+  checksum: 10/996093f9fe45c93f1af38e0dd58b099e49de35608a27ad8fadd3070601e3aa689e1f9c0f2fb4ab55339ea32d239d83b1c7926196d287ff516cf74236b84eeebc
+  languageName: node
+  linkType: hard
+
 "@csstools/selector-specificity@npm:^3.1.1":
   version: 3.1.1
   resolution: "@csstools/selector-specificity@npm:3.1.1"
@@ -2878,6 +2887,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/selector-specificity@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@csstools/selector-specificity@npm:4.0.0"
+  peerDependencies:
+    postcss-selector-parser: ^6.1.0
+  checksum: 10/7076c1d8af0fba94f06718f87fba5bfea583f39089efa906ae38b5ecd6912d3d5865f7047a871ac524b1057e4c970622b2ade456b90d69fb9393902250057994
+  languageName: node
+  linkType: hard
+
 "@designsystemet/storybook@workspace:apps/storybook":
   version: 0.0.0-use.local
   resolution: "@designsystemet/storybook@workspace:apps/storybook"
@@ -2929,6 +2947,7 @@ __metadata:
     postcss: "npm:^8.4.41"
     postcss-cli: "npm:^11.0.0"
     postcss-import: "npm:^16.1.0"
+    postcss-nesting: "npm:^13.0.0"
     rimraf: "npm:^6.0.1"
   languageName: unknown
   linkType: soft
@@ -13609,6 +13628,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-nesting@npm:^13.0.0":
+  version: 13.0.0
+  resolution: "postcss-nesting@npm:13.0.0"
+  dependencies:
+    "@csstools/selector-resolve-nested": "npm:^2.0.0"
+    "@csstools/selector-specificity": "npm:^4.0.0"
+    postcss-selector-parser: "npm:^6.1.0"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10/c2cb54589cb29ecaf57b53055be75e1a17c6f9e00a6a190b61cb6f2d53de53306df94bc434e7d3035b7d9948f36e3b94f7627e03862326057a58c820fc181a54
+  languageName: node
+  linkType: hard
+
 "postcss-normalize-charset@npm:^7.0.0":
   version: 7.0.0
   resolution: "postcss-normalize-charset@npm:7.0.0"