Repository navigation
perf(mcp-apps-shell): drop the shell document's own Tailwind browser compiler - #27
Merged
Merged
Conversation
…compiler The shell document imported @tailwindcss/browser although generated code now renders in the inner frame, which has its own compiler. The shell chrome is styled by the build-time sheet, so the second compiler only duplicated rules against the default theme (font-mono fell back to the system monospace) and shipped the 282 KB bundle twice in the shell HTML. Claude-Session: https://claude.ai/code/session_019ZE3j9YzRKxT4LaiDCBv6S
Add a React-free precompileArtifact() that runs the Sucrase JSX transform and a Tailwind build against the same input the sandboxed frame compiles at runtime. Class candidates come from a bracket-aware source scanner, and code that builds class names dynamically is detected so it keeps the runtime path. A generated fingerprint over the compiler, extractor, theme and pinned versions marks compiled output as current. Nothing is wired yet. Pin tailwindcss and @tailwindcss/browser to one catalog version so the precompiled CSS and the runtime fallback agree. Claude-Session: https://claude.ai/code/session_019ZE3j9YzRKxT4LaiDCBv6S
…nder reads Add an optional ArtifactCompiler port to the executor config. When a host provides one, artifacts.save compiles the source and stores the fingerprint, JS and CSS in three new nullable columns. The compile step is fail-open: a failure saves the artifact with empty compiled columns. artifacts.get stays light and does not read the compiled columns. The new artifacts.getForRender returns them, and recompiles and writes back output stored under an older fingerprint, guarded on the source it compiled so a concurrent save wins. The HTTP get endpoint now returns an optional compiled field. The save payload is unchanged, so clients cannot supply compiled output. host-cloudflare wires the compiler through a lazy import. Includes the cloud schema and migration regeneration for the new columns. Claude-Session: https://claude.ai/code/session_019ZE3j9YzRKxT4LaiDCBv6S
…in the frame When an artifact arrives with output from the server compiler that matches the shell's own fingerprint, the renderer frame embeds the stored CSS and runs the stored JS. It loads neither the Tailwind browser compiler nor Sucrase, so the srcdoc is smaller and the first paint is already styled. Any mismatch, or a missing half (classes built at runtime keep Tailwind, uncompilable code keeps Sucrase), falls back to the previous behavior per half. Sucrase moves out of the inner renderer into its own bundle served as virtual:executor-inner-compiler and only included when needed. The console passes the stored compiled output to the shell on both the tool input and the tool result. The artifact-style skill now tells the model to write every class as a complete literal. Claude-Session: https://claude.ai/code/session_019ZE3j9YzRKxT4LaiDCBv6S
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.
Why
The shell document imported
@tailwindcss/browser, but generated code renders in the inner srcdoc frame, which has its own compiler. In the shell, this second compiler only styled chrome that the build-time sheet already covers. It ran against Tailwind's default theme, and its later sheet overrode ours.Confirmed in a browser test before the change:
font-monoin the shell's data view computed toui-monospace, SFMono-Regular, Menlo, …instead of Geist Mono.What changes
import "@tailwindcss/browser"fromshell-app.tsx, and refreshes two comments that named it.Tests
mcp-app.browser.test.tshas two new tests:Create compilermeasure in the shell frame.Both failed before the change and pass after. The full file passes, 26 of 26.
https://claude.ai/code/session_019ZE3j9YzRKxT4LaiDCBv6S