@thejaredwilcurt/csslop 0.0.48 → 0.0.50

package/src/value/segments.js

@@ -0,0 +1,74 @@
+/**
+ * @file Splits a CSS value into the literal segments that hold data, quoted strings and `url()` tokens, and the syntax between them, so rewrites only ever reach the syntax.
+ */
+
+import {
+  skipParenthesizedGroup,
+  skipQuotedString,
+  startsUrlToken
+} from '../parser/source-search.js';
+
+/**
+ * @typedef  {object}  ValueSegment
+ * @property {string}  text          The segment's slice of the value.
+ * @property {boolean} isLiteral     Whether the segment is a quoted string or a url() token.
+ */
+
+/**
+ * Splits a CSS value into literal and syntax segments. A quoted string and a
+ * `url()` token are literals: they hold data rather than CSS syntax, so no pass
+ * may rewrite what is inside them. Everything between the literals is syntax.
+ *
+ * @param  {string} value  The full CSS value string.
+ * @return {Array}         The value's segments, in order.
+ */
+function splitValueSegments (value) {
+  const segments = [];
+  let index = 0;
+
+  while (index < value.length) {
+    if (value[index] === '"' || value[index] === '\'') {
+      const end = skipQuotedString(value, index);
+      segments.push({ text: value.slice(index, end), isLiteral: true });
+      index = end;
+      continue;
+    }
+
+    if (startsUrlToken(value, index)) {
+      // The `url(` token opens its parenthesized group at its fourth character
+      const end = skipParenthesizedGroup(value, index + 3);
+      segments.push({ text: value.slice(index, end), isLiteral: true });
+      index = end;
+      continue;
+    }
+
+    const start = index;
+    while (index < value.length && value[index] !== '"' && value[index] !== '\'' && !startsUrlToken(value, index)) {
+      index++;
+    }
+    segments.push({ text: value.slice(start, index), isLiteral: false });
+  }
+
+  return segments;
+}
+
+/**
+ * Applies a replacer function only to segments of a CSS value that are outside quoted strings and url() functions, preserving those literal segments unchanged.
+ *
+ * @param  {string}                   value     The full CSS value string.
+ * @param  {function(string): string} replacer  A function called with each non-string, non-url segment, returning the replacement string.
+ * @return {string}                             The value with the replacer applied to all eligible segments.
+ */
+function replaceOutsideStringsAndUrls (value, replacer) {
+  return splitValueSegments(value).map((segment) => {
+    if (segment.isLiteral) {
+      return segment.text;
+    }
+    return replacer(segment.text);
+  }).join('');
+}
+
+export {
+  replaceOutsideStringsAndUrls,
+  splitValueSegments
+};

package/src/value/{svg-data-uri.js → svg/data-uri.js}

@@ -2,7 +2,7 @@
  * @file Decodes, minifies, and safely reserializes SVG data URLs.
  */
 
-import { minifySvgMarkup } from './svg-markup.js';
+import { minifySvgMarkup } from './markup.js';
 
 const SVG_MEDIA_TYPE = 'data:image/svg+xml';
 

package/src/value/{svg-markup.js → svg/markup.js}

