Vendor and integrate quarto-listing.scss into the theme bundle (bd-57y4) - #438
Merged
Conversation
…undle (bd-57y4) Q2 shipped the listing JS pair but never compiled Q1's quarto-listing.scss, so listing cards / tables / category chips rendered unstyled. Vendor the file verbatim to resources/scss/html/templates/ and compose it as a built-in SassLayer (load_listing_layer) at every HTML assembly site — both native and wasm, themed and default paths; not reveal. Design notes (claude-notes/plans/2026-07-29-listing-scss.md): - Unconditional like Q1 (listingSassBundle gates only on bootstrap, not page-has-listings), deviating from the strand's conditional sketch: the theme-CSS stage runs before listing resolution, and one shared theme CSS per site beats forking fingerprints. - $theme-name flows from the vendored bootstrap layer already, so the per-dark-theme chip overrides fire with no new code; the darkly test pins that (and documents the Q1-parity band quirk that keeps the border on bootstrap-default gray-600). - The file's invalid scss:variables marker is kept verbatim — Q1's parser has the same band behavior (quarto-cli#13960 family). Tests: 3 new quarto-sass unit tests (default path, themed path, darkly override + cosmo control), brand_render-shaped e2e asserting the rules land in a rendered site's CSS; preview/render CSS-parity guards stay green. The phase5 single-doc byte-identity baseline's styles.css hash is re-captured per its documented procedure (doc.html unchanged). Workspace 10794/10794; full cargo xtask verify green. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
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.
Implements bd-57y4: Q2 shipped the listing JS pair (
list.min.js+quarto-listing.js) but never compiled Q1'squarto-listing.scss, so listing cards, table listings, category chips, and the categories sidebar rendered with default browser styling. This vendors the file verbatim toresources/scss/html/templates/quarto-listing.scssand composes it as a built-inSassLayer(load_listing_layer) at every HTML assembly site — native and WASM, themed and default paths; not reveal.Plan + rationale:
claude-notes/plans/2026-07-29-listing-scss.md.Design notes
listingSassBundle()gates only on the format having Bootstrap, not onpageHasListings; on our side the theme-CSS stage runs before listing resolution, and a conditional layer would fork a website's theme CSS into two fingerprinted files. Cost is a few KB on non-listing pages — the same trade Q1 makes.$theme-nameoverrides came for free — the vendored bootstrap layer already defines$theme/$theme-name, so the per-dark-theme chip styling (darkly/slate/cyborg/…) activates with no new code; a darkly-vs-cosmo test pins it, including the Q1-parity band quirk (the file's invalidscss:variablesmarker rides in the functions band, identical in Q1's parser — kept verbatim on purpose).Tests
quarto-sassunit tests (default path, themed path, darkly override + cosmo control), mirroring the highlight/copy-code regression pattern.brand_render-shaped e2e: rendered site's CSS contains the listing rules.styles.csshash re-captured per its documented procedure (doc.htmlunchanged — no listing selector matches a single-doc body).cargo xtask verifygreen (pre-rebase; rebase onto post-q2 create: blog scaffold (website:blog) + listing Q1-parity fixes #434 main touched no overlapping files).e2e verified against the #434 blog scaffold:
q2 create project blog→q2 render→ theme CSS carries the card layout (div.quarto-post .thumbnail{flex-basis:30%…}), linked from the listing page.🤖 Generated with Claude Code