From 03753cbc0ff68cc4eee0a65b556e6d86a8f1c63f Mon Sep 17 00:00:00 2001 From: Rafael Heard 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 ``` --------- Co-authored-by: rafh Co-authored-by: silverwind --- 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), + ], }, }, }