@thejaredwilcurt/csslop 0.0.42 → 0.0.44

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.42",
+  "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/math.js

@@ -144,9 +144,58 @@ function rewriteMathFunctionContents (rewriteExpression, value) {
   return result + value.slice(index);
 }
 
+/**
+ * Matches a number written with a decimal point that begins a token of its
+ * own, capturing its sign, the digits before its decimal point, and the digits
+ * after it. The lookbehind keeps the match from starting partway through an
+ * identifier (`--x0.5`) or another number, and the lookahead keeps it from
+ * matching a fragment of a dotted name such as `0.5.png`.
+ *
+ * @type {RegExp}
+ */
+const DECIMAL_NUMBER = /(?<![\w.-])([+-]?)(\d*)\.(\d+)(?![\d.])/g;
+
+/**
+ * Writes a decimal number in the fewest characters that state the same value,
+ * dropping the zeros before its whole part (`0.25` → `.25`) and after its
+ * fraction (`1.50` → `1.5`), along with a decimal point left with no fraction
+ * behind it (`2.0` → `2`). The digits that remain are kept as written, so no
+ * precision is lost.
+ *
+ * @param  {string} sign            The sign written before the number, empty when there is none.
+ * @param  {string} wholeDigits     The digits written before the decimal point.
+ * @param  {string} fractionDigits  The digits written after the decimal point.
+ * @return {string}                 The number written as compactly as it can be.
+ */
+function shortenDecimalNumber (sign, wholeDigits, fractionDigits) {
+  // Leading zeros of the whole part
+  const wholePart = wholeDigits.replace(/^0+/, '');
+  // Trailing zeros of the fraction
+  const fractionPart = fractionDigits.replace(/0+$/, '');
+  if (!fractionPart) {
+    return sign + (wholePart || '0');
+  }
+  return sign + wholePart + '.' + fractionPart;
+}
+
+/**
+ * Shortens every decimal number in the contents of a math function. Numbers
+ * that follow an operator written without whitespace (`x*0.25s`) are out of
+ * reach of the general number shortening, which only looks past a separator.
+ *
+ * @param  {string} expression  The contents of a math function.
+ * @return {string}             The expression with every decimal number written as compactly as it can be.
+ */
+function shortenDecimalNumbers (expression) {
+  return expression.replace(DECIMAL_NUMBER, (match, sign, wholeDigits, fractionDigits) => {
+    return shortenDecimalNumber(sign, wholeDigits, fractionDigits);
+  });
+}
+
 /**
  * Matches a multiplication by a decimal below one, capturing the digits after
- * its decimal point and the unit written on it. The trailing lookahead keeps
+ * its decimal point and the unit written on it (so a multiplier with a unit
+ * can be recognized and left alone). The trailing lookahead keeps
  * the match away from numbers that only begin this way, such as the exponent
  * of `.5e3` or a unit name that is still being read.
  *
@@ -205,28 +254,47 @@ function reciprocalOfDecimalFraction (fractionDigits) {
 }
 
 /**
- * Rewrites a multiplication by a decimal below one as a division by the whole
- * number that decimal is the reciprocal of, which is never longer to write and
- * usually shorter (`calc(var(--x)*.25)` → `calc(var(--x)/4)`). A unit written
- * on the multiplier moves onto the divisor, since only how the operand is
- * stated changes.
+ * Builds the division that scales a value exactly as multiplying it by a
+ * unitless decimal below one does, when that division is no longer to write
+ * than the multiplication. A multiplier carrying a unit is never rewritten:
+ * dividing by a dimension inverts its unit in the type of the result
+ * (`x*.25s` is a time, while `x/4s` is per unit of time), so the two would not
+ * be equivalent.
+ *
+ * @param  {string}      fractionDigits  The digits written after the decimal point of the multiplier.
+ * @param  {string}      unit            The unit written on the multiplier, empty when it is unitless.
+ * @return {string|null}                 The equivalent division, or null when there is none worth using.
+ */
+function divisionEquivalentToFractionalMultiplier (fractionDigits, unit) {
+  if (unit) {
+    return null;
+  }
+  const divisor = reciprocalOfDecimalFraction(fractionDigits);
+  if (divisor === null) {
+    return null;
+  }
+  const division = '/' + divisor;
+  // Compared against the shortest the multiplication could have been written
+  const multiplication = '*.' + fractionDigits;
+  if (division.length > multiplication.length) {
+    return null;
+  }
+  return division;
+}
+
+/**
+ * Rewrites a multiplication by a unitless decimal below one as a division by
+ * the whole number that decimal is the reciprocal of, which is never longer to
+ * write and usually shorter (`calc(var(--x)*.25)` → `calc(var(--x)/4)`).
+ * Multipliers with a unit are left as written, since dividing by a dimension
+ * would invert its unit.
  *
  * @param  {string} expression  The contents of a math function.
  * @return {string}             The expression with reciprocal multipliers stated as divisions.
  */
 function convertReciprocalMultiplicationToDivision (expression) {
   return expression.replace(FRACTIONAL_MULTIPLIER, (match, fractionDigits, unit) => {
-    const divisor = reciprocalOfDecimalFraction(fractionDigits);
-    if (divisor === null) {
-      return match;
-    }
-    const division = '/' + divisor + unit;
-    // Compared against the shortest the multiplication could have been written
-    const multiplication = '*.' + fractionDigits + unit;
-    if (division.length > multiplication.length) {
-      return match;
-    }
-    return division;
+    return divisionEquivalentToFractionalMultiplier(fractionDigits, unit) ?? match;
   });
 }
 
@@ -596,7 +664,8 @@ const RESOLVABLE_MATH_FUNCTION = new RegExp(
  * @return {string}           The value with its math functions simplified where possible.
  */
 function simplifyMathFunctionsOnce (value, property) {
-  let result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, value);
+  let result = rewriteMathFunctionContents(shortenDecimalNumbers, value);
+  result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, result);
 
   // Unwrap calc(1 / (1 / x)) → x (double-reciprocal identity)
   result = result.replace(/calc\(\s*1\s*\/\s*\(\s*1\s*\/\s*([^()]+)\s*\)\s*\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {