override font-family-modern font weight

dev/update-font-weight-override.js

@@ -0,0 +1,41 @@
+import fs from 'node:fs/promises';
+import cssParser from 'css';
+
+try {
+  const fontWeightModernRules = [];
+
+  const sw = await fetch('https://www.tumblr.com/sw.js').then((result) => result.text());
+  const urls = sw.match(/https:\/\/assets\.tumblr\.com\/pop\/[a-z0-9-]+\.css/g);
+  for (const url of urls) {
+    console.log('downloading', url);
+
+    const [cssText] = await Promise.all([
+      fetch(url).then((response) => response.text()),
+      new Promise((resolve) => setTimeout(resolve, 500))
+    ]);
+
+    const ast = cssParser.parse(cssText);
+    const rules = ast.stylesheet.rules
+      .flatMap((rule) => rule.rules ?? [rule])
+      .filter((rule) => rule.type === 'rule');
+
+    fontWeightModernRules.push(...rules.filter(
+      ({ declarations }) =>
+        declarations.find(({ property, value }) => property === 'font-family' && value === 'var(--font-family-modern)') &&
+        declarations.find(({ property, value }) => property === 'font-weight' && value === '350')
+    ));
+  }
+
+  const selectorSets = [...new Set(fontWeightModernRules.map(({ selectors }) => selectors.join(', ')))];
+
+  const override = `${selectorSets.join(',\n')} { font-weight: 400; }\n`;
+
+  await fs.writeFile('src/fontWeightOverride.css', override, {
+    encoding: 'utf8',
+    flag: 'w+'
+  });
+
+  console.log(`wrote ${selectorSets.length} selector sets`);
+} catch (e) {
+  console.log(e);
+}

package.json

@@ -8,10 +8,12 @@
     "build-webextension": "web-ext build",
     "sign-webextension": "web-ext sign",
     "webstore-upload": "chrome-webstore-upload upload --source=src/ --auto-publish",
-    "update-palette-system-data": "node dev/update-palette-system-data.js"
+    "update-palette-system-data": "node dev/update-palette-system-data.js",
+    "update-font-weight-override": "node dev/update-font-weight-override.js"
   },
   "devDependencies": {
     "chrome-webstore-upload-cli": "^3.3.1",
+    "css": "^3.0.0",
     "eslint": "^8.57.1",
     "eslint-config-semistandard": "^17.0.0",
     "eslint-config-standard": "^17.1.0",

src/fontWeightOverride.css

@@ -0,0 +1,81 @@
+.vgL3J,
+.TZgeO,
+.Gt2Q9,
+.n63mn,
+.OmZD7, .RSZnt,
+.gAJ73,
+.AiALR .enHco .fgOG_,
+.j8Eiw,
+.h7IR_,
+.ctBr6,
+.CsHnt,
+.fBQsy,
+.h6QpP,
+.zFlRa,
+.R4hFV,
+.gty8w,
+.sG03a,
+.EKpJR,
+.y0RtB,
+.R8_EV,
+.deHVW .x66yu, .cJ1ik .x66yu, .PCzZt .x66yu, .deHVW .pLL0g, .cJ1ik .pLL0g, .PCzZt .pLL0g,
+.L2HBn .x66yu, .n_fvx .x66yu, .L2HBn .pLL0g, .n_fvx .pLL0g,
+.Pl0ah,
+.NjLa2,
+.KVX8S,
+.ZRkRa,
+.F0gXR,
+.q9P6T,
+.u8J1W .wVZAK .M523y,
+.Hzn1C,
+.YmIEY,
+.wjhBM,
+.GutOb .BV4gt,
+.tSUo6,
+.zGDfg,
+.QKm6q .BnVIB .mV8AT,
+.Ks9nn .ZR5vI,
+.FzBTa .GpO9n,
+.c1xDI,
+.xPEP2,
+.rB7hU,
+.RPMuM,
+.KPqE4 p.zDaqs,
+.Sft1t,
+.a0QuG,
+.dJl65,
+.YmlZc,
+.KaTRm,
+.qyc0j,
+.YMD5o,
+.pYQdH .uHcx_,
+.Nq9JP,
+.amytk,
+.Z7ew7,
+.srYxv,
+.OfCo4,
+.WiceP,
+.f8LOG,
+.uaMQw,
+.Jo8I3,
+._ilsA,
+.kbuhn,
+.Isbe9,
+.SuDWJ,
+.nhqrO.ldaI8,
+.I3pYl,
+.YVaw6 .uJ0hL,
+.F3D5L,
+.R4UJx,
+.XADCw,
+.PpzPj,
+.L3C_C,
+.iWoxw,
+.iLTKv,
+.YtLa6 .aPaHS,
+.YtLa6 .G6FrY,
+.mhABv,
+.Z_cvW,
+.kjdMf .Shb25,
+.vgRpB,
+.Vt7qF .wL4YA.jk3gM .UEULa { font-weight: 400; }

src/main.js

@@ -3,6 +3,13 @@ const paletteSystemData = fetch(browser.runtime.getURL('/paletteSystemData.json'
 const setCssVariable = ([property, value]) => document.documentElement.style.setProperty(`--${property}`, value);
 const removeCssVariable = ([property]) => document.documentElement.style.removeProperty(`--${property}`);
 
+const timestamp = Date.now();
+const fontWeightOverrideLink = Object.assign(document.createElement('link'), {
+  rel: 'stylesheet',
+  href: browser.runtime.getURL(`/fontWeightOverride.css?t=${timestamp}`)
+});
+fontWeightOverrideLink.className = 'palettes-for-tumblr';
+
 let appliedPaletteEntries = [];
 
 const applyCurrentPalette = async function () {
@@ -52,6 +59,9 @@ const applyFontFamily = async function () {
     '--font-family-modern',
     fontFamily === 'custom' ? customFontFamily : fontFamily
   );
+  (fontFamily === 'custom' ? customFontFamily : fontFamily)
+    ? document.documentElement.append(fontWeightOverrideLink)
+    : fontWeightOverrideLink.remove();
 };
 
 const applyFontSize = async function () {

src/manifest.json

@@ -39,7 +39,7 @@
   },
   "permissions": [ "storage" ],
   "web_accessible_resources": [{
-    "resources": [ "*.json" ],
+    "resources": [ "*.json", "*.css" ],
     "matches": [ "*://www.tumblr.com/*" ]
   }],