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>
(cherry picked from commit 03753cbc0ff68cc4eee0a65b556e6d86a8f1c63f)
This commit is contained in:
Rafael Heard 2024-03-14 14:20:54 -04:00 committed by Earl Warren
parent 9d08d00dbf
commit 989dc10cf2
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG key ID: 0579CB2928A78A00
3 changed files with 56 additions and 2 deletions

49
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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;
@ -149,6 +151,7 @@ export default {
sourceMap: sourceMaps === 'true',
url: {filter: filterCssImport},
import: {filter: filterCssImport},
importLoaders: 1,
},
},
{
@ -156,7 +159,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),
],
},
},
}