Skip to content

deps(ui): Upgrade color v5 #102887

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 6, 2025
Merged

deps(ui): Upgrade color v5 #102887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ if (
* node_modules, but some packages which use ES6 syntax only NEED to be
* transformed.
*/
const ESM_NODE_MODULES = ['screenfull', 'cbor2', 'nuqs'];
const ESM_NODE_MODULES = ['screenfull', 'cbor2', 'nuqs', 'color'];

const config: Config.InitialOptions = {
verbose: false,
Expand Down
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"@tanstack/react-query-devtools": "5.85.0",
"@tanstack/react-query-persist-client": "5.85.0",
"@tanstack/react-virtual": "^3.13.6",
"@types/color": "^3.0.3",
"@types/diff": "5.2.1",
"@types/gtag.js": "^0.0.12",
"@types/history": "^3.2.5",
Comment on lines 83 to 88
Copy link

@sentry sentry bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: color package v5 removes opaquer(), but code still calls it, leading to a TypeError.
Severity: CRITICAL | Confidence: 1.00

🔍 Detailed Analysis

The color package was upgraded to v5.0.2, which removed the opaquer() method. Existing code in static/app/utils/theme/theme.tsx and static/app/utils/theme/theme.chonk.tsx continues to call color(...).opaquer(1.0).string(). This will result in a TypeError: color(...).opaquer is not a function during application initialization, preventing the UI from loading.

💡 Suggested Fix

Replace all calls to color(...).opaquer(value) with color(...).alpha(value) to align with the color v5 API.

🤖 Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: package.json#L83-L88

Potential issue: The `color` package was upgraded to v5.0.2, which removed the
`opaquer()` method. Existing code in `static/app/utils/theme/theme.tsx` and
`static/app/utils/theme/theme.chonk.tsx` continues to call
`color(...).opaquer(1.0).string()`. This will result in a `TypeError: color(...).opaquer
is not a function` during application initialization, preventing the UI from loading.

Did we get this right? 👍 / 👎 to inform future reviews.

Copy link
Member Author

@scttcper scttcper Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it does WHAT

Expand All @@ -110,7 +109,7 @@
"buffer": "^6.0.3",
"cbor2": "^1.12.0",
"classnames": "2.3.1",
"color": "^4.2.3",
"color": "5.0.2",
"compression-webpack-plugin": "11.1.0",
"conduit-client": "^0.4.0",
"core-js": "3.45.0",
Expand Down
74 changes: 27 additions & 47 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading