From aac1f68de43f729dc9cd8680aac2a7994ebf1921 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Thu, 29 Jan 2026 13:19:34 +0000
Subject: [PATCH] Fix CSS Module purity errors for Next.js 16 compatibility

After upgrading to Next.js 16.1.6, the build failed with CSS Module
purity errors in Popover and Tooltip components. Next.js 16 with
Turbopack enforces stricter validation requiring global selectors
like [data-theme='dark'] to be combined with local classes.

Changed nested selector structure:
  [data-theme='dark'] { .bui-Popover { ... } }

To flattened structure:
  [data-theme='dark'] .bui-Popover { ... }

This matches the pattern used in Dialog.module.css and satisfies
Turbopack's CSS Module purity requirements.

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Popover/Popover.module.css | 22 +++++++----------
 .../src/components/Tooltip/Tooltip.module.css | 24 ++++++++-----------
 2 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/packages/ui/src/components/Popover/Popover.module.css b/packages/ui/src/components/Popover/Popover.module.css
index fe757c8dd4..5156b95ffc 100644
--- a/packages/ui/src/components/Popover/Popover.module.css
+++ b/packages/ui/src/components/Popover/Popover.module.css
@@ -122,20 +122,16 @@
     }
   }
 
-  [data-theme='dark'] {
-    .bui-Popover {
-      background: var(--bui-bg-surface-2);
-      border: 1px solid var(--bui-gray-4);
-    }
+  [data-theme='dark'] .bui-Popover {
+    background: var(--bui-bg-surface-2);
+    border: 1px solid var(--bui-gray-4);
+  }
 
-    .bui-PopoverArrow {
-      svg path:nth-child(1) {
-        fill: var(--bui-bg-surface-2);
-      }
+  [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
+    fill: var(--bui-bg-surface-2);
+  }
 
-      svg path:nth-child(2) {
-        fill: var(--bui-gray-4);
-      }
-    }
+  [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
+    fill: var(--bui-gray-4);
   }
 }
diff --git a/packages/ui/src/components/Tooltip/Tooltip.module.css b/packages/ui/src/components/Tooltip/Tooltip.module.css
index 5c9c27eb8d..b668952848 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.module.css
+++ b/packages/ui/src/components/Tooltip/Tooltip.module.css
@@ -106,21 +106,17 @@
     }
   }
 
-  [data-theme='dark'] {
-    .bui-Tooltip {
-      background: var(--bui-bg-surface-2);
-      box-shadow: none;
-      border: 1px solid var(--bui-gray-4);
-    }
+  [data-theme='dark'] .bui-Tooltip {
+    background: var(--bui-bg-surface-2);
+    box-shadow: none;
+    border: 1px solid var(--bui-gray-4);
+  }
 
-    .bui-TooltipArrow {
-      svg path:nth-child(1) {
-        fill: var(--bui-bg-surface-2);
-      }
+  [data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) {
+    fill: var(--bui-bg-surface-2);
+  }
 
-      svg path:nth-child(2) {
-        fill: var(--bui-gray-4);
-      }
-    }
+  [data-theme='dark'] .bui-TooltipArrow svg path:nth-child(2) {
+    fill: var(--bui-gray-4);
   }
 }