chore: slim bundle, drop Faro, isolate CSS from Overleaf#168
Merged
Conversation
Replaces the all-in-one @streamdown/code bundle with a custom plugin that loads only 13 language grammars and 2 themes, cutting paperdebugger.js from 17 MB to 9.6 MB (-44%). Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TgDgdhwQk3SDKZkRcocfuQ
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TgDgdhwQk3SDKZkRcocfuQ
Scope all extension CSS under a .pd-scope class (via postcss-prefix-selector, only for the content-script build) so Tailwind preflight + heroui styles no longer leak into and mutate the Overleaf page. - postcss.config.js: prefix every selector with .pd-scope; special-case html/body/:root/*, theme classes, and self-scoped roots (#pd-embed-sidebar, .pd-rnd) as compound selectors - index.css: author rules globally; the build does the scoping - main.tsx: .pd-scope on root; dedicated #pd-portal host for heroui/react-aria portals (never portal into React's own mount container); scope-wrap the Overleaf-toolbar button portals - views/index.tsx: self-scope the floating window (.pd-scope on the Rnd) - providers.tsx: route react-aria overlay portals into #pd-portal - embed-sidebar.tsx: .pd-scope + theme seed on #pd-embed-sidebar - useThemeSync.ts: toggle .dark on every scope root, stop leaking it onto <html> Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
Junyi-99
changed the title
Junyi-99
changed the title
…ough
Follow-ups to the .pd-scope isolation:
- Native Overleaf toolbar buttons (TopMenuButton, Add-to-Chat) stay outside
.pd-scope so Overleaf's color rules win; only their inner content is scoped.
Our preflight `.pd-scope button{color:inherit}` was outranking Overleaf's
default subdued color (black text on dark Overleaf; hover was fine).
- Logo + label use Overleaf's --bs-btn-color so they track the toolbar theme.
- Floating window opacity/pointer-events moved to inline style: as .pd-scope
utilities they became descendant selectors that never matched the .pd-scope
Rnd element itself, so the hidden window still captured clicks and blocked
the editor.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
Junyi-99
added a commit
that referenced
this pull request
Jun 25, 2026
Reconcile the Tailwind v4 upgrade with the CSS-isolation + OTEL work that landed on staging (via #169 back-porting #168). Resolution: - CSS isolation kept on the PostCSS path: postcss.config.js runs @tailwindcss/postcss then postcss-prefix-selector (.pd-scope) for the default content-script build. Dropped @tailwindcss/vite — the Vite plugin bypasses PostCSS, which would break the prefix step. Verified: 3086 .pd-scope prefixes emitted in the default bundle. - tailwind.config.js deleted (v4 ports it to CSS: @theme/@plugin/@source/ @custom-variant in index.css), per the v4 upgrade guide. - vite.config.ts: staging's produce()-based config + #125 path aliases. Added setAutoFreeze(false) — immer froze the config and Vite mutates resolve.conditions at startup. - package.json: dropped Faro (staging replaced it with OpenTelemetry), kept OTEL + web-vitals + apple-sign-in, took #125's version bumps, dropped autoprefixer (v4 built-in). Aligned @eslint/js to eslint 9 (eslint 10 pulls react-hooks 7 which floods 44 new-rule errors — separate migration). - Regenerated bun.lock and package-lock.json. Build: exit 0, all 5 targets. Lint: 0 errors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe
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
1 participant
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.
Summary
@streamdown/code(bundles all 50+ Shiki grammars) with a custom plugin loading only 13 languages + 2 themes.paperdebugger.js17 MB → 9.4 MB..pd-scopeclass (viapostcss-prefix-selector, content-script build only) so Tailwind preflight + heroui no longer leak into and mutate the Overleaf page. All UI surfaces (floating window, embed sidebar, heroui popovers via a dedicated#pd-portal, toolbar buttons) are self-scoped.Testing notes
Automated: tsc + build clean. Manual (needs a browser on Overleaf):
🤖 Generated with Claude Code
https://claude.ai/code/session_01ECe2qZWextwVCycC9EveFe