Skip to content

Conversation

@ardeora
Copy link
Contributor

@ardeora ardeora commented Sep 18, 2023

Fixes #5940
Fixes #5609

This change brings a few styling changes to the core devtools

  1. Switches Emotion CSS to goober.
  • Emotion in dev mode adds multiple style tags in dev mode. Since we use the devtools in dev mode primarily, there would be multiple style tags polluting the document
  • Goober has the exact same API like Emotion but has a way lighter footprint
  • All Goober devtools styles are added to a single style tag
  1. Adds classnames to most elements of the devtools so that they can be targeted and styled with a custom stylesheet in user-land (Should custom panel styles be overridden by defaults? #5940)
  2. More specific styles that do not get overriden by vite default template
  3. Adjusting height/width of the devtools do not change the class name so more performant (devtools: adding lots of style attributes #5609)

@vercel
Copy link

vercel bot commented Sep 18, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
query ⬜️ Ignored (Inspect) Visit Preview Sep 18, 2023 7:57pm

@nx-cloud
Copy link

nx-cloud bot commented Sep 18, 2023

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 1365767. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch


🟥 Failed Commands
nx affected --targets=test:eslint,test:lib,test:types,test:build,test:bundle

Sent with 💌 from NxCloud.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 18, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1365767:

Sandbox Source
@tanstack/query-example-react-basic-typescript Configuration
@tanstack/query-example-solid-basic-typescript Configuration
@tanstack/query-example-svelte-basic Configuration
@tanstack/query-example-vue-basic Configuration

@TkDodo
Copy link
Collaborator

TkDodo commented Sep 18, 2023

should we add documentation on how to overwrite custom styles?

also, are the options listed here still correct?

https://tanstack.com/query/v5/docs/react/devtools#options

I can see that panelProps etc has been removed, so we need to show how to do it now

@TkDodo TkDodo merged commit cb15a2a into TanStack:beta Sep 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants