feat(oxc): migrate the DevTools UI onto @vitejs/devtools-ui + UnoCSS - #430
Merged
Conversation
Upstream reusable overlay/form/container primitives styled only with the shared semantic shortcuts so they render on both the Wind4 (Nuxt) and Wind3 (webcomponents) surfaces. These back the oxc client's migration off @nuxt/ui and are available to every analyzer.
… UnoCSS Move the oxc client off @nuxt/ui + Tailwind onto the shared stack used by the rolldown and vite analyzers: UnoCSS via presetDevToolsUI, shared semantic tokens, DM Sans/Mono, the dotted-grid background, floating-vue tooltips and the shared dark-mode composable. The primary scale is derived from the BannerOxcDevTools cyan accent. @nuxt/ui overlays/forms are replaced by the new shared Card/Modal/Checkbox/EmptyState primitives, badges by badge-color-*, and icons by UnoCSS i-* classes; the Monaco config viewers keep their momoa cursor-to-docs mapping and follow dark mode. Wires oxc into the build, typecheck and export-snapshot gates (root tsconfig reference) and prunes the unused @nuxt/ui and tailwindcss catalog entries. oxc keeps dogfooding its own oxlint/oxfmt, whose formatting conflicts with the repo-wide antfu ESLint config, so it stays out of the shared ESLint run.
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-oxc
@vitejs/devtools-rolldown
@vitejs/devtools-vite
@vitejs/devtools-vitest
commit: |
Import the client's main.css (which carries the floating-vue popper overrides) from app.vue right after floating-vue's own stylesheet, instead of via the nuxt `css` array. The array-loaded sheet landed before floating-vue/dist/style.css, so the default dark popper background won the cascade and tooltips/dropdowns rendered dark in light mode. Mirrors the import order used by the rolldown and vite clients.
The lint error tooltip holds interactive links (rule details, open in editor), so give it a hide delay and make the popper itself hoverable (`popperTriggers: ['hover']`). Previously it faded out the moment the pointer left the underline marker, before it could reach the panel — restoring the hoverable-content behavior the former @nuxt/ui tooltip had.
Two issues made the .oxlintrc.json dialog look broken: Shiki paints its light theme background (#fff) via an inline style, so the code block rendered as a stark white panel that clashed with the translucent modal; and the dialog used a frosted bg-glass panel that muddied over the dimmed backdrop. Override Shiki's inline background to transparent (`!important`) and swap its inline colors for the dual-theme `--shiki-dark` values in dark mode, and give OverlayModal a solid `bg-base` panel so the code renders cleanly on a readable surface in both color schemes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Implements plan 018: bring
@vitejs/devtools-oxc— the only DevTools UI package still on@nuxt/ui+ Tailwind — onto the shared stack used by the rolldown and vite analyzers. Two logical commits:feat(ui): new shared primitives. AddsContainerCard,OverlayModal(teleport +bg-glasspanel + backdrop/Escape close),FormCheckbox, andVisualEmptyStateto@vitejs/devtools-ui. They're styled only with the shared semantic shortcuts so they stay safe on both the Wind4 (Nuxt) and Wind3 (webcomponents) surfaces, each with a colocated story. No existing consumer is touched.refactor(oxc): the actual swap. Moves the oxc client off@nuxt/ui+tailwindcssonto UnoCSS viapresetDevToolsUI:uno.config.tswith aprimaryscale derived from theBannerOxcDevToolscyan accent (#00F7F1);@unocss/nuxt+@vueuse/nuxtmodules; sharedglobal.css,floating-vueplugin, DM Sans/Mono, dotted-grid background and the shared dark-mode composable (storage keyvite-devtools-color-scheme).U*component maps to the new shared primitives,DisplayFileIcon/DisplayDuration,btn-action,badge-color-*, and UnoCSSi-*icons, with inlinedark:pairs folded intobg-base/color-base/border-base/op-fade.LineErrorswapsUTooltipfor a floating-vue tooltip (the ASCII-underline column math is preserved); the Monaco config viewers keep their momoa cursor→docs mapping and follow dark mode.tsconfig.jsonproject references (build / typecheck / export-snapshot now cover it); the unused@nuxt/uiandtailwindcsscatalog entries are pruned;AGENTS.mdandplans/README.mdupdated.pnpm lint && pnpm typecheck && pnpm build && pnpm testall pass.One deliberate deviation from the plan (a STOP condition). The plan suggested folding oxc into the repo-wide antfu ESLint run. In practice antfu's
style/arrow-parensandantfu/if-newlinedirectly conflict with oxc'soxfmt(arrowParens: "avoid"). Since@vitejs/devtools-oxcis the DevTools for the Oxc toolchain and dogfoods its own oxlint/oxfmt on itself, retiring its formatter would be a Leo-owned policy call beyond this UI-focused swap — so oxc keeps its own lint toolchain and stays out of the shared ESLint run (both pass locally). Recorded inAGENTS.mdand the plan row.Linked Issues
Implements
plans/018-oxc-ui-unocss-migration.md(PR A — thesrc/apprestructure — already landed in #424).Additional context
I couldn't run the live side-by-side
agent-browservisual diff (the sandbox kept killing the backgrounded dev server), so the look & feel was verified structurally: the cyan#00c9c4primary, the Phosphor/carbon/lucide/vscode/twemoji/catppuccin icons, and the semantic tokens are all present in the generated CSS. A visual pass in review would be worthwhile.This PR was created with the help of an agent.