@thejaredwilcurt/csslop 0.0.43 → 0.0.44

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -35,7 +35,7 @@
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^65.3.8",
+    "eslint-plugin-jsdoc": "^65.3.11",
     "fflate": "^0.8.3",
     "globals": "^17.13.0",
     "pretty-ms": "^10.0.0",

package/src/value/color-mix.js

@@ -57,31 +57,104 @@ function formatOklch (L, C, H, alpha) {
 }
 
 /**
- * Detect which channel indices have 'none' in a raw color function string.
+ * Splits the simple, non-nested components of a static color function.
  *
- * @param  {string} rawColorStr  The raw CSS color function string (e.g. "rgb(none 0 0)").
- * @return {Array}               An array of zero-based channel indices where 'none' was found.
+ * @param  {string} argumentText  The text inside a color function's parentheses.
+ * @return {Array}                The whitespace, comma, and slash-delimited components.
  */
-function findNoneChannels (rawColorStr) {
+function splitSimpleColorComponents (argumentText) {
+  // Split CSS color components at whitespace, commas, or the alpha slash.
+  return argumentText.trim().split(/[\s,/]+/).filter((part) => {
+    return part.length > 0;
+  });
+}
+
+/**
+ * Collects the zero-based positions of missing color components.
+ *
+ * @param  {Array}  components  The parsed color components.
+ * @param  {number} startIndex  The component index represented by the first item.
+ * @return {Array}              The channel indices whose value is `none`.
+ */
+function collectNoneChannelIndices (components, startIndex) {
   const indices = [];
-  // Match rgb/rgba/hsl/hsla/hwb function calls and extract their arguments
-  const functionMatch = rawColorStr.match(/\b(?:rgba?|hsla?|hwb)\(([^)]*)\)/i);
-  if (functionMatch) {
-    // Split arguments on whitespace, commas, or slash separators
-    const parts = functionMatch[1].trim().split(/[\s,/]+/).map((part) => {
-      return part.trim();
-    }).filter((part) => {
-      return part.length > 0;
-    });
-    parts.forEach((part, index) => {
-      if (part.toLowerCase() === 'none') {
-        indices.push(index);
-      }
-    });
+  for (let index = 0; index < components.length; index++) {
+    if (components[index].toLowerCase() === 'none') {
+      indices.push(startIndex + index);
+    }
   }
   return indices;
 }
 
+/**
+ * Finds the first CSS whitespace character in a string.
+ *
+ * @param  {string} text  The text to inspect.
+ * @return {number}       The first whitespace index, or -1 when there is none.
+ */
+function findFirstWhitespaceIndex (text) {
+  for (let index = 0; index < text.length; index++) {
+    if (' \t\n\r\f'.includes(text[index])) {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Detect which channel indices have `none` in a raw static color function.
+ *
+ * @param  {string} rawColorString  The raw CSS color function string.
+ * @return {Array}                  An array of zero-based channel indices where `none` was found.
+ */
+function findNoneChannels (rawColorString) {
+  const openParenthesisIndex = rawColorString.indexOf('(');
+  const closeParenthesisIndex = rawColorString.lastIndexOf(')');
+  if (openParenthesisIndex === -1 || closeParenthesisIndex <= openParenthesisIndex) {
+    return [];
+  }
+
+  const functionName = rawColorString.slice(0, openParenthesisIndex).trim().toLowerCase();
+  const argumentText = rawColorString.slice(openParenthesisIndex + 1, closeParenthesisIndex).trim();
+  if (['rgb', 'rgba', 'hsl', 'hsla', 'hwb'].includes(functionName)) {
+    return collectNoneChannelIndices(splitSimpleColorComponents(argumentText), 0);
+  }
+
+  if (functionName !== 'color') {
+    return [];
+  }
+
+  const firstComponentEnd = findFirstWhitespaceIndex(argumentText);
+  if (firstComponentEnd === -1 || argumentText.slice(0, firstComponentEnd).toLowerCase() !== 'srgb') {
+    return [];
+  }
+  const channelText = argumentText.slice(firstComponentEnd).trim();
+  return collectNoneChannelIndices(splitSimpleColorComponents(channelText), 0);
+}
+
+/**
+ * Fills missing interpolation components from the matching component in the
+ * other color before either color is premultiplied by alpha.
+ *
+ * @param  {object} firstColor   The first parsed color-mix argument.
+ * @param  {object} secondColor  The second parsed color-mix argument.
+ * @return {void}
+ */
+function fillMissingColorChannels (firstColor, secondColor) {
+  const firstMissingChannels = findNoneChannels(firstColor.raw);
+  const secondMissingChannels = findNoneChannels(secondColor.raw);
+  for (const channelIndex of firstMissingChannels) {
+    if (channelIndex < firstColor.color.length) {
+      firstColor.color[channelIndex] = secondColor.color[channelIndex];
+    }
+  }
+  for (const channelIndex of secondMissingChannels) {
+    if (channelIndex < secondColor.color.length) {
+      secondColor.color[channelIndex] = firstColor.color[channelIndex];
+    }
+  }
+}
+
 /**
  * Evaluate an N-color (3+) color-mix() expression. Returns a minified CSS color string or null.
  *
@@ -208,17 +281,26 @@ function normalizeUnresolvableNColorMix (colorSpace, parsedArgs) {
  * @return {string}                  A hex color string.
  */
 function mixNColorsSrgb (colors, weights, alphaMultiplier) {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  let alpha = 0;
+  let premultipliedRed = 0;
+  let premultipliedGreen = 0;
+  let premultipliedBlue = 0;
+  let interpolatedAlpha = 0;
   for (let i = 0; i < colors.length; i++) {
-    r += colors[i][0] * weights[i];
-    g += colors[i][1] * weights[i];
-    b += colors[i][2] * weights[i];
-    alpha += colors[i][3] * weights[i];
+    const weightedAlpha = colors[i][3] * weights[i];
+    premultipliedRed += colors[i][0] * weightedAlpha;
+    premultipliedGreen += colors[i][1] * weightedAlpha;
+    premultipliedBlue += colors[i][2] * weightedAlpha;
+    interpolatedAlpha += weightedAlpha;
   }
-  return rgbaToHex(Math.round(r), Math.round(g), Math.round(b), alpha * alphaMultiplier);
+  if (interpolatedAlpha === 0) {
+    return rgbaToHex(0, 0, 0, 0);
+  }
+  return rgbaToHex(
+    Math.round(premultipliedRed / interpolatedAlpha),
+    Math.round(premultipliedGreen / interpolatedAlpha),
+    Math.round(premultipliedBlue / interpolatedAlpha),
+    interpolatedAlpha * alphaMultiplier
+  );
 }
 
 /**
@@ -236,16 +318,28 @@ function mixNColorsOklab (colors, weights, alphaMultiplier) {
   let L = 0;
   let a = 0;
   let b = 0;
-  let alpha = 0;
+  let interpolatedAlpha = 0;
   for (let i = 0; i < oklabValues.length; i++) {
-    L += oklabValues[i].L * weights[i];
-    a += oklabValues[i].a * weights[i];
-    b += oklabValues[i].b * weights[i];
-    alpha += colors[i][3] * weights[i];
-  }
-  alpha *= alphaMultiplier;
-  const rgb = oklabToRgb(L, a, b);
-  return rgbaToHex(rgb[0], rgb[1], rgb[2], alpha >= 1 ? 1 : alpha);
+    const weightedAlpha = colors[i][3] * weights[i];
+    L += oklabValues[i].L * weightedAlpha;
+    a += oklabValues[i].a * weightedAlpha;
+    b += oklabValues[i].b * weightedAlpha;
+    interpolatedAlpha += weightedAlpha;
+  }
+  if (interpolatedAlpha === 0) {
+    return rgbaToHex(0, 0, 0, 0);
+  }
+  const rgb = oklabToRgb(
+    L / interpolatedAlpha,
+    a / interpolatedAlpha,
+    b / interpolatedAlpha
+  );
+  return rgbaToHex(
+    rgb[0],
+    rgb[1],
+    rgb[2],
+    interpolatedAlpha * alphaMultiplier
+  );
 }
 
 /**
@@ -329,19 +423,7 @@ function evaluateColorMix (expr) {
     return rgbaToHex(parsed1.color[0], parsed1.color[1], parsed1.color[2], parsed1.color[3]);
   }
 
-  // CSS spec: 'none' channels are missing — fill from the other color before mixing
-  const nones1 = findNoneChannels(parsed1.raw);
-  const nones2 = findNoneChannels(parsed2.raw);
-  for (const idx of nones1) {
-    if (idx < parsed1.color.length) {
-      parsed1.color[idx] = parsed2.color[idx];
-    }
-  }
-  for (const idx of nones2) {
-    if (idx < parsed2.color.length) {
-      parsed2.color[idx] = parsed1.color[idx];
-    }
-  }
+  fillMissingColorChannels(parsed1, parsed2);
 
   const t1 = p1 / (p1 + p2);
   const t2 = p2 / (p1 + p2);
@@ -349,37 +431,44 @@ function evaluateColorMix (expr) {
   const [r2, g2, b2, a2] = parsed2.color;
 
   if (colorSpace === 'srgb') {
-    const r = Math.round(r1 * t1 + r2 * t2);
-    const g = Math.round(g1 * t1 + g2 * t2);
-    const b = Math.round(b1 * t1 + b2 * t2);
-    const a = (a1 * t1 + a2 * t2) * alphaMultiplier;
-    return rgbaToHex(r, g, b, a);
+    return mixNColorsSrgb(
+      [parsed1.color, parsed2.color],
+      [t1, t2],
+      alphaMultiplier
+    );
   }
 
   if (colorSpace === 'oklab') {
     const lab1 = rgbToOklab(r1, g1, b1);
     const lab2 = rgbToOklab(r2, g2, b2);
-    const L = lab1.L * t1 + lab2.L * t2;
-    const a = lab1.a * t1 + lab2.a * t2;
-    const b = lab1.b * t1 + lab2.b * t2;
-    const alpha = (a1 * t1 + a2 * t2) * alphaMultiplier;
-    // Check if result fits in sRGB gamut
-    const rgb = oklabToRgb(L, a, b);
-    if (alpha >= 1) {
-      return rgbaToHex(rgb[0], rgb[1], rgb[2], 1);
+    const firstWeightedAlpha = a1 * t1;
+    const secondWeightedAlpha = a2 * t2;
+    const interpolatedAlpha = firstWeightedAlpha + secondWeightedAlpha;
+    if (interpolatedAlpha === 0) {
+      return rgbaToHex(0, 0, 0, 0);
     }
-    return rgbaToHex(rgb[0], rgb[1], rgb[2], alpha);
+    const L = (lab1.L * firstWeightedAlpha + lab2.L * secondWeightedAlpha) / interpolatedAlpha;
+    const a = (lab1.a * firstWeightedAlpha + lab2.a * secondWeightedAlpha) / interpolatedAlpha;
+    const b = (lab1.b * firstWeightedAlpha + lab2.b * secondWeightedAlpha) / interpolatedAlpha;
+    const rgb = oklabToRgb(L, a, b);
+    return rgbaToHex(rgb[0], rgb[1], rgb[2], interpolatedAlpha * alphaMultiplier);
   }
 
   if (colorSpace === 'oklch') {
     const lch1 = rgbToOklch(r1, g1, b1);
     const lch2 = rgbToOklch(r2, g2, b2);
-    const L = lch1.L * t1 + lch2.L * t2;
-    const C = lch1.C * t1 + lch2.C * t2;
-    const H = interpolateHueShorter(lch1.H, lch2.H, t2);
-    const alpha = (a1 * t1 + a2 * t2) * alphaMultiplier;
+    const firstWeightedAlpha = a1 * t1;
+    const secondWeightedAlpha = a2 * t2;
+    const interpolatedAlpha = firstWeightedAlpha + secondWeightedAlpha;
+    if (interpolatedAlpha === 0) {
+      return rgbaToHex(0, 0, 0, 0);
+    }
+    const L = (lch1.L * firstWeightedAlpha + lch2.L * secondWeightedAlpha) / interpolatedAlpha;
+    const C = (lch1.C * firstWeightedAlpha + lch2.C * secondWeightedAlpha) / interpolatedAlpha;
+    const H = interpolateHueShorter(lch1.H, lch2.H, secondWeightedAlpha / interpolatedAlpha);
+    const alpha = interpolatedAlpha * alphaMultiplier;
     // In-gamut results have an exact sRGB equivalent, which is always shorter than oklch()
-    const hex = convertOklchToHex(L, C, H, alpha >= 1 ? 1 : alpha);
+    const hex = convertOklchToHex(L, C, H, alpha);
     if (hex) {
       return hex;
     }

package/src/value/colors.js

@@ -302,6 +302,29 @@ function parseHex (hex) {
   return null;
 }
 
+/**
+ * Matches a static `color(srgb ...)` function. The three color components may
+ * be unit-interval numbers or percentages, followed by an optional alpha.
+ *
+ * @type {RegExp}
+ */
+const SRGB_COLOR_FUNCTION_PATTERN = /^color\(\s*srgb\s+(-?[\d.]+%?)\s+(-?[\d.]+%?)\s+(-?[\d.]+%?)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/;
+
+/**
+ * Converts one `color(srgb ...)` component to the 0-255 range.
+ *
+ * @param  {string}      component  A unit-interval number or percentage.
+ * @return {number|null}            The channel value, or null when invalid.
+ */
+function parseSrgbColorComponent (component) {
+  const numericValue = parseFloat(component);
+  if (!Number.isFinite(numericValue)) {
+    return null;
+  }
+  const normalizedValue = component.endsWith('%') ? numericValue / 100 : numericValue;
+  return Math.round(normalizedValue * 255);
+}
+
 /**
  * Parse a CSS color string to [r, g, b, a] (r,g,b: 0-255, a: 0-1) or null if unresolvable.
  *
@@ -326,8 +349,20 @@ function parseColor (colorString) {
     return parseHex(normalized);
   }
 
+  // color(srgb ...) uses unit-interval color channels rather than rgb's 0-255 channels.
+  let match = normalized.match(SRGB_COLOR_FUNCTION_PATTERN);
+  if (match) {
+    const red = parseSrgbColorComponent(match[1]);
+    const green = parseSrgbColorComponent(match[2]);
+    const blue = parseSrgbColorComponent(match[3]);
+    if (red === null || green === null || blue === null) {
+      return null;
+    }
+    return [red, green, blue, Math.max(0, Math.min(1, parseAlphaString(match[4])))];
+  }
+
   // rgb() / rgba() space syntax
-  let match = normalized.match(/^rgba?\(\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/);
+  match = normalized.match(/^rgba?\(\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/);
   if (match) {
     const r = Math.round(parseFloat(match[1]));
     const g = Math.round(parseFloat(match[2]));

package/src/value/minify.js

@@ -44,6 +44,7 @@ import {
   parseAngleToDegrees,
   roundCompactNumber
 } from './shared.js';
+import { minifySvgDataUri } from './svg-data-uri.js';
 import { elideRedundantSeparators } from './tokens.js';
 import { minifyTransformValue } from './transforms.js';
 import { optimizeUnicodeRange } from './unicode-range.js';
@@ -274,12 +275,114 @@ function minifyUrlContent (rawContent) {
     }
   }
 
+  const minifiedSvgDataUri = minifySvgDataUri(path);
+  if (minifiedSvgDataUri) {
+    return minifiedSvgDataUri;
+  }
+
   // Remove a leading current-directory indicator (`./`); browsers resolve it implicitly
   path = path.replace(/^\.\//, '');
 
   return formatUrlPath(path);
 }
 
+/**
+ * Builds a marker that cannot appear in a parsed CSS value. URL functions are
+ * temporarily replaced with these markers while generic string operations run.
+ *
+ * @param  {number} index  The URL token index.
+ * @return {string}        The marker representing that URL token.
+ */
+function createUrlTokenMarker (index) {
+  return '\u0000csslop-url-' + index + '\u0000';
+}
+
+/**
+ * Replaces URL tokens with stable markers so generic value normalization does
+ * not alter data carried inside a URL.
+ *
+ * @param  {string} value  The CSS value to protect.
+ * @return {object}        The protected value and the original URL tokens.
+ */
+function protectUrlTokens (value) {
+  const urlTokens = [];
+  let protectedValue = '';
+  for (const segment of splitValueSegments(value)) {
+    const isUrlToken = segment.isLiteral && startsUrlToken(segment.text, 0);
+    if (isUrlToken) {
+      protectedValue += createUrlTokenMarker(urlTokens.length);
+      urlTokens.push(segment.text);
+    } else {
+      protectedValue += segment.text;
+    }
+  }
+  return { value: protectedValue, urlTokens };
+}
+
+/**
+ * Restores the URL tokens removed by `protectUrlTokens`.
+ *
+ * @param  {string} value      The value containing URL markers.
+ * @param  {Array}  urlTokens  The original URL token text.
+ * @return {string}            The value with URL tokens restored.
+ */
+function restoreUrlTokens (value, urlTokens) {
+  let restoredValue = value;
+  for (let index = 0; index < urlTokens.length; index++) {
+    const marker = createUrlTokenMarker(index);
+    restoredValue = restoredValue.split(marker).join(urlTokens[index]);
+  }
+  return restoredValue;
+}
+
+/**
+ * Removes whitespace after protected URL tokens. A CSS URL token closes itself
+ * at `)`, so the following component remains distinguishable without a space.
+ *
+ * @param  {string} value      The protected CSS value.
+ * @param  {Array}  urlTokens  The original URL token text.
+ * @return {string}            The protected value without trailing URL spacing.
+ */
+function removeWhitespaceAfterUrlTokens (value, urlTokens) {
+  let compactValue = value;
+  for (let index = 0; index < urlTokens.length; index++) {
+    const marker = createUrlTokenMarker(index);
+    const markerIndex = compactValue.indexOf(marker);
+    if (markerIndex === -1) {
+      continue;
+    }
+    const contentStart = markerIndex + marker.length;
+    let nextContentIndex = contentStart;
+    while (' \t\n\r\f'.includes(compactValue[nextContentIndex])) {
+      nextContentIndex++;
+    }
+    compactValue = compactValue.slice(0, contentStart) + compactValue.slice(nextContentIndex);
+  }
+  return compactValue;
+}
+
+/**
+ * Removes an explicit default background position directly after a protected
+ * URL marker, where the ordinary close-parenthesis optimization cannot see it.
+ *
+ * @param  {string} value      The protected background value.
+ * @param  {Array}  urlTokens  The original URL token text.
+ * @return {string}            The value with redundant URL positions removed.
+ */
+function removeDefaultBackgroundPositionsAfterUrlTokens (value, urlTokens) {
+  let normalizedValue = value;
+  for (let index = 0; index < urlTokens.length; index++) {
+    const marker = createUrlTokenMarker(index);
+    // Match a URL marker followed by the default 0 0 background-position pair.
+    const defaultPositionPattern = new RegExp(
+      marker + '\\s*0(?:%|px)?\\s+0(?:%|px)?(?=\\s|$)',
+      'g'
+    );
+    normalizedValue = normalizedValue.replace(defaultPositionPattern, marker);
+  }
+  return normalizedValue;
+}
+
 /**
  * Rewrites every `url(...)` token in a CSS value to its shortest valid form,
  * skipping any quoted strings so an embedded `url(` inside a string is ignored.
@@ -347,6 +450,9 @@ function minifyUrls (value) {
  * @return {string}           The value with whitespace collapsed, quotes normalized, and unicode escapes resolved.
  */
 function normalizeWhitespaceAndQuotes (val, property) {
+  const protectedUrls = protectUrlTokens(val);
+  val = protectedUrls.value;
+
   // Unescape unicode (skip control characters — they must stay escaped in CSS strings).
   // Only resolve escapes when the charset is unicode-compatible (UTF-8/UTF-16 or default).
   if (isUnicodeCharset()) {
@@ -385,7 +491,8 @@ function normalizeWhitespaceAndQuotes (val, property) {
     });
   }
 
-  return val;
+  val = removeWhitespaceAfterUrlTokens(val, protectedUrls.urlTokens);
+  return restoreUrlTokens(val, protectedUrls.urlTokens);
 }
 
 /**
@@ -1135,11 +1242,12 @@ function minifyValueForOutput (declaration) {
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
  *
- * @param  {string} val       The CSS value string after generic minification.
- * @param  {string} property  The CSS property name.
- * @return {string}           The value with property-specific optimizations applied.
+ * @param  {string} val        The CSS value string after generic minification.
+ * @param  {string} property   The CSS property name.
+ * @param  {Array}  urlTokens  URL tokens currently represented by markers.
+ * @return {string}            The value with property-specific optimizations applied.
  */
-function applyPropertyOptimizations (val, property) {
+function applyPropertyOptimizations (val, property, urlTokens) {
   if (property === 'font-weight' && isUnicodeCharset()) {
     // Replace font-weight keyword "bold" with its numeric equivalent
     val = val.replace(/\bbold\b/gi, '700');
@@ -1326,7 +1434,7 @@ function applyPropertyOptimizations (val, property) {
   }
 
   if (property === 'background' && val !== 'none') {
-    const normalized = val
+    let normalized = val
       // Remove default "0 0" background-position values
       .replace(/(?:^|\s)0(?:%|px)? 0(?:%|px)?(?=\s|$)/g, ' ')
       // Remove "0 0" background-position after a close-paren (e.g. after url())
@@ -1340,6 +1448,7 @@ function applyPropertyOptimizations (val, property) {
       // Collapse whitespace to single space
       .replace(/\s+/g, ' ')
       .trim();
+    normalized = removeDefaultBackgroundPositionsAfterUrlTokens(normalized, urlTokens);
     if (normalized) {
       val = normalized;
     }
@@ -1425,11 +1534,14 @@ function computeMinifiedValue (declaration) {
     return 'none';
   }
   let val = declaration.value;
+  let protectedUrlState = null;
 
   if (typeof val === 'string') {
     val = val.trim();
     val = normalizeWhitespaceAndQuotes(val, declaration.property);
     val = minifyUrls(val);
+    protectedUrlState = protectUrlTokens(val);
+    val = protectedUrlState.value;
 
     // Instead of unconditionally removing spaces around + and - and *, handle math vs non-math
     // Collapse spaces around division operator
@@ -1482,7 +1594,11 @@ function computeMinifiedValue (declaration) {
     val = simplifyEquivalentLightDarkFunctions(val);
 
     // Property-specific optimizations
-    val = applyPropertyOptimizations(val, declaration.property);
+    val = applyPropertyOptimizations(
+      val,
+      declaration.property,
+      protectedUrlState ? protectedUrlState.urlTokens : []
+    );
 
     // Minify relative color syntax (identity resolution and whitespace collapsing)
     val = minifyRelativeColorSyntax(val);
@@ -1494,6 +1610,11 @@ function computeMinifiedValue (declaration) {
     val = minifyGradients(val);
   }
 
+  if (protectedUrlState) {
+    val = removeWhitespaceAfterUrlTokens(val, protectedUrlState.urlTokens);
+    val = restoreUrlTokens(val, protectedUrlState.urlTokens);
+  }
+
   // Unicode range optimization: dedup, merge overlapping/adjacent, wildcard compression
   if (declaration.property === 'unicode-range') {
     val = optimizeUnicodeRange(val);

package/src/value/svg-data-uri.js

@@ -0,0 +1,280 @@
+/**
+ * @file Decodes, minifies, and safely reserializes SVG data URLs.
+ */
+
+import { minifySvgMarkup } from './svg-markup.js';
+
+const SVG_MEDIA_TYPE = 'data:image/svg+xml';
+
+/**
+ * Determines whether a character is an ASCII hexadecimal digit.
+ *
+ * @param  {string}  character  The character to inspect.
+ * @return {boolean}            Whether the character is hexadecimal.
+ */
+function isHexDigit (character) {
+  return (
+    (character >= '0' && character <= '9') ||
+    (character >= 'a' && character <= 'f') ||
+    (character >= 'A' && character <= 'F')
+  );
+}
+
+/**
+ * Determines whether a character is CSS whitespace.
+ *
+ * @param  {string}  character  The character to inspect.
+ * @return {boolean}            Whether the character is whitespace.
+ */
+function isCssWhitespace (character) {
+  return ' \t\n\r\f'.includes(character);
+}
+
+/**
+ * Resolves CSS string escapes so that embedded SVG markup can be parsed.
+ *
+ * @param  {string} value  The raw CSS string content.
+ * @return {string}        The decoded string content.
+ */
+function decodeCssStringEscapes (value) {
+  let result = '';
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index];
+    if (character !== '\\' || index === value.length - 1) {
+      result += character;
+      continue;
+    }
+
+    const escapedCharacter = value[index + 1];
+    if (escapedCharacter === '\n') {
+      index++;
+      continue;
+    }
+    if (escapedCharacter === '\r') {
+      index++;
+      if (value[index + 1] === '\n') {
+        index++;
+      }
+      continue;
+    }
+    if (!isHexDigit(escapedCharacter)) {
+      result += escapedCharacter;
+      index++;
+      continue;
+    }
+
+    let escapeEnd = index + 1;
+    while (escapeEnd < value.length && escapeEnd < index + 7 && isHexDigit(value[escapeEnd])) {
+      escapeEnd++;
+    }
+    const codePoint = parseInt(value.slice(index + 1, escapeEnd), 16);
+    try {
+      result += String.fromCodePoint(codePoint);
+    } catch {
+      result += value.slice(index, escapeEnd);
+    }
+    index = escapeEnd - 1;
+    if (isCssWhitespace(value[index + 1])) {
+      index++;
+    }
+  }
+  return result;
+}
+
+/**
+ * Decodes valid percent escapes without treating a literal percent sign as an
+ * error. Malformed UTF-8 stays unmodified so the URL is left untouched.
+ *
+ * @param  {string}      value  The URI payload to decode.
+ * @return {string|null}        The decoded payload, or null when unsafe.
+ */
+function decodePercentEncodedText (value) {
+  let safelyEncodedValue = '';
+  for (let index = 0; index < value.length; index++) {
+    const isPercentEscape = (
+      value[index] === '%' &&
+      isHexDigit(value[index + 1]) &&
+      isHexDigit(value[index + 2])
+    );
+    if (value[index] === '%' && !isPercentEscape) {
+      safelyEncodedValue += '%25';
+      continue;
+    }
+    safelyEncodedValue += value[index];
+  }
+  try {
+    return decodeURIComponent(safelyEncodedValue);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Decodes base64 data to UTF-8 without depending on Node-only APIs.
+ *
+ * @param  {string}      value  The base64 data.
+ * @return {string|null}        The decoded SVG text, or null when unavailable or invalid.
+ */
+function decodeBase64Utf8 (value) {
+  if (typeof atob !== 'function' || typeof TextDecoder !== 'function') {
+    return null;
+  }
+  try {
+    const binaryText = atob(value);
+    const bytes = new Uint8Array(binaryText.length);
+    for (let index = 0; index < binaryText.length; index++) {
+      bytes[index] = binaryText.codePointAt(index);
+    }
+    return new TextDecoder().decode(bytes);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Parses the supported SVG data URL forms and chooses the output media prefix.
+ *
+ * @param  {string}      urlContent  The decoded content inside `url(...)`.
+ * @return {object|null}             The SVG markup and output prefix, or null when unsupported.
+ */
+function parseSvgDataUri (urlContent) {
+  const separatorIndex = urlContent.indexOf(',');
+  if (separatorIndex === -1) {
+    return null;
+  }
+  const header = urlContent.slice(0, separatorIndex);
+  const normalizedHeader = header.toLowerCase();
+  if (
+    !normalizedHeader.startsWith(SVG_MEDIA_TYPE) ||
+    (header.length > SVG_MEDIA_TYPE.length && header[SVG_MEDIA_TYPE.length] !== ';')
+  ) {
+    return null;
+  }
+
+  const parameterText = header.slice(SVG_MEDIA_TYPE.length);
+  const parameters = parameterText ? parameterText.slice(1).split(';') : [];
+  let usesBase64 = false;
+  let usesUtf8 = false;
+  for (const parameter of parameters) {
+    const normalizedParameter = parameter.toLowerCase();
+    if (normalizedParameter === 'base64') {
+      usesBase64 = true;
+    } else if (
+      normalizedParameter === 'utf8' ||
+      normalizedParameter === 'charset=utf-8' ||
+      normalizedParameter === 'charset=utf8'
+    ) {
+      usesUtf8 = true;
+    } else {
+      return null;
+    }
+  }
+
+  const encodedPayload = urlContent.slice(separatorIndex + 1);
+  const decodedPayload = decodePercentEncodedText(encodedPayload);
+  if (decodedPayload === null) {
+    return null;
+  }
+  const svgMarkup = usesBase64 ? decodeBase64Utf8(decodedPayload) : decodedPayload;
+  if (svgMarkup === null) {
+    return null;
+  }
+  return {
+    svgMarkup,
+    outputPrefix: SVG_MEDIA_TYPE + (usesBase64 || usesUtf8 ? ';utf8' : '')
+  };
+}
+
+/**
+ * Checks whether decoded data begins with an SVG root element, allowing an XML
+ * declaration in front of it.
+ *
+ * @param  {string}  svgMarkup  The decoded data URI payload.
+ * @return {boolean}            Whether the payload appears to be SVG markup.
+ */
+function startsWithSvgElement (svgMarkup) {
+  let index = 0;
+  while (isCssWhitespace(svgMarkup[index])) {
+    index++;
+  }
+  if (svgMarkup.startsWith('<?xml', index)) {
+    const declarationEnd = svgMarkup.indexOf('?>', index + 5);
+    if (declarationEnd === -1) {
+      return false;
+    }
+    index = declarationEnd + 2;
+    while (isCssWhitespace(svgMarkup[index])) {
+      index++;
+    }
+  }
+  const candidate = svgMarkup.slice(index, index + 4).toLowerCase();
+  const nextCharacter = svgMarkup[index + 4];
+  return candidate === '<svg' && (
+    isCssWhitespace(nextCharacter) ||
+    nextCharacter === '>' ||
+    nextCharacter === '/'
+  );
+}
+
+/**
+ * Escapes text for one CSS string delimiter.
+ *
+ * @param  {string} value           The string content.
+ * @param  {string} quoteCharacter  The surrounding CSS string delimiter.
+ * @return {string}                 The escaped CSS string content.
+ */
+function escapeCssStringContent (value, quoteCharacter) {
+  let result = '';
+  for (const character of value) {
+    if (character === '\\' || character === quoteCharacter) {
+      result += '\\' + character;
+    } else if (character === '\n') {
+      result += '\\a ';
+    } else if (character === '\r') {
+      result += '\\d ';
+    } else if (character === '\f') {
+      result += '\\c ';
+    } else {
+      result += character;
+    }
+  }
+  return result;
+}
+
+/**
+ * Chooses the CSS string wrapper that needs the fewest escaping backslashes.
+ *
+ * @param  {string} dataUri  The normalized SVG data URI.
+ * @return {string}          The URL content with surrounding quotes.
+ */
+function formatSvgDataUri (dataUri) {
+  const singleQuotedContent = escapeCssStringContent(dataUri, '\'');
+  const doubleQuotedContent = escapeCssStringContent(dataUri, '"');
+  if (singleQuotedContent.length < doubleQuotedContent.length) {
+    return '\'' + singleQuotedContent + '\'';
+  }
+  return '"' + doubleQuotedContent + '"';
+}
+
+/**
+ * Minifies an SVG data URI and returns CSS-ready URL content.
+ *
+ * @param  {string}      urlContent  The unwrapped content of a CSS `url(...)`.
+ * @return {string|null}             The formatted replacement, or null when not SVG data.
+ */
+function minifySvgDataUri (urlContent) {
+  const decodedUrlContent = decodeCssStringEscapes(urlContent);
+  const parsedDataUri = parseSvgDataUri(decodedUrlContent);
+  if (!parsedDataUri || !startsWithSvgElement(parsedDataUri.svgMarkup)) {
+    return null;
+  }
+  const minifiedSvg = minifySvgMarkup(parsedDataUri.svgMarkup);
+  if (minifiedSvg === null) {
+    return null;
+  }
+  // A literal hash starts a URL fragment, so SVG IDs and hex colors need URI encoding.
+  const encodedSvg = minifiedSvg.split('#').join('%23');
+  return formatSvgDataUri(parsedDataUri.outputPrefix + ',' + encodedSvg);
+}
+
+export { minifySvgDataUri };

package/src/value/svg-markup.js

@@ -0,0 +1,557 @@
+/**
+ * @file Safely minifies the SVG markup carried by UTF-8 data URLs.
+ */
+
+import {
+  namedColors,
+  parseColor,
+  rgbaToHex
+} from './colors.js';
+
+const COLOR_ATTRIBUTE_NAMES = new Set([
+  'color',
+  'fill',
+  'flood-color',
+  'lighting-color',
+  'solid-color',
+  'stop-color',
+  'stroke'
+]);
+
+const SELF_CLOSING_SVG_ELEMENTS = new Set([
+  'animate',
+  'animatemotion',
+  'animatetransform',
+  'circle',
+  'ellipse',
+  'image',
+  'line',
+  'path',
+  'polygon',
+  'polyline',
+  'rect',
+  'set',
+  'stop',
+  'use'
+]);
+
+const TEXT_WHITESPACE_ELEMENTS = new Set([
+  'desc',
+  'foreignobject',
+  'metadata',
+  'script',
+  'style',
+  'text',
+  'textpath',
+  'title',
+  'tspan'
+]);
+
+/**
+ * Determines whether a character is CSS or XML whitespace.
+ *
+ * @param  {string}  character  The character to inspect.
+ * @return {boolean}            Whether the character is whitespace.
+ */
+function isWhitespace (character) {
+  return ' \t\n\r\f'.includes(character);
+}
+
+/**
+ * Determines whether a character may occur in an XML element or attribute name.
+ *
+ * @param  {string}  character  The character to inspect.
+ * @return {boolean}            Whether the character is a supported XML name character.
+ */
+function isXmlNameCharacter (character) {
+  return (
+    (character >= 'a' && character <= 'z') ||
+    (character >= 'A' && character <= 'Z') ||
+    (character >= '0' && character <= '9') ||
+    '_:-.'.includes(character)
+  );
+}
+
+/**
+ * Reads an XML name beginning at an index.
+ *
+ * @param  {string} text   The SVG markup being read.
+ * @param  {number} index  The index where the name starts.
+ * @return {object}        The name and the index immediately after it.
+ */
+function readXmlName (text, index) {
+  const startIndex = index;
+  while (index < text.length && isXmlNameCharacter(text[index])) {
+    index++;
+  }
+  return {
+    name: text.slice(startIndex, index),
+    nextIndex: index
+  };
+}
+
+/**
+ * Converts a full hex color to its short notation when each channel pair matches.
+ *
+ * @param  {string} hexColor  A CSS hex color beginning with `#`.
+ * @return {string}           The shortest equivalent hex color.
+ */
+function shortenHexColor (hexColor) {
+  const digits = hexColor.slice(1);
+  if (digits.length !== 6 && digits.length !== 8) {
+    return hexColor;
+  }
+  let shortenedDigits = '';
+  for (let index = 0; index < digits.length; index += 2) {
+    if (digits[index] !== digits[index + 1]) {
+      return hexColor;
+    }
+    shortenedDigits += digits[index];
+  }
+  return '#' + shortenedDigits;
+}
+
+/**
+ * Chooses the shortest data-URL-safe spelling of a parsed SVG color.
+ *
+ * @param  {Array}  color  The parsed [red, green, blue, alpha] channels.
+ * @return {string}        The shortest encoded hex or named color spelling.
+ */
+function formatSvgColor (color) {
+  const hexColor = shortenHexColor(rgbaToHex(color[0], color[1], color[2], color[3]));
+  let shortest = '%23' + hexColor.slice(1);
+  const isOpaque = Math.round(color[3] * 255) === 255;
+  if (!isOpaque) {
+    return shortest;
+  }
+
+  for (const [name, channels] of Object.entries(namedColors)) {
+    const channelsMatch = (
+      channels[0] === color[0] &&
+      channels[1] === color[1] &&
+      channels[2] === color[2]
+    );
+    if (channelsMatch && name.length < shortest.length) {
+      shortest = name;
+    }
+  }
+  return shortest;
+}
+
+/**
+ * Reads past one CSS escape sequence. A non-hex escape consumes its following
+ * character, which keeps an escaped comma, quote, or parenthesis from being
+ * interpreted as font-family syntax.
+ *
+ * @param  {string} value  The CSS value containing the escape.
+ * @param  {number} index  The index of the escape's backslash.
+ * @return {number}        The index immediately after the escape.
+ */
+function skipCssEscape (value, index) {
+  return Math.min(index + 2, value.length);
+}
+
+/**
+ * Reads past a CSS string, preserving escaped delimiters within it.
+ *
+ * @param  {string} value  The CSS value containing the string.
+ * @param  {number} index  The index of the opening quote.
+ * @return {number}        The index immediately after the string, or the end.
+ */
+function skipCssString (value, index) {
+  const quoteCharacter = value[index];
+  index++;
+  while (index < value.length) {
+    if (value[index] === '\\') {
+      index = skipCssEscape(value, index);
+      continue;
+    }
+    if (value[index] === quoteCharacter) {
+      return index + 1;
+    }
+    index++;
+  }
+  return index;
+}
+
+/**
+ * Reads past a CSS comment so punctuation in comment text does not affect
+ * font-family list parsing.
+ *
+ * @param  {string} value  The CSS value containing the comment.
+ * @param  {number} index  The index of the comment's opening slash.
+ * @return {number}        The index immediately after the comment, or the end.
+ */
+function skipCssComment (value, index) {
+  const commentEndIndex = value.indexOf('*/', index + 2);
+  if (commentEndIndex === -1) {
+    return value.length;
+  }
+  return commentEndIndex + 2;
+}
+
+/**
+ * Removes CSS whitespace after top-level font-family separators. Quotes,
+ * escapes, comments, and function arguments are kept opaque so that commas
+ * belonging to a family name or a substituted value are not altered.
+ *
+ * @param  {string} attributeValue  The unquoted SVG font-family value.
+ * @return {string}                 The compacted font-family value.
+ */
+function minifySvgFontFamilyValue (attributeValue) {
+  // XML entities are resolved before this presentation attribute is parsed as
+  // CSS, so an encoded quote could otherwise be mistaken for ordinary text.
+  if (attributeValue.includes('&')) {
+    return attributeValue;
+  }
+
+  let minifiedValue = '';
+  let index = 0;
+  let parenthesisDepth = 0;
+  while (index < attributeValue.length) {
+    const character = attributeValue[index];
+    if (character === '\\') {
+      const escapeEndIndex = skipCssEscape(attributeValue, index);
+      minifiedValue += attributeValue.slice(index, escapeEndIndex);
+      index = escapeEndIndex;
+      continue;
+    }
+    if (character === '"' || character === '\'') {
+      const stringEndIndex = skipCssString(attributeValue, index);
+      minifiedValue += attributeValue.slice(index, stringEndIndex);
+      index = stringEndIndex;
+      continue;
+    }
+    if (character === '/' && attributeValue[index + 1] === '*') {
+      const commentEndIndex = skipCssComment(attributeValue, index);
+      minifiedValue += attributeValue.slice(index, commentEndIndex);
+      index = commentEndIndex;
+      continue;
+    }
+    if (character === '(') {
+      parenthesisDepth++;
+    } else if (character === ')' && parenthesisDepth > 0) {
+      parenthesisDepth--;
+    } else if (character === ',' && parenthesisDepth === 0) {
+      minifiedValue += character;
+      index++;
+      while (isWhitespace(attributeValue[index])) {
+        index++;
+      }
+      continue;
+    }
+    minifiedValue += character;
+    index++;
+  }
+  return minifiedValue;
+}
+
+/**
+ * Minifies supported SVG presentation attribute values when their syntax is
+ * safe to rewrite.
+ *
+ * @param  {string} attributeName   The attribute name.
+ * @param  {string} attributeValue  The attribute value without its quotes.
+ * @return {string}                 The minified value, or the original value.
+ */
+function minifySvgAttributeValue (attributeName, attributeValue) {
+  const normalizedAttributeName = attributeName.toLowerCase();
+  if (normalizedAttributeName === 'font-family') {
+    return minifySvgFontFamilyValue(attributeValue);
+  }
+  if (!COLOR_ATTRIBUTE_NAMES.has(normalizedAttributeName)) {
+    return attributeValue;
+  }
+  const color = parseColor(attributeValue);
+  if (!color) {
+    return attributeValue;
+  }
+  return formatSvgColor(color);
+}
+
+/**
+ * Finds the closing angle bracket of an XML tag without treating a quoted
+ * attribute value as markup.
+ *
+ * @param  {string} text        The SVG markup being read.
+ * @param  {number} startIndex  The index of the opening `<`.
+ * @return {number}             The closing `>` index, or -1 when unterminated.
+ */
+function findSvgTagEnd (text, startIndex) {
+  let quoteCharacter = '';
+  for (let index = startIndex + 1; index < text.length; index++) {
+    const character = text[index];
+    if (quoteCharacter) {
+      if (character === quoteCharacter) {
+        quoteCharacter = '';
+      }
+      continue;
+    }
+    if (character === '"' || character === '\'') {
+      quoteCharacter = character;
+      continue;
+    }
+    if (character === '>') {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Parses and minifies an SVG start or end tag while preserving all attribute
+ * values except static color values.
+ *
+ * @param  {string}      rawTag  The complete source tag, including angle brackets.
+ * @return {object|null}         A normalized token, or null when unsupported.
+ */
+function minifySvgTag (rawTag) {
+  let index = 1;
+  if (rawTag[index] === '/') {
+    index++;
+    while (isWhitespace(rawTag[index])) {
+      index++;
+    }
+    const nameResult = readXmlName(rawTag, index);
+    if (!nameResult.name) {
+      return null;
+    }
+    index = nameResult.nextIndex;
+    while (isWhitespace(rawTag[index])) {
+      index++;
+    }
+    if (rawTag[index] !== '>') {
+      return null;
+    }
+    return {
+      type: 'end',
+      name: nameResult.name.toLowerCase(),
+      value: '</' + nameResult.name + '>'
+    };
+  }
+
+  while (isWhitespace(rawTag[index])) {
+    index++;
+  }
+  const nameResult = readXmlName(rawTag, index);
+  if (!nameResult.name) {
+    return null;
+  }
+  index = nameResult.nextIndex;
+  const attributes = [];
+  let selfClosing = false;
+
+  while (index < rawTag.length) {
+    while (isWhitespace(rawTag[index])) {
+      index++;
+    }
+    if (rawTag[index] === '>') {
+      break;
+    }
+    if (rawTag[index] === '/' && rawTag[index + 1] === '>') {
+      selfClosing = true;
+      break;
+    }
+
+    const attributeResult = readXmlName(rawTag, index);
+    if (!attributeResult.name) {
+      return null;
+    }
+    index = attributeResult.nextIndex;
+    while (isWhitespace(rawTag[index])) {
+      index++;
+    }
+
+    let attribute = attributeResult.name;
+    if (rawTag[index] === '=') {
+      index++;
+      while (isWhitespace(rawTag[index])) {
+        index++;
+      }
+      const quoteCharacter = rawTag[index];
+      if (quoteCharacter === '"' || quoteCharacter === '\'') {
+        const valueStart = index + 1;
+        index = valueStart;
+        while (index < rawTag.length && rawTag[index] !== quoteCharacter) {
+          index++;
+        }
+        if (index >= rawTag.length) {
+          return null;
+        }
+        const attributeValue = rawTag.slice(valueStart, index);
+        index++;
+        attribute += '=' + quoteCharacter +
+          minifySvgAttributeValue(attributeResult.name, attributeValue) +
+          quoteCharacter;
+      } else {
+        const valueStart = index;
+        while (index < rawTag.length && !isWhitespace(rawTag[index]) && rawTag[index] !== '>') {
+          index++;
+        }
+        const attributeValue = rawTag.slice(valueStart, index);
+        attribute += '=' + minifySvgAttributeValue(attributeResult.name, attributeValue);
+      }
+    }
+    attributes.push(attribute);
+  }
+
+  return {
+    type: 'start',
+    name: nameResult.name.toLowerCase(),
+    selfClosing,
+    value: '<' + nameResult.name + (attributes.length ? ' ' + attributes.join(' ') : '') + (selfClosing ? '/>' : '>')
+  };
+}
+
+/**
+ * Turns SVG markup into tag and text tokens while preserving opaque XML
+ * constructs that could carry script or declaration content.
+ *
+ * @param  {string}     svgMarkup  The decoded SVG markup.
+ * @return {Array|null}            The tokens, or null when markup cannot be safely read.
+ */
+function tokenizeSvgMarkup (svgMarkup) {
+  const tokens = [];
+  let index = 0;
+  while (index < svgMarkup.length) {
+    const tagStartIndex = svgMarkup.indexOf('<', index);
+    if (tagStartIndex === -1) {
+      tokens.push({ type: 'text', value: svgMarkup.slice(index) });
+      break;
+    }
+    if (tagStartIndex > index) {
+      tokens.push({ type: 'text', value: svgMarkup.slice(index, tagStartIndex) });
+    }
+    if (svgMarkup.startsWith('<!--', tagStartIndex)) {
+      const commentEndIndex = svgMarkup.indexOf('-->', tagStartIndex + 4);
+      if (commentEndIndex === -1) {
+        return null;
+      }
+      tokens.push({ type: 'other', value: svgMarkup.slice(tagStartIndex, commentEndIndex + 3) });
+      index = commentEndIndex + 3;
+      continue;
+    }
+    if (svgMarkup.startsWith('<![CDATA[', tagStartIndex)) {
+      const cdataEndIndex = svgMarkup.indexOf(']]>', tagStartIndex + 9);
+      if (cdataEndIndex === -1) {
+        return null;
+      }
+      tokens.push({ type: 'text', value: svgMarkup.slice(tagStartIndex, cdataEndIndex + 3) });
+      index = cdataEndIndex + 3;
+      continue;
+    }
+    if (svgMarkup.startsWith('<!', tagStartIndex)) {
+      return null;
+    }
+
+    const tagEndIndex = findSvgTagEnd(svgMarkup, tagStartIndex);
+    if (tagEndIndex === -1) {
+      return null;
+    }
+    const rawTag = svgMarkup.slice(tagStartIndex, tagEndIndex + 1);
+    if (rawTag.startsWith('<?')) {
+      tokens.push({ type: 'other', value: rawTag });
+    } else {
+      const tag = minifySvgTag(rawTag);
+      if (!tag) {
+        return null;
+      }
+      tokens.push(tag);
+    }
+    index = tagEndIndex + 1;
+  }
+  return tokens;
+}
+
+/**
+ * Determines whether a text token contains no non-whitespace content.
+ *
+ * @param  {string}  text  The text to inspect.
+ * @return {boolean}       Whether the text contains only whitespace.
+ */
+function hasOnlyWhitespace (text) {
+  for (const character of text) {
+    if (!isWhitespace(character)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Drops formatting whitespace outside SVG elements whose text content matters.
+ *
+ * @param  {Array} tokens  The SVG tokens in source order.
+ * @return {Array}         Tokens with insignificant text whitespace removed.
+ */
+function dropInsignificantWhitespace (tokens) {
+  const result = [];
+  const openElements = [];
+  for (const token of tokens) {
+    const currentElement = openElements[openElements.length - 1];
+    const preservesWhitespace = TEXT_WHITESPACE_ELEMENTS.has(currentElement);
+    if (token.type !== 'text' || !hasOnlyWhitespace(token.value) || preservesWhitespace) {
+      result.push(token);
+    }
+    if (token.type === 'start' && !token.selfClosing) {
+      openElements.push(token.name);
+    }
+    if (token.type === 'end' && openElements[openElements.length - 1] === token.name) {
+      openElements.pop();
+    }
+  }
+  return result;
+}
+
+/**
+ * Rewrites supported SVG elements with no content into their XML self-closing form.
+ *
+ * @param  {Array} tokens  The compact SVG tokens.
+ * @return {Array}         The compact tokens with empty elements collapsed.
+ */
+function collapseEmptySvgElements (tokens) {
+  const result = [];
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    const nextToken = tokens[index + 1];
+    const canCollapse = (
+      token.type === 'start' &&
+      !token.selfClosing &&
+      SELF_CLOSING_SVG_ELEMENTS.has(token.name) &&
+      nextToken?.type === 'end' &&
+      nextToken.name === token.name
+    );
+    if (canCollapse) {
+      result.push({
+        ...token,
+        selfClosing: true,
+        value: token.value.slice(0, -1) + '/>'
+      });
+      index++;
+      continue;
+    }
+    result.push(token);
+  }
+  return result;
+}
+
+/**
+ * Minifies SVG markup while leaving unrecognized XML constructs untouched.
+ *
+ * @param  {string}      svgMarkup  The decoded SVG data.
+ * @return {string|null}            The minified SVG, or null when it is unsafe to rewrite.
+ */
+function minifySvgMarkup (svgMarkup) {
+  const tokens = tokenizeSvgMarkup(svgMarkup);
+  if (!tokens) {
+    return null;
+  }
+  const compactTokens = collapseEmptySvgElements(dropInsignificantWhitespace(tokens));
+  let result = '';
+  for (const token of compactTokens) {
+    result += token.value;
+  }
+  return result;
+}
+
+export { minifySvgMarkup };