feat(ui): shadow stylesheet loader — content.css transform + adopt (stage 2a)#189
Merged
Conversation
…tage 2a) Builds the bulk-CSS mechanism the sidebar migration (stage 2b) needs: load content.css once, rewrite its ancestor theme selectors to :host(...) form, and adopt the result into the shadow UI root. - New src/content/shadow-css.js (standalone module): pure transformForShadow (html.si18n-dark → :host(.si18n-dark); body:is(.si18n-lang-ar,.si18n-lang-he) → :host(:is(...)); body.si18n-lang-XX → :host(.si18n-lang-XX)) + a cached fetch→transform→CSSStyleSheet loader + idempotent adopt. - The CSS path is resolved from the manifest (content_scripts[].css[0]) so it works in both the dev build (src/content/content.css) and the bundle (content.bundle.css). manifest + build-bundle.js make that file web-accessible (build remaps the dev path to content.bundle.css). - getUiRoot adopts the sheet into #skillbridge-root. The FAB keeps its inline critical style (the adopted sheet loads async). Verified: - tests/shadow-css.test.js (8): transform cases incl. a completeness pass over the REAL content.css — asserts NO html./body. theme prefix survives (all 391 rewritten) and the :host forms appear. - shadow-isolation.spec.js: new assertion that content.css is fetched, transformed (contains :host(.si18n-dark)), and adopted into the shadow root — proven against the minified bundle. - 520 unit tests, full E2E (19), lint, prettier, validate, check:* — green. Next (stage 2b): move the sidebar + its dependent modules' ~83 query sites into the shadow root, styled by this adopted sheet.
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.
Stage 2a of the Shadow DOM migration. Builds the bulk-CSS mechanism the sidebar (stage 2b) needs, on the already-shadowed FAB — no UI moved, no 83-site churn yet.
What
src/content/shadow-css.js(standalone): puretransformForShadowrewrites content.css's ancestor theme selectors into:host(...)form, plus a cachedfetch → transform → CSSStyleSheetloader and idempotent adopt.content_scripts[].css[0]), so it resolves tosrc/content/content.cssin dev andcontent.bundle.cssin the bundle.manifest.json+build-bundle.jsmake that file web-accessible (the build remaps the dev path →content.bundle.css).getUiRootadopts the sheet into#skillbridge-root; the FAB keeps its inline critical style (adopt is async).Verification
tests/shadow-css.test.js(8 unit tests): includes a completeness pass over the real content.css — asserts nohtml./body.theme prefix survives (all 391 rewritten) and the:host(...)forms appear.shadow-isolation.spec.js: new assertion that content.css is fetched, transformed (:host(.si18n-dark)present), and adopted into the shadow root — verified against the minified bundle (catches any minify/transform interaction).Next (stage 2b)
Move the sidebar + its dependent modules (~83 document-level query sites →
sb.uiRoot()), styled by this adopted sheet.🤖 Generated with Claude Code