[PR #23] [MERGED] Install and configure postcss-nesting #55

New Issue

Octech6711 · 2025-09-09T19:41:53-05:00

Octech6711 commented

2025-09-09 19:41:53 -05:00

📋 Pull Request Information

Original PR: https://github.com/audacity/audacity.github.io/pull/23
Author: @DilsonsPickles
Created: 2/5/2024
Status: ✅ Merged
Merged: 2/6/2024
Merged by: @LWinterberg

Base: main ← Head: css-nesting

📝 Commits (1)

334e653 Install and configure postcss-nesting

📊 Changes

3 files changed (+63 additions, -5 deletions)

View changed files

📝 package-lock.json (+53 -4)
📝 package.json (+2 -1)
➕ postcss.config.cjs (+8 -0)

📄 Description

Correctly configured postcss-nesting to remove Nested CSS detected error as shown below. This was caused by the cookie consent banner that required nested styling when the "hide" class was added to it once Visitors accept or reject site cookies.

For more info visit https://docs.astro.build/en/guides/styling/#postcss

[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; 11:10:11 AM [serve] 404 /output.css [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities;

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/audacity/audacity.github.io/pull/23 **Author:** [@DilsonsPickles](https://github.com/DilsonsPickles) **Created:** 2/5/2024 **Status:** ✅ Merged **Merged:** 2/6/2024 **Merged by:** [@LWinterberg](https://github.com/LWinterberg) **Base:** `main` ← **Head:** `css-nesting` --- ### 📝 Commits (1) - [`334e653`](https://github.com/audacity/audacity.github.io/commit/334e65398a92ac023e400ddceccf50993a4b5388) Install and configure postcss-nesting ### 📊 Changes **3 files changed** (+63 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `package-lock.json` (+53 -4) 📝 `package.json` (+2 -1) ➕ `postcss.config.cjs` (+8 -0) </details> ### 📄 Description Correctly configured postcss-nesting to remove Nested CSS detected error as shown below. This was caused by the cookie consent banner that required nested styling when the "hide" class was added to it once Visitors accept or reject site cookies. For more info visit https://docs.astro.build/en/guides/styling/#postcss `[vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; 11:10:11 AM [serve] 404 /output.css [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 108| transition: bottom .5s ease; 109| 110| &.hide{ | ^ 111| bottom:-412px; 112| } [vite:css] Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting 1 | @tailwind base; | ^ 2 | @tailwind components; 3 | @tailwind utilities; ` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

Octech6711 added the pull-request label 2025-09-09 19:41:53 -05:00

Octech6711 closed this issue

2025-09-09 19:41:53 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: audacity/audacity.github.io#55