@@ -6,7 +6,7 @@ import {
   namedColors,
   parseColor,
   rgbaToHex
-} from './colors.js';
+} from '../color/conversion.js';
 
 const COLOR_ATTRIBUTE_NAMES = new Set([
   'color',

package/src/value/time.js

@@ -0,0 +1,75 @@
+/**
+ * @file Rewrites CSS times in whichever of seconds or milliseconds spells them shortest.
+ */
+
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+
+import {
+  formatShortestNumber,
+  parseNumericParts,
+  scaleByPowerOfTen,
+  shortenNumericText
+} from './numbers.js';
+
+/**
+ * The power of ten that separates a time in seconds from the same time in
+ * milliseconds, keyed by the lowercased time unit.
+ *
+ * @type {{[unit: string]: number}}
+ */
+const TIME_UNIT_POWERS = {
+  s: 0,
+  ms: -3
+};
+
+/**
+ * Rewrites one time token in whichever of seconds or milliseconds spells it
+ * shortest, scientific notation included. Every conversion moves the exponent
+ * of the exact digits, so no precision is lost however large the time is.
+ * Seconds win a tie, and a zero time becomes `0s`.
+ *
+ * @param  {string} text  The text of a dimension token.
+ * @return {string}       The shortest spelling of the same time.
+ */
+function shortenTimeToken (text) {
+  const parts = parseNumericParts(text);
+  const writtenUnit = parts?.unit.toLowerCase();
+  if (!parts || !(writtenUnit in TIME_UNIT_POWERS)) {
+    return text;
+  }
+  if (!parts.digits) {
+    return '0s';
+  }
+  const writtenSpelling = shortenNumericText(text, true);
+  const secondsSpelling = formatShortestNumber(
+    scaleByPowerOfTen(parts, TIME_UNIT_POWERS[writtenUnit], 's'),
+    true
+  );
+  const millisecondsSpelling = formatShortestNumber(
+    scaleByPowerOfTen(parts, TIME_UNIT_POWERS[writtenUnit] - TIME_UNIT_POWERS.ms, 'ms'),
+    true
+  );
+  // Seconds are the conventional unit, so they win a tie with milliseconds
+  const convertedSpelling = millisecondsSpelling.length < secondsSpelling.length ? millisecondsSpelling : secondsSpelling;
+  return convertedSpelling.length <= writtenSpelling.length ? convertedSpelling : writtenSpelling;
+}
+
+/**
+ * Converts each time in a value between seconds and milliseconds, whichever
+ * is the shorter string.
+ *
+ * @param  {string} value  The CSS value string potentially containing time values.
+ * @return {string}        The value with each time in its shortest unit.
+ */
+function convertTimesToShortestUnit (value) {
+  return tokenizeCssValue(value).map((token) => {
+    if (token.type !== 'dimension') {
+      return token.text;
+    }
+    return shortenTimeToken(token.text);
+  }).join('');
+}
+
+export {
+  convertTimesToShortestUnit
+};

package/src/value/urls.js

@@ -0,0 +1,242 @@
+/**
+ * @file Minifies `url()` tokens, and temporarily replaces them with markers so generic value rewrites cannot alter the data a URL carries.
+ */
+
+import {
+  findMatchingParenthesis,
+  startsUrlToken
+} from '../parser/source-search.js';
+
+import { splitValueSegments } from './segments.js';
+import { minifySvgDataUri } from './svg/data-uri.js';
+
+/**
+ * Escapes the characters an unquoted url() token cannot hold, so the path can
+ * drop its quotes. A backslash already escaping a character is left alone, so
+ * a path that arrived escaped is never escaped a second time.
+ *
+ * @param  {string} path  The url path, without surrounding quotes.
+ * @return {string}       The path with every bare space and parenthesis escaped.
+ */
+function escapeUrlPathCharacters (path) {
+  // Match each space and parenthesis that no escaping backslash precedes
+  return path.replace(/(?<!\\)([ ()])/g, '\\$1');
+}
+
+/**
+ * Chooses the shortest valid representation for the path inside a `url(...)`
+ * token, weighing an unquoted form — its spaces and parentheses escaped —
+ * against a quoted form. Quotation marks can only ever appear in the quoted
+ * form, so a path holding one always keeps its wrapper.
+ *
+ * @param  {string} path  The resolved url path, without surrounding quotes.
+ * @return {string}       The shortest valid url() content string.
+ */
+function formatUrlPath (path) {
+  // Escape any embedded double quotes so the double-quoted wrapper stays valid
+  const quotedForm = '"' + path.replace(/"/g, '\\"') + '"';
+  // Match a quotation mark, which an unquoted url() token cannot hold
+  if (/["']/.test(path)) {
+    return quotedForm;
+  }
+  const unquotedForm = escapeUrlPathCharacters(path);
+  // Each escaped character costs one backslash, so dropping the two quotation
+  // marks pays off whenever at most one character needs escaping
+  if (unquotedForm.length < quotedForm.length) {
+    return unquotedForm;
+  }
+  return quotedForm;
+}
+
+/**
+ * Produces the shortest valid contents for a single `url(...)` token from the
+ * raw text between its parentheses, stripping a leading current-directory
+ * indicator and normalizing quoting.
+ *
+ * @param  {string} rawContent  The trimmed text found between the url parentheses.
+ * @return {string}             The minified url() content.
+ */
+function minifyUrlContent (rawContent) {
+  const wasQuoted = rawContent.startsWith('"') || rawContent.startsWith('\'');
+  let path = rawContent;
+  if (wasQuoted) {
+    const quote = rawContent[0];
+    if (rawContent.length >= 2 && rawContent.endsWith(quote)) {
+      path = rawContent.slice(1, -1);
+    }
+  }
+
+  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.
+ *
+ * @param  {string} value  The CSS value string potentially containing url() tokens.
+ * @return {string}        The value with all url() tokens minified.
+ */
+function minifyUrls (value) {
+  let result = '';
+  let index = 0;
+
+  const consumeQuoted = (start) => {
+    const quote = value[start];
+    let end = start + 1;
+    while (end < value.length) {
+      if (value[end] === '\\') {
+        end += 2;
+        continue;
+      }
+      if (value[end] === quote) {
+        end++;
+        break;
+      }
+      end++;
+    }
+    return end;
+  };
+
+  const startsUrl = (start) => {
+    return value.slice(start, start + 4).toLowerCase() === 'url(';
+  };
+
+  while (index < value.length) {
+    if (value[index] === '"' || value[index] === '\'') {
+      const end = consumeQuoted(index);
+      result += value.slice(index, end);
+      index = end;
+      continue;
+    }
+
+    if (startsUrl(index)) {
+      const closingParenIndex = findMatchingParenthesis(value, index + 3);
+      if (closingParenIndex === -1) {
+        result += value.slice(index);
+        break;
+      }
+      const inner = value.slice(index + 4, closingParenIndex).trim();
+      result += 'url(' + minifyUrlContent(inner) + ')';
+      index = closingParenIndex + 1;
+      continue;
+    }
+
+    result += value[index];
+    index++;
+  }
+
+  return result;
+}
+
+export {
+  minifyUrls,
+  protectUrlTokens,
+  removeDefaultBackgroundPositionsAfterUrlTokens,
+  removeWhitespaceAfterUrlTokens,
+  restoreUrlTokens
+};

package/src/value/whitespace.js

@@ -0,0 +1,88 @@
+/**
+ * @file Normalizes the whitespace, quotes, and Unicode escapes of a CSS value, and restores the whitespace its math operators cannot do without.
+ */
+
+import { isUnicodeCharset } from '../context.js';
+import { resolveUnicodeEscape } from '../utilities.js';
+
+import { replaceOutsideStringsAndUrls } from './segments.js';
+import {
+  protectUrlTokens,
+  removeWhitespaceAfterUrlTokens,
+  restoreUrlTokens
+} from './urls.js';
+
+/**
+ * Restores the whitespace that a math function requires before a `+` or a `-`
+ * operator. Both operators have to be surrounded by whitespace to be read as
+ * operators rather than as the sign of the term that follows, and the
+ * whitespace before one that trails a closing parenthesis is removed together
+ * with the rest of the parenthesis padding.
+ *
+ * @param  {string} value  The CSS value string with parenthesis padding removed.
+ * @return {string}        The value with the operator separator restored.
+ */
+function restoreSpaceBeforeMathOperators (value) {
+  return replaceOutsideStringsAndUrls(value, (segment) => {
+    // Match a closing parenthesis immediately followed by a `+` or `-` operator
+    return segment.replace(/\)(?=[+-])/g, ') ');
+  });
+}
+
+/**
+ * Normalizes whitespace, quotes, and unicode escapes in a CSS value string.
+ *
+ * @param  {string} value     The raw CSS value string to normalize.
+ * @param  {string} property  The CSS property name, used for context-aware quote handling.
+ * @return {string}           The value with whitespace collapsed, quotes normalized, and unicode escapes resolved.
+ */
+function normalizeWhitespaceAndQuotes (value, property) {
+  const protectedUrls = protectUrlTokens(value);
+  value = 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()) {
+    value = value.replace(/\\([0-9a-fA-F]{1,6})\s?/g, (match, hex) => {
+      return resolveUnicodeEscape(hex) ?? match;
+    });
+  }
+  // Normalize single-quoted strings to double-quoted
+  value = value.replace(/'((?:[^'\\]|\\.)*?)'/g, '"$1"');
+
+  // Remove space between string literals
+  value = value.replace(/("(?:[^"\\]|\\.)*")\s+(?=")/g, '$1');
+
+  // Whitespace minification
+  value = value.replace(/\s*!\s*important/i, '!important');
+  // value = value.replace(/\s*([+*/=])\s*/g, '$1');
+  // Strip whitespace around commas
+  value = value.replace(/\s*([,])\s*/g, '$1');
+  // Match quoted strings (to skip them) or parentheses with surrounding whitespace (to strip whitespace)
+  value = value.replace(/("[^"]*"|'[^']*')|\s*([()])\s*/g, (match, quotedString, parenthesis) => {
+    if (quotedString) {
+      return quotedString;
+    }
+    return parenthesis;
+  });
+
+  // Strip quotes from simple strings (like "Custom", "image.png"), but not for content where quoted strings are semantically distinct
+  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
+    value = value.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
+      if (property === 'font-family' && /^(?:serif|sans-serif|monospace|cursive|fantasy|system-ui|math|emoji|fangsong|ui-serif|ui-sans-serif|ui-monospace|ui-rounded)$/i.test(inner)) {
+        return before + '"' + inner + '"';
+      }
+      return before + inner;
+    });
+  }
+
+  value = removeWhitespaceAfterUrlTokens(value, protectedUrls.urlTokens);
+  return restoreUrlTokens(value, protectedUrls.urlTokens);
+}
+
+export {
+  normalizeWhitespaceAndQuotes,
+  restoreSpaceBeforeMathOperators
+};