Bug in @box/blueprint-web/dist/lib-esm/index.css prevents loading components using NextJS turbopack #4451
Description
This is a followup to #4073 and #4120. Same class of issue (Turbopack's strict CSS parser rejecting invalid syntax that webpack silently accepts), but with a different root cause.
Environment:
- Elements version: 26.3.0
- @box/blueprint-web version: 12.136.1
Desktop (please complete the following information):
- OS: MacOS 26.2
- Browser: Chrome
- Version: 144.0.7559.133
Smartphone (please complete the following information):
N/A
Steps to reproduce the problem:
- Embed
ContentExplorerin a Next.js app. - Run the app in turbopack mode (
next dev --turbopack). - Visit the page.
- Observe the CSS parse error below.
Turbopack has a more strict CSS parser than webpack, so the issue only raises an error when running Next.js in turbopack mode.
What is the expected behavior? (Screenshots can be helpful here)
Expecting the ContentExplorer to render correctly.
What went wrong? (Screenshots, console logs, or HAR files can be helpful here)
./node_modules/@box/blueprint-web/dist/lib-esm/index.css:6424:119
Parsing CSS source code failed
6422 |
6423 |
> 6424 | .bp_base_grid_list_item_module_largeList--96feb[data-modern=true] .bp_base_grid_list_item_module_largeListItem--96feb:not[aria-selected=true]:hover,...
| ^^^^
6425 |
'not' is not recognized as a valid pseudo-class
The :not() functional pseudo-class is written without parentheses:
/* Current (invalid) */
.selector:not[aria-selected=true]:hover { ... }
/* Expected (valid) */
.selector:not([aria-selected=true]):hover { ... }Per the CSS Selectors specification, :not() requires parentheses around its argument. :not[...] is not valid CSS.
Link to application or sample code:
N/A
If relevant, link to file (or attach file here)
@box/blueprint-web/dist/lib-esm/index.css line 6424 (distributed via npm, source is not public)
Affected selectors:
.bp_base_grid_list_item_module_largeList--96feb[data-modern=true]
.bp_base_grid_list_item_module_largeListItem--96feb:not[aria-selected=true]:hover,
.bp_base_grid_list_item_module_largeList--96feb[data-modern=true]
.bp_base_grid_list_item_module_largeListItem--96feb:not[aria-selected=true][data-hovered]Expected behavior
The CSS build pipeline in @box/blueprint-web should output :not() with proper parentheses, producing valid CSS that all parsers (including Turbopack) can process.
Screenshots
N/A
Additional context
We are currently working around this with a postinstall script that patches the CSS:
const patched = original.replace(/:not\[([^\]]+)\]/g, ":not([$1])");