@turntrout/subfont 1.0.2 → 1.0.3

package/lib/getCssRulesByProperty.js

@@ -24,15 +24,49 @@ const counterRendererNames = new Set([
 ]);
 
 function unwrapNamespace(str) {
-  if (/^"/.test(str)) {
+  if (/^["']/.test(str)) {
     return unquote(str);
   } else if (/^url\(.*\)$/i.test(str)) {
-    return unquote(str.replace(/^url\((.*)\)$/, '$1'));
+    return unquote(str.replace(/^url\((.*)\)$/i, '$1'));
   } else {
     throw new Error(`Cannot parse CSS namespace: ${str}`);
   }
 }
 
+// Build a collision-free fingerprint for a CSS rule entry. Null bytes (\0)
+// delimit fields because they cannot appear in CSS property values.
+function ruleFingerprint(rule) {
+  const predicateEntries = Object.keys(rule.predicates)
+    .sort()
+    .map((k) => `${k}=${rule.predicates[k]}`);
+  return [
+    rule.selector,
+    rule.value,
+    rule.prop,
+    rule.important,
+    (rule.specificityArray || []).join(','),
+    rule.namespaceURI,
+    predicateEntries.join('&'),
+  ].join('\0');
+}
+
+// Remove fully-duplicate rule entries (same selector, value, specificity,
+// predicates, namespace, and importance) within each property.
+function deduplicateRules(rulesByProperty) {
+  for (const key of Object.keys(rulesByProperty)) {
+    if (key === 'counterStyles' || key === 'keyframes') continue;
+    const rules = rulesByProperty[key];
+    if (rules.length <= 1) continue;
+    const seen = new Set();
+    rulesByProperty[key] = rules.filter((rule) => {
+      const fp = ruleFingerprint(rule);
+      if (seen.has(fp)) return false;
+      seen.add(fp);
+      return true;
+    });
+  }
+}
+
 function getCssRulesByProperty(properties, cssSource, existingPredicates) {
   if (!Array.isArray(properties)) {
     throw new Error('properties argument must be an array');
@@ -44,13 +78,21 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
 
   const parseTree = postcss.parse(cssSource);
   let defaultNamespaceURI;
+  const namespacePrefixes = new Map();
+  // Parse @namespace rules: either a default namespace or a prefixed one.
+  // Spec: https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace
+  // Grammar: @namespace <prefix>? [<string> | url(<uri>)]
   parseTree.walkAtRules('namespace', (rule) => {
-    const fragments = rule.params.split(/\s+/);
-    if (fragments.length === 1) {
-      defaultNamespaceURI = unwrapNamespace(rule.params);
+    const match = rule.params.match(
+      /^(?<prefix>\w+)\s+(?<uri>.+)$|^(?<defaultUri>.+)$/
+    );
+    if (!match) return;
+    const { prefix, uri, defaultUri } = match.groups;
+    if (prefix) {
+      namespacePrefixes.set(prefix, unwrapNamespace(uri));
+    } else {
+      defaultNamespaceURI = unwrapNamespace(defaultUri);
     }
-    // FIXME: Support registering namespace prefixes (fragments.length === 2):
-    // https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace
   });
   const rulesByProperty = {
     counterStyles: [],
@@ -61,6 +103,33 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
     rulesByProperty[property] = [];
   }
 
+  // Resolve the namespace URI for a selector by examining its subject
+  // (the rightmost compound selector) for a namespace prefix like svg|text.
+  function resolveNamespaceURI(selector) {
+    if (namespacePrefixes.size === 0) {
+      return defaultNamespaceURI;
+    }
+    // Find the subject (rightmost simple selector before pseudo-elements).
+    // Split on combinators: whitespace, >, +, ~
+    const compoundSelectors = selector.split(/\s*[>+~]\s*|\s+/);
+    const subject = compoundSelectors[compoundSelectors.length - 1];
+    // Check for namespace prefix: prefix|element, *|element, or |element
+    const nsMatch = subject.match(/^(?<nsPrefix>\*|\w*)\|/);
+    if (!nsMatch) {
+      return defaultNamespaceURI;
+    }
+    const prefix = nsMatch.groups.nsPrefix;
+    if (prefix === '*') {
+      // *|element matches any namespace — no namespace filter
+      return undefined;
+    }
+    if (prefix === '') {
+      // |element means no namespace (elements not in any namespace)
+      return '';
+    }
+    return namespacePrefixes.get(prefix) || defaultNamespaceURI;
+  }
+
   const specificityCache = new Map();
   function getSpecificity(selector) {
     let cached = specificityCache.get(selector);
@@ -87,12 +156,15 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
   function pushRulePerSelector(node, prop, value) {
     getSpecificity(node.parent.selector).forEach((specificityObject) => {
       const isStyleAttribute = specificityObject.selector === 'bogusselector';
+      const selectorStr = isStyleAttribute
+        ? undefined
+        : specificityObject.selector.trim();
       (rulesByProperty[prop] = rulesByProperty[prop] || []).push({
         predicates: getCurrentPredicates(),
-        namespaceURI: defaultNamespaceURI,
-        selector: isStyleAttribute
-          ? undefined
-          : specificityObject.selector.trim(),
+        namespaceURI: isStyleAttribute
+          ? defaultNamespaceURI
+          : resolveNamespaceURI(selectorStr),
+        selector: selectorStr,
         specificityArray: isStyleAttribute
           ? [1, 0, 0, 0]
           : specificityObject.specificityArray,
@@ -198,12 +270,15 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
           getSpecificity(node.parent.selector).forEach((specificityObject) => {
             const isStyleAttribute =
               specificityObject.selector === 'bogusselector';
+            const fontSelector = isStyleAttribute
+              ? undefined
+              : specificityObject.selector.trim();
             const entry = {
               predicates: getCurrentPredicates(),
-              namespaceURI: defaultNamespaceURI,
-              selector: isStyleAttribute
-                ? undefined
-                : specificityObject.selector.trim(),
+              namespaceURI: isStyleAttribute
+                ? defaultNamespaceURI
+                : resolveNamespaceURI(fontSelector),
+              selector: fontSelector,
               specificityArray: isStyleAttribute
                 ? [1, 0, 0, 0]
                 : specificityObject.specificityArray,
@@ -261,7 +336,7 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
     }
   })(parseTree);
 
-  // TODO: Collapse into a single object for duplicate values?
+  deduplicateRules(rulesByProperty);
 
   return rulesByProperty;
 }

package/lib/normalizeFontPropertyValue.js

@@ -3,6 +3,34 @@ const initialValueByProp = require('./initialValueByProp');
 const unquote = require('./unquote');
 const normalizeFontStretch = require('font-snapper/lib/normalizeFontStretch');
 
+// Resolve the CSS relative font-weight keyword `bolder` according to CSS Fonts Level 4.
+// https://www.w3.org/TR/css-fonts-4/#relative-weights
+function applyBolder(weight) {
+  if (weight < 350) return 400;
+  if (weight < 550) return 700;
+  return 900;
+}
+
+// Resolve the CSS relative font-weight keyword `lighter` according to CSS Fonts Level 4.
+function applyLighter(weight) {
+  if (weight < 100) return weight;
+  if (weight < 550) return 100;
+  if (weight < 750) return 400;
+  return 700;
+}
+
+// Resolve a font-weight name (e.g. "bold") or numeric string to a number.
+// Returns NaN if the value is not a recognized weight.
+function resolveWeightToken(token) {
+  const named = cssFontWeightNames[token];
+  return parseFloat(named !== undefined ? named : token);
+}
+
+// Return true when the numeric weight is within the CSS spec range [1, 1000].
+function isValidWeight(weight) {
+  return weight >= 1 && weight <= 1000;
+}
+
 function normalizeFontPropertyValue(propName, value) {
   const propNameLowerCase = propName.toLowerCase();
   if (value === undefined) {
@@ -13,16 +41,29 @@ function normalizeFontPropertyValue(propName, value) {
   } else if (propNameLowerCase === 'font-weight') {
     let parsedValue = value;
     if (typeof parsedValue === 'string') {
-      // FIXME: Stripping the +bolder... suffix here will not always yield the correct result
-      // when expanding animations and transitions
-      parsedValue = parsedValue.replace(/\+.*$/, '').toLowerCase();
+      // font-tracer encodes relative weight modifiers as "baseWeight+bolder+lighter+..."
+      // Apply each modifier sequentially per the CSS Fonts Level 4 spec.
+      const segments = parsedValue.split('+');
+      const baseToken = segments[0].toLowerCase();
+      let baseWeight = resolveWeightToken(baseToken);
+      if (isValidWeight(baseWeight) && segments.length > 1) {
+        for (let i = 1; i < segments.length; i++) {
+          const modifier = segments[i].toLowerCase();
+          if (modifier === 'bolder') {
+            baseWeight = applyBolder(baseWeight);
+          } else if (modifier === 'lighter') {
+            baseWeight = applyLighter(baseWeight);
+          }
+        }
+        return baseWeight;
+      }
+      parsedValue = baseToken;
     }
-    parsedValue = parseFloat(cssFontWeightNames[parsedValue] || parsedValue);
-    if (parsedValue >= 1 && parsedValue <= 1000) {
-      return parsedValue;
-    } else {
-      return value;
+    const numericWeight = resolveWeightToken(parsedValue);
+    if (isValidWeight(numericWeight)) {
+      return numericWeight;
     }
+    return value;
   } else if (propNameLowerCase === 'font-stretch') {
     return normalizeFontStretch(value);
   } else if (typeof value === 'string' && propNameLowerCase !== 'src') {

package/lib/subsetFonts.js

@@ -854,7 +854,6 @@ async function subsetFonts(
   for (const htmlOrSvgAsset of htmlOrSvgAssets) {
     const accumulatedFontFaceDeclarations =
       fontFaceDeclarationsByHtmlOrSvgAsset.get(htmlOrSvgAsset);
-    // TODO: Maybe group by media?
     const containedRelationsByFontFaceRule = new Map();
     for (const { relations } of accumulatedFontFaceDeclarations) {
       for (const relation of relations) {
@@ -882,14 +881,42 @@ async function subsetFonts(
       continue;
     }
 
-    const fallbackCssText = [...containedRelationsByFontFaceRule.keys()]
-      .map((rule) =>
-        getFontFaceDeclarationText(
-          rule,
-          containedRelationsByFontFaceRule.get(rule)
-        )
-      )
-      .join('');
+    // Group @font-face rules by their enclosing @media context so the
+    // fallback CSS preserves the original media-conditional loading.
+    // Walk up the ancestor chain in case the rule is nested (e.g.
+    // inside @supports inside @media).
+    const rulesByMedia = new Map(); // media params (or '') → [cssText, ...]
+    for (const rule of containedRelationsByFontFaceRule.keys()) {
+      let mediaKey = '';
+      let ancestor = rule.parent;
+      while (ancestor) {
+        if (
+          ancestor.type === 'atrule' &&
+          ancestor.name.toLowerCase() === 'media'
+        ) {
+          mediaKey = ancestor.params;
+          break;
+        }
+        ancestor = ancestor.parent;
+      }
+      if (!rulesByMedia.has(mediaKey)) rulesByMedia.set(mediaKey, []);
+      rulesByMedia
+        .get(mediaKey)
+        .push(
+          getFontFaceDeclarationText(
+            rule,
+            containedRelationsByFontFaceRule.get(rule)
+          )
+        );
+    }
+    let fallbackCssText = '';
+    for (const [media, texts] of rulesByMedia) {
+      if (media) {
+        fallbackCssText += `@media ${media}{${texts.join('')}}`;
+      } else {
+        fallbackCssText += texts.join('');
+      }
+    }
 
     let cssAsset = fallbackCssAssetCache.get(fallbackCssText);
     if (!cssAsset) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turntrout/subfont",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Automatically subset web fonts to only the characters used on your pages. Fork of Munter/subfont with modern defaults.",
   "engines": {
     "node": ">=18.0.0"