paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 29 Packages Projects Releases Wiki Activity

Fix CSS Module purity errors for Next.js 16 compatibility

Browse Source 
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>
This commit is contained in:
Charles de Dreuille
2026-01-29 13:19:34 +00:00
parent 95850a52a3
commit aac1f68de4
2 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/Popover/Popover.module.css
+9 -13
View File
@@ -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);
}
}
packages/ui/src/components/Tooltip/Tooltip.module.css
+10 -14
View File
@@ -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);
}
}