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>
This commit is contained in:
Rafael Heard 2024-03-14 14:20:54 -04:00 committed by GitHub
parent 487ac9bf6c
commit 03753cbc0f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 56 additions and 2 deletions

49
package-lock.json generated
View File

@ -43,6 +43,7 @@
"pdfobject": "2.3.0", "pdfobject": "2.3.0",
"postcss": "8.4.35", "postcss": "8.4.35",
"postcss-loader": "8.1.1", "postcss-loader": "8.1.1",
"postcss-nesting": "12.1.0",
"pretty-ms": "9.0.0", "pretty-ms": "9.0.0",
"sortablejs": "1.15.2", "sortablejs": "1.15.2",
"swagger-ui-dist": "5.11.8", "swagger-ui-dist": "5.11.8",
@ -528,11 +529,31 @@
"@csstools/css-tokenizer": "^2.2.3" "@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": { "node_modules/@csstools/selector-specificity": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz",
"integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==",
"dev": true,
"funding": [ "funding": [
{ {
"type": "github", "type": "github",
@ -9816,6 +9837,32 @@
"postcss": "^8.2.14" "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": { "node_modules/postcss-resolve-nested-selector": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", "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", "pdfobject": "2.3.0",
"postcss": "8.4.35", "postcss": "8.4.35",
"postcss-loader": "8.1.1", "postcss-loader": "8.1.1",
"postcss-nesting": "12.1.0",
"pretty-ms": "9.0.0", "pretty-ms": "9.0.0",
"sortablejs": "1.15.2", "sortablejs": "1.15.2",
"swagger-ui-dist": "5.11.8", "swagger-ui-dist": "5.11.8",

View File

@ -13,6 +13,8 @@ import {readFileSync} from 'node:fs';
import {env} from 'node:process'; import {env} from 'node:process';
import tailwindcss from 'tailwindcss'; import tailwindcss from 'tailwindcss';
import tailwindConfig from './tailwind.config.js'; import tailwindConfig from './tailwind.config.js';
import tailwindcssNesting from 'tailwindcss/nesting/index.js';
import postcssNesting from 'postcss-nesting';
const {EsbuildPlugin} = EsBuildLoader; const {EsbuildPlugin} = EsBuildLoader;
const {SourceMapDevToolPlugin, DefinePlugin} = webpack; const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
@ -145,6 +147,7 @@ export default {
sourceMap: sourceMaps === 'true', sourceMap: sourceMaps === 'true',
url: {filter: filterCssImport}, url: {filter: filterCssImport},
import: {filter: filterCssImport}, import: {filter: filterCssImport},
importLoaders: 1,
}, },
}, },
{ {
@ -152,7 +155,10 @@ export default {
options: { options: {
postcssOptions: { postcssOptions: {
map: false, // https://github.com/postcss/postcss/issues/1914 map: false, // https://github.com/postcss/postcss/issues/1914
plugins: [tailwindcss(tailwindConfig)], plugins: [
tailwindcssNesting(postcssNesting({edition: '2024-02'})),
tailwindcss(tailwindConfig),
],
}, },
}, },
} }