From 03753cbc0ff68cc4eee0a65b556e6d86a8f1c63f Mon Sep 17 00:00:00 2001
From: Rafael Heard <rafael.heard@gmail.com>
Date: Thu, 14 Mar 2024 14:20:54 -0400
Subject: [PATCH] enable tailwind nesting (#29746)

Currently, if you implement native CSS nesting within a Vue component a
warning will appear in the terminal. It states
`Nested CSS was detected, but CSS nesting has not been configured
correctly.
Please enable a CSS nesting plugin *before* Tailwind in your
configuration.` To fix this error we need to enable the built-in
[tailwinds nesting
config](https://tailwindcss.com/docs/using-with-preprocessors#nesting).

Example code to trigger the warning within a vue component:

```CSS
<style>
.example {
  &:hover,
  &:focus-visible {
    color: var(--color-text);
  }

  & svg {
    margin-right: 0.78rem;
  }
}
</style>
```

---------

Co-authored-by: rafh <rafaelheard@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
---
 package-lock.json | 49 ++++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |  1 +
 webpack.config.js |  8 +++++++-
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6a6eb4b947..f75e3068b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "pdfobject": "2.3.0",
         "postcss": "8.4.35",
         "postcss-loader": "8.1.1",
+        "postcss-nesting": "12.1.0",
         "pretty-ms": "9.0.0",
         "sortablejs": "1.15.2",
         "swagger-ui-dist": "5.11.8",
@@ -528,11 +529,31 @@
         "@csstools/css-tokenizer": "^2.2.3"
       }
     },
+    "node_modules/@csstools/selector-resolve-nested": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz",
+      "integrity": "sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
     "node_modules/@csstools/selector-specificity": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
       "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9816,6 +9837,32 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-nesting": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.0.tgz",
+      "integrity": "sha512-QOYnosaZ+mlP6plQrAxFw09UUp2Sgtxj1BVHN+rSVbtV0Yx48zRt9/9F/ZOoxOKBBEsaJk2MYhhVRjeRRw5yuw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/selector-resolve-nested": "^1.1.0",
+        "@csstools/selector-specificity": "^3.0.2",
+        "postcss-selector-parser": "^6.0.13"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-resolve-nested-selector": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
diff --git a/package.json b/package.json
index d5e8170228..26632480e8 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "pdfobject": "2.3.0",
     "postcss": "8.4.35",
     "postcss-loader": "8.1.1",
+    "postcss-nesting": "12.1.0",
     "pretty-ms": "9.0.0",
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.11.8",
diff --git a/webpack.config.js b/webpack.config.js
index 3973d85344..d073a3e9f1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -13,6 +13,8 @@ import {readFileSync} from 'node:fs';
 import {env} from 'node:process';
 import tailwindcss from 'tailwindcss';
 import tailwindConfig from './tailwind.config.js';
+import tailwindcssNesting from 'tailwindcss/nesting/index.js';
+import postcssNesting from 'postcss-nesting';
 
 const {EsbuildPlugin} = EsBuildLoader;
 const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
@@ -145,6 +147,7 @@ export default {
               sourceMap: sourceMaps === 'true',
               url: {filter: filterCssImport},
               import: {filter: filterCssImport},
+              importLoaders: 1,
             },
           },
           {
@@ -152,7 +155,10 @@ export default {
             options: {
               postcssOptions: {
                 map: false, // https://github.com/postcss/postcss/issues/1914
-                plugins: [tailwindcss(tailwindConfig)],
+                plugins: [
+                  tailwindcssNesting(postcssNesting({edition: '2024-02'})),
+                  tailwindcss(tailwindConfig),
+                ],
               },
             },
           }