Override font-family-modern
font weight (fetch method)
#233
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
As in #231, this overrides the unusual 350 font weight used by Tumblr on elements with the
--font-family-modern
font face when we're changing what font that variable refers to, preventing overly thin font rendering in certain scenarios. This, however, creates the selectors live in real time.This is done with a module that exports a style element which it will update to include the selectors from any Tumblr stylesheets in the document head that set
font-family: var(--font-family-modern)
andfont-weight: 350
. A mutation observer is used to detect the addition of new link elements, like when opening the post editor or navigating to communities, and their target css files are fetched and parsed to find matching rules using the (clunky, imo) browser native CSSOM API.Resolves #223.
Obsoletes #232, which solved the problem in a broadly similar way but tried to read the
sheet
property of the link elements themselves. That ran into CORS issues, requiring the creation of some otherwise-duplicate link elements withcrossorigin=anonymous
and required the script to be injected into the page context (only in Firefox, I would guess, but I didn't test chromium). It also conferred no real efficiency benefit because the direct fetch used in this PR hits the service worker cache anyway, so it's free.Note that this intentionally doesn't include rules which are inside a media query, of which there are two (both making changes exclusive to the mobile layout, neither of which I could actually observe). If needed, we could definitely add this functionality (marcustyphoon@2f586b9 translated to CSSOM).
Testing steps
font-weight: bold
) are instantly applied to the page (when the file is saved if usingweb-ext run
, or when the extension is reloaded from another tab). This is a proxy for Firefox autoupdate testing; see Fix static styles failing to update XKit-Rewritten#1619.