@thejaredwilcurt/csslop 0.0.17 → 0.0.18

package/src/value/colors.js

@@ -1,12 +1,9 @@
 /**
- * @file Provides color parsing, color space conversion (sRGB, OKLab, OKLCH, HSL, HWB), color-mix evaluation, and hex formatting for CSS value minification.
+ * @file Provides color parsing, color space conversion (sRGB, OKLab, OKLCH, HSL, HWB), and hex formatting for CSS value minification.
  */
 
 import { namedColors } from './named-colors.js';
-import {
-  parseAlphaString,
-  roundCompactNumber
-} from './shared.js';
+import { parseAlphaString } from './shared.js';
 
 /**
  * Reverse lookup from "r,g,b" to the shortest CSS named color keyword.
@@ -281,26 +278,6 @@ function oklchToOklab (L, C, H) {
   };
 }
 
-/**
- * Interpolates between two hue angles along the shorter arc, per the CSS Color specification.
- *
- * @param  {number} h1  The first hue angle in degrees.
- * @param  {number} h2  The second hue angle in degrees.
- * @param  {number} t   The interpolation factor from 0 to 1.
- * @return {number}     The interpolated hue angle in degrees, normalized to 0–360.
- */
-function interpolateHueShorter (h1, h2, t) {
-  let diff = h2 - h1;
-  if (diff > 180) {
-    diff -= 360;
-  }
-  if (diff < -180) {
-    diff += 360;
-  }
-  let result = h1 + diff * t;
-  return ((result % 360) + 360) % 360;
-}
-
 /**
  * Parse a hex color string to [r, g, b, a].
  *
@@ -430,469 +407,84 @@ function oklabToRgb (L, a, b) {
 }
 
 /**
- * Format an OKLCH result as a minified string.
+ * CIE Lab D50 reference white point.
  *
- * @param  {number}           L      The lightness component.
- * @param  {number}           C      The chroma component.
- * @param  {number}           H      The hue angle in degrees.
- * @param  {number|undefined} alpha  The alpha value from 0 to 1, or undefined for fully opaque.
- * @return {string}                  A minified oklch() function string.
+ * @type {Array}
  */
-function formatOklch (L, C, H, alpha) {
-  const fmtL = roundCompactNumber(L, 3);
-  const fmtC = roundCompactNumber(C, 3);
-  const fmtH = roundCompactNumber(H, 1);
-  if (alpha !== undefined && alpha < 1) {
-    return 'oklch(' + fmtL + ' ' + fmtC + ' ' + fmtH + '/' + roundCompactNumber(alpha, 3) + ')';
-  }
-  return 'oklch(' + fmtL + ' ' + fmtC + ' ' + fmtH + ')';
-}
+const D50_WHITE_XYZ = [0.96422, 1, 0.82521];
 
 /**
- * Detect which channel indices have 'none' in a raw color function string.
+ * Converts a CIE Lab f-function value back to a linear-light ratio.
  *
- * @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  {number} f  The f value.
+ * @return {number}    The linear ratio.
  */
-function findNoneChannels (rawColorStr) {
-  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);
-      }
-    });
+function labFToLinearRatio (f) {
+  const delta = 6 / 29;
+  if (f > delta) {
+    return f * f * f;
   }
-  return indices;
+  return 3 * delta * delta * (f - 16 / 116);
 }
 
 /**
- * Evaluate an N-color (3+) color-mix() expression. Returns a minified CSS color string or null.
+ * Converts CIE Lab (D50) components to linear-light sRGB using Bradford adaptation to D65.
  *
- * @param  {string}      colorSpace  The interpolation color space ("srgb", "oklab", or "oklch").
- * @param  {Array}       args        The raw argument strings for each color.
- * @return {string|null}             A minified CSS color string, or null if the expression cannot be evaluated.
- */
-function evaluateNColorMix (colorSpace, args) {
-  const parsedArgs = [];
-  for (const arg of args) {
-    const parsed = parseColorMixArg(arg.trim());
-    if (!parsed) {
-      return null;
-    }
-    parsedArgs.push(parsed);
-  }
-
-  // If any color is unresolvable (var(), currentcolor), whitespace-strip only
-  if (parsedArgs.some((parsedArg) => {
-    return !parsedArg.color;
-  })) {
-    return normalizeUnresolvableNColorMix(colorSpace, parsedArgs);
-  }
-
-  const percentages = normalizeNColorPercentages(parsedArgs);
-  const percentageSum = percentages.reduce((sum, value) => {
-    return sum + value;
-  }, 0);
-
-  // All-zero percentages → transparent black
-  if (percentageSum === 0) {
-    return rgbaToHex(0, 0, 0, 0);
-  }
-
-  let alphaMultiplier = 1;
-  if (percentageSum < 100) {
-    alphaMultiplier = percentageSum / 100;
-  } else if (percentageSum > 100) {
-    for (let i = 0; i < percentages.length; i++) {
-      percentages[i] = percentages[i] / percentageSum * 100;
-    }
-  }
-
-  // Compute weights
-  const totalPercentage = percentages.reduce((sum, value) => {
-    return sum + value;
-  }, 0);
-  const weights = percentages.map((value) => {
-    return value / totalPercentage;
-  });
-  const colors = parsedArgs.map((parsedArg) => {
-    return parsedArg.color;
-  });
-
-  if (colorSpace === 'srgb') {
-    return mixNColorsSrgb(colors, weights, alphaMultiplier);
-  }
-
-  if (colorSpace === 'oklab') {
-    return mixNColorsOklab(colors, weights, alphaMultiplier);
-  }
-
-  return null;
-}
-
-/**
- * Normalize percentages for an N-color color-mix() expression.
- * When no percentages are specified, each color gets an equal share of 100%.
- * When some are unspecified, the remaining percentage is split equally among them.
- *
- * @param  {Array} parsedArgs  The parsed color-mix arguments.
- * @return {Array}             An array of normalized percentage values.
- */
-function normalizeNColorPercentages (parsedArgs) {
-  const percentages = parsedArgs.map((parsedArg) => {
-    return parsedArg.percentage;
-  });
-  if (percentages.every((value) => {
-    return value === null;
-  })) {
-    const equalWeight = 100 / parsedArgs.length;
-    return parsedArgs.map(() => {
-      return equalWeight;
-    });
-  }
-  const specifiedSum = percentages.reduce((sum, value) => {
-    return sum + (value !== null ? value : 0);
-  }, 0);
-  const unspecifiedCount = percentages.filter((value) => {
-    return value === null;
-  }).length;
-  if (unspecifiedCount > 0) {
-    const remaining = Math.max(0, 100 - specifiedSum);
-    const percentagePerUnspecified = remaining / unspecifiedCount;
-    return percentages.map((value) => {
-      return value !== null ? value : percentagePerUnspecified;
-    });
-  }
-  return percentages;
+ * @param  {number} L  The lightness component.
+ * @param  {number} a  The green-red axis component.
+ * @param  {number} b  The blue-yellow axis component.
+ * @return {object}    An object with r, g, b linear sRGB components.
+ */
+function labToLinearSrgb (L, a, b) {
+  const fy = (L + 16) / 116;
+  const fx = fy + a / 500;
+  const fz = fy - b / 200;
+
+  const x = labFToLinearRatio(fx) * D50_WHITE_XYZ[0];
+  const y = labFToLinearRatio(fy) * D50_WHITE_XYZ[1];
+  const z = labFToLinearRatio(fz) * D50_WHITE_XYZ[2];
+
+  // Matrix from D50 XYZ (Bradford-adapted) to linear sRGB.
+  const red = 3.1338561 * x - 1.6168667 * y - 0.4906146 * z;
+  const green = -0.9787684 * x + 1.9161415 * y + 0.0334540 * z;
+  const blue = 0.0719453 * x - 0.2289914 * y + 1.4052427 * z;
+
+  return { r: red, g: green, b: blue };
 }
 
 /**
- * Build a whitespace-stripped color-mix() string for an unresolvable N-color expression.
+ * Converts CIE Lab (D50) components to clamped, gamma-encoded sRGB (0–1).
  *
- * @param  {string} colorSpace  The interpolation color space.
- * @param  {Array}  parsedArgs  The parsed color-mix arguments.
- * @return {string}             A whitespace-stripped color-mix() expression.
+ * @param  {number} L  The lightness component.
+ * @param  {number} a  The green-red axis component.
+ * @param  {number} b  The blue-yellow axis component.
+ * @return {object}    An object with r, g, b sRGB components.
  */
-function normalizeUnresolvableNColorMix (colorSpace, parsedArgs) {
-  const parts = parsedArgs.map((parsedArg) => {
-    const rawColor = parsedArg.raw.trim();
-    const percentageString = parsedArg.percentage !== null ? ' ' + parsedArg.percentage + '%' : '';
-    return rawColor + percentageString;
-  });
-  return 'color-mix(in ' + colorSpace + ',' + parts.join(',') + ')';
-}
-
-/**
- * Mix N colors in the sRGB color space using weighted averages.
- *
- * @param  {Array}  colors           Array of [r, g, b, a] color arrays.
- * @param  {Array}  weights          Array of weight values for each color.
- * @param  {number} alphaMultiplier  Multiplier for the final alpha channel.
- * @return {string}                  A hex color string.
- */
-function mixNColorsSrgb (colors, weights, alphaMultiplier) {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  let alpha = 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];
-  }
-  return rgbaToHex(Math.round(r), Math.round(g), Math.round(b), alpha * alphaMultiplier);
-}
-
-/**
- * Mix N colors in the OKLab color space using weighted averages.
- *
- * @param  {Array}  colors           Array of [r, g, b, a] color arrays.
- * @param  {Array}  weights          Array of weight values for each color.
- * @param  {number} alphaMultiplier  Multiplier for the final alpha channel.
- * @return {string}                  A hex color string.
- */
-function mixNColorsOklab (colors, weights, alphaMultiplier) {
-  const oklabValues = colors.map((color) => {
-    return rgbToOklab(color[0], color[1], color[2]);
-  });
-  let L = 0;
-  let a = 0;
-  let b = 0;
-  let alpha = 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);
-}
-
-/**
- * Evaluate a color-mix() expression. Returns a minified CSS color string or null.
- *
- * @param  {string}      expr  The full color-mix() expression string.
- * @return {string|null}       A minified CSS color string, or null if the expression cannot be evaluated.
- */
-function evaluateColorMix (expr) {
-  // Parse: color-mix(in <space> [<hue-method>], <color> [<p>%], <color> [<p>%])
-  // We need to handle nested parentheses for inner color functions
-  const inner = extractBalancedArgs(expr, 'color-mix');
-  if (!inner) {
-    return null;
-  }
-
-  // Parse the interpolation method
-  const inMatch = inner.match(/^in\s+(srgb|oklch|oklab)(?:\s+shorter\s+hue)?\s*,\s*/i);
-  if (!inMatch) {
-    return null;
-  }
-
-  const colorSpace = inMatch[1].toLowerCase();
-  const rest = inner.slice(inMatch[0].length);
-
-  // Split color arguments (handling nested parens)
-  const args = splitColorMixArgs(rest);
-  if (args.length < 2) {
-    return null;
-  }
-
-  // N-color path (3+ colors)
-  if (args.length > 2) {
-    return evaluateNColorMix(colorSpace, args);
-  }
-
-  // Parse each argument: "<color> [<percentage>]"
-  const parsed1 = parseColorMixArg(args[0].trim());
-  const parsed2 = parseColorMixArg(args[1].trim());
-  if (!parsed1 || !parsed2) {
-    return null;
-  }
-
-  // Check for unresolvable colors (var(), currentcolor, etc.)
-  if (!parsed1.color || !parsed2.color) {
-    // Can still do normalization but not computation
-    return normalizeColorMix(colorSpace, parsed1, parsed2);
-  }
-
-  // Normalize percentages per CSS spec
-  let p1 = parsed1.percentage;
-  let p2 = parsed2.percentage;
-
-  if (p1 === null && p2 === null) {
-    p1 = 50;
-    p2 = 50;
-  } else if (p1 === null) {
-    p1 = 100 - p2;
-  } else if (p2 === null) {
-    p2 = 100 - p1;
-  }
-
-  let alphaMultiplier = 1;
-  const pSum = p1 + p2;
-  if (pSum === 0) {
-    return null;
-  }
-
-  if (pSum < 100) {
-    alphaMultiplier = pSum / 100;
-  } else if (pSum > 100) {
-    p1 = p1 / pSum * 100;
-    p2 = p2 / pSum * 100;
-  }
-
-  // Trivial cases
-  if (p1 === 0) {
-    return rgbaToHex(parsed2.color[0], parsed2.color[1], parsed2.color[2], parsed2.color[3]);
-  }
-  if (p2 === 0) {
-    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];
-    }
-  }
-
-  const t1 = p1 / (p1 + p2);
-  const t2 = p2 / (p1 + p2);
-  const [r1, g1, b1, a1] = parsed1.color;
-  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);
-  }
-
-  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);
-    }
-    return rgbaToHex(rgb[0], rgb[1], rgb[2], alpha);
-  }
-
-  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;
-    return formatOklch(L, C, H, alpha);
-  }
-
-  return null;
+function labToSrgb (L, a, b) {
+  const linear = labToLinearSrgb(L, a, b);
+  return {
+    r: Math.max(0, Math.min(1, delinearize(linear.r))),
+    g: Math.max(0, Math.min(1, delinearize(linear.g))),
+    b: Math.max(0, Math.min(1, delinearize(linear.b)))
+  };
 }
 
 /**
- * Extract the balanced content inside a function call.
+ * Convert a standalone lab() value (CIE Lab, D50) to hex if it fits in sRGB gamut; returns null if out-of-gamut.
  *
- * @param  {string}      expr      The expression string containing the function call.
- * @param  {string}      funcName  The function name to locate (e.g. "color-mix").
- * @return {string|null}           The content between the matching parentheses, or null if not found.
+ * @param  {number}      L      The Lab lightness component.
+ * @param  {number}      a      The Lab a-axis component.
+ * @param  {number}      b      The Lab b-axis component.
+ * @param  {number}      alpha  The alpha value from 0 to 1.
+ * @return {string|null}        A hex color string, or null if out-of-gamut.
  */
-function extractBalancedArgs (expr, funcName) {
-  const prefix = funcName + '(';
-  const start = expr.indexOf(prefix);
-  if (start === -1) {
+function convertLabToHex (L, a, b, alpha) {
+  const linear = labToLinearSrgb(L, a, b);
+  if (linear.r < -0.002 || linear.r > 1.002 || linear.g < -0.002 || linear.g > 1.002 || linear.b < -0.002 || linear.b > 1.002) {
     return null;
   }
-  let depth = 1;
-  let position = start + prefix.length;
-  while (position < expr.length && depth > 0) {
-    if (expr[position] === '(') {
-      depth++;
-    } else if (expr[position] === ')') {
-      depth--;
-    }
-    position++;
-  }
-  return expr.slice(start + prefix.length, position - 1);
-}
-
-/**
- * Split color-mix arguments at top-level commas (handling nested parens).
- *
- * @param  {string} str  The color arguments string, with arguments separated by commas.
- * @return {Array}       An array of argument strings split at each top-level comma.
- */
-function splitColorMixArgs (str) {
-  const args = [];
-  let depth = 0;
-  let start = 0;
-  for (let position = 0; position < str.length; position++) {
-    if (str[position] === '(') {
-      depth++;
-    } else if (str[position] === ')') {
-      depth--;
-    } else if (str[position] === ',' && depth === 0) {
-      args.push(str.slice(start, position));
-      start = position + 1;
-    }
-  }
-  args.push(str.slice(start));
-  return args;
-}
-
-/**
- * Parse a single color-mix argument: "<color> [<percentage>]" or "<percentage> <color>".
- *
- * @param  {string}      arg  The color-mix argument string to parse.
- * @return {object|null}      An object with color (Array or null), percentage (number or null), raw (string), and hasVar (boolean), or null if unparseable.
- */
-function parseColorMixArg (arg) {
-  arg = arg.trim();
-
-  // Try: percentage at end, e.g. "red 50%" or "rgb(0 0 0)50%"
-  let match = arg.match(/^(.+?)\s*(\d+(?:\.\d+)?)%\s*$/);
-  if (match) {
-    const colorStr = match[1].trim();
-    const percentage = parseFloat(match[2]);
-    const color = parseColor(colorStr);
-    // Check if color contains var() or currentcolor (cannot be evaluated statically)
-    return { color, percentage, raw: colorStr, hasVar: /var\(|currentcolor/i.test(colorStr) };
-  }
-
-  // Try: percentage at start, e.g. "50% red"
-  match = arg.match(/^(\d+(?:\.\d+)?)%\s+(.+)$/);
-  if (match) {
-    const colorStr = match[2].trim();
-    const percentage = parseFloat(match[1]);
-    const color = parseColor(colorStr);
-    // Check if color contains var() or currentcolor (cannot be evaluated statically)
-    return { color, percentage, raw: colorStr, hasVar: /var\(|currentcolor/i.test(colorStr) };
-  }
-
-  // No percentage
-  const color = parseColor(arg);
-  // Check if color contains var() or currentcolor (cannot be evaluated statically)
-  return { color, percentage: null, raw: arg, hasVar: /var\(|currentcolor/i.test(arg) };
-}
-
-/**
- * Normalize a color-mix expression when we can't fully compute it.
- *
- * @param  {string} colorSpace  The interpolation color space ("srgb", "oklab", or "oklch").
- * @param  {object} parsed1     The parsed first color argument with color, percentage, and raw fields.
- * @param  {object} parsed2     The parsed second color argument with color, percentage, and raw fields.
- * @return {string}             A normalized color-mix() expression with default percentages and color space elided.
- */
-function normalizeColorMix (colorSpace, parsed1, parsed2) {
-  // Normalize percentages: strip explicit 50%/50% (the defaults)
-  let p1Str = '';
-  let p2Str = '';
-  if (parsed1.percentage !== null && parsed1.percentage !== 50) {
-    p1Str = ' ' + parsed1.percentage + '%';
-  }
-  if (parsed2.percentage !== null && parsed2.percentage !== 50) {
-    p2Str = ' ' + parsed2.percentage + '%';
-  }
-
-  // Use the raw color strings (but try to minify known colors)
-  let c1 = parsed1.raw;
-  let c2 = parsed2.raw;
-  if (parsed1.color) {
-    c1 = rgbaToHex(parsed1.color[0], parsed1.color[1], parsed1.color[2], parsed1.color[3]);
-  }
-  if (parsed2.color) {
-    c2 = rgbaToHex(parsed2.color[0], parsed2.color[1], parsed2.color[2], parsed2.color[3]);
-  }
-
-  // oklab is the default interpolation method per CSS Color 5 — elide it
-  const spacePrefix = colorSpace === 'oklab' ? '' : 'in ' + colorSpace + ',';
-  return 'color-mix(' + spacePrefix + c1 + p1Str + ',' + c2 + p2Str + ')';
+  const srgb = labToSrgb(L, a, b);
+  return rgbaToHex(Math.round(srgb.r * 255), Math.round(srgb.g * 255), Math.round(srgb.b * 255), alpha !== undefined ? alpha : 1);
 }
 
 /**
@@ -923,7 +515,7 @@ export {
   namedColors,
   parseColor,
   parseHex,
-  evaluateColorMix,
+  convertLabToHex,
   convertOklabToHex,
   shortestColor,
   srgbToOklab,

package/src/value/minify.js

@@ -5,9 +5,10 @@
 import { isUnicodeCharset } from '../context.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
+import { evaluateColorMix } from './color-mix.js';
 import {
+  convertLabToHex,
   convertOklabToHex,
-  evaluateColorMix,
   hslToRgbChannels,
   hwbToRgbChannels,
   parseHex,
@@ -359,6 +360,24 @@ function convertColorsToHex (val) {
     }
   }
 
+  // Convert in-gamut lab() (CIE Lab, D50) to hex when it produces a shorter representation
+  val = val.replace(/\blab\(\s*(-?(?:\d+|\d*\.\d+)%?)\s+(-?(?:\d+|\d*\.\d+)%?)\s+(-?(?:\d+|\d*\.\d+)%?)(?:\s*\/\s*(-?(?:\d+|\d*\.\d+)%?))?\s*\)/gi, (match, lStr, aStr, bStr, alphaStr) => {
+    const alpha = parseAlphaString(alphaStr);
+    const l = parseFloat(lStr);
+    const aNumber = parseFloat(aStr);
+    const a = aStr.endsWith('%') ? aNumber * 1.25 : aNumber;
+    const bNumber = parseFloat(bStr);
+    const b = bStr.endsWith('%') ? bNumber * 1.25 : bNumber;
+    const hex = convertLabToHex(l, a, b, alpha);
+    if (!hex) {
+      return match; // out-of-gamut: keep native lab form
+    }
+    if (hex.length < match.length) {
+      return hex;
+    }
+    return match;
+  });
+
   // Minify whitespace and numeric precision inside wide-gamut and functional color notations
   val = val.replace(/\b(oklab|oklch|lch|lab|color|hwb)\((.*?)\)/gi, (match, func, inner) => {
     // Collapse whitespace to single space
@@ -401,6 +420,14 @@ function convertColorsToHex (val) {
       }
       return before + rounded;
     });
+    // Remove trailing ".0" from numbers so integer channel values stay integer
+    // (e.g. display-p3 1.0 0.0 0.0 becomes display-p3 1 0 0)
+    minified = minified.replace(/(-?\d*)\.0\b/g, (match, integer) => {
+      if (integer === '' || integer === '-' || integer === '-0') {
+        return '0';
+      }
+      return integer;
+    });
     return func + '(' + minified.trim() + ')';
   });
 
@@ -717,6 +744,11 @@ function applyPropertyOptimizations (val, property) {
     });
   }
 
+  if (property === 'syntax') {
+    // Remove whitespace around pipe separators in @property syntax descriptors
+    val = val.replace(/\s*\|\s*/g, '|');
+  }
+
   // Simplify clamp() where all three arguments are identical (e.g. clamp(1rem,1rem,1rem) → 1rem)
   val = val.replace(/\bclamp\(([^,]+),\1,\1\)/gi, '$1');