@thejaredwilcurt/csslop 0.0.43 → 0.0.45

package/src/value/minify.js

@@ -22,6 +22,7 @@ import {
   rgbaToHex,
   shortestColor
 } from './colors.js';
+import { minifyFontShorthand } from './font.js';
 import { minifyGradients } from './gradients.js';
 import { simplifyEquivalentLightDarkFunctions } from './light-dark.js';
 import {
@@ -44,7 +45,11 @@ import {
   parseAngleToDegrees,
   roundCompactNumber
 } from './shared.js';
-import { elideRedundantSeparators } from './tokens.js';
+import { minifySvgDataUri } from './svg-data-uri.js';
+import {
+  elideRedundantSeparators,
+  shortenDimensionNumbers
+} from './tokens.js';
 import { minifyTransformValue } from './transforms.js';
 import { optimizeUnicodeRange } from './unicode-range.js';
 
@@ -274,12 +279,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 +454,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()) {
@@ -374,7 +484,7 @@ function normalizeWhitespaceAndQuotes (val, property) {
   });
 
   // Strip quotes from simple strings (like "Custom", "image.png"), but not for content where quoted strings are semantically distinct
-  if (property !== 'content' && property !== 'font-feature-settings' && property !== 'font-variation-settings') {
+  if (property !== 'content' && property !== 'font' && property !== 'font-feature-settings' && property !== 'font-variation-settings') {
     // Match a boundary (start, whitespace, comma, open-paren), then a quoted simple value (alphanumeric, dots, slashes, hyphens), then a boundary lookahead
     val = val.replace(/(^|\s|,|\()("|')([a-zA-Z0-9_./-]+)\2(?=\s|,|$|\)|!)/g, (match, before, quote, inner) => {
       // Keep quotes around CSS generic font-family keywords — unquoted they mean something different
@@ -385,7 +495,8 @@ function normalizeWhitespaceAndQuotes (val, property) {
     });
   }
 
-  return val;
+  val = removeWhitespaceAfterUrlTokens(val, protectedUrls.urlTokens);
+  return restoreUrlTokens(val, protectedUrls.urlTokens);
 }
 
 /**
@@ -881,6 +992,11 @@ const LENGTHY_INITIAL_KEYWORDS = new Map([
   ['background-clip', 'border-box'],
   ['background-origin', 'padding-box'],
   ['border-collapse', 'separate'],
+  ['border-color', 'currentcolor'],
+  ['border-top-color', 'currentcolor'],
+  ['border-right-color', 'currentcolor'],
+  ['border-bottom-color', 'currentcolor'],
+  ['border-left-color', 'currentcolor'],
   ['box-sizing', 'content-box'],
   ['mask-clip', 'border-box'],
   ['mask-origin', 'border-box'],
@@ -1008,7 +1124,7 @@ const BORDER_STYLE_KEYWORD_SOURCE = 'solid|dashed|dotted|double|groove|ridge|ins
  *
  * @type {string}
  */
-const BORDER_WIDTH_SOURCE = 'thin|medium|thick|[+-]?(?:\\d+|\\d*\\.\\d+)[a-z]*|(?:calc|min|max|clamp)\\([^()]*\\)';
+const BORDER_WIDTH_SOURCE = 'thin|medium|thick|[+-]?(?:\\d+|\\d*\\.\\d+)(?:e[+-]?\\d+)?[a-z]*|(?:calc|min|max|clamp)\\([^()]*\\)';
 
 /**
  * Matches a `border` value that states its line style in front of its line
@@ -1135,11 +1251,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');
@@ -1300,10 +1417,12 @@ function applyPropertyOptimizations (val, property) {
     return rgbaToHex(r, r, r, parseAlphaString(alphaStr));
   });
 
-  // Shorten all color tokens (second pass after property-specific color evaluations)
-  val = replaceOutsideStringsAndUrls(val, (segment) => {
-    return shortenColorValues(segment);
-  });
+  // Font families may contain color names, but never color values.
+  if (property !== 'font' && property !== 'font-family') {
+    val = replaceOutsideStringsAndUrls(val, (segment) => {
+      return shortenColorValues(segment);
+    });
+  }
 
   if (!PUNCTUATED_COMPONENT_PROPERTIES.has(property)) {
     // Restore space after close-paren when followed by an alphanumeric, hash, or hyphen
@@ -1312,21 +1431,11 @@ function applyPropertyOptimizations (val, property) {
   val = restoreSpaceBeforeMathOperators(val);
 
   if (property === 'font') {
-    // Split font shorthand on whitespace
-    const parts = val.split(/\s+/);
-    // Find the font-size part: contains a digit and a recognized CSS length/percentage unit
-    const sizeIndex = parts.findIndex((part) => {
-      return /\d/.test(part) && /(?:px|em|rem|%|pt|pc|vw|vh|vmin|vmax|ch|ex|cm|mm|in|lh|rlh)/i.test(part);
-    });
-    if (sizeIndex > 0) {
-      val = [...parts.slice(0, sizeIndex).filter((part) => {
-        return part !== 'normal' && part !== '400';
-      }), ...parts.slice(sizeIndex)].join(' ');
-    }
+    val = minifyFontShorthand(val);
   }
 
   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 +1449,7 @@ function applyPropertyOptimizations (val, property) {
       // Collapse whitespace to single space
       .replace(/\s+/g, ' ')
       .trim();
+    normalized = removeDefaultBackgroundPositionsAfterUrlTokens(normalized, urlTokens);
     if (normalized) {
       val = normalized;
     }
@@ -1425,11 +1535,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
@@ -1465,24 +1578,32 @@ function computeMinifiedValue (declaration) {
     // character budget a number is written within
     if (/^[+-]?(?:\d+|\d*\.\d+)([a-z%]+)?$/i.test(val)) {
       const [, rawNumber, rawUnit = ''] = val.match(/^([+-]?(?:\d+|\d*\.\d+))([a-z%]+)?$/i);
-      val = formatResolvedNumber(rawNumber) + rawUnit;
+      const scientificValue = isCustomProperty(declaration.property) ? val : shortenDimensionNumbers(val);
+      const roundedNumber = formatResolvedNumber(rawNumber);
+      const losesPrecision = Number(roundedNumber) !== Number(rawNumber);
+      // Preserve tiny dimensions whose significant digits would otherwise be
+      // rounded away before their shorter exponent form can be considered.
+      val = losesPrecision && scientificValue !== val ? scientificValue : roundedNumber + rawUnit;
     }
 
     val = lowercaseHexColors(val);
 
-    // Convert color functions to hex equivalents
-    val = convertColorsToHex(val);
-
-    // Shorten all color tokens (hex and named) to their shortest representation
-    val = replaceOutsideStringsAndUrls(val, (segment) => {
-      return shortenColorValues(segment);
-    });
+    if (declaration.property !== 'font' && declaration.property !== 'font-family') {
+      val = convertColorsToHex(val);
+      val = replaceOutsideStringsAndUrls(val, (segment) => {
+        return shortenColorValues(segment);
+      });
+    }
 
     // Collapse light-dark() when both normalized branches are identical
     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 +1615,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);
@@ -1506,6 +1632,7 @@ function computeMinifiedValue (declaration) {
     !isCustomProperty(declaration.property)
   );
   if (elidesRedundantSeparators) {
+    val = shortenDimensionNumbers(val);
     // A property that punctuates its own components already had the whitespace
     // after its closing parentheses taken out, and only the separators its
     // grammar still needs put back, so those are the ones left alone here.

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 };