@thejaredwilcurt/csslop 0.0.38 → 0.0.40

package/src/value/math.js

@@ -4,9 +4,12 @@
 
 import { calc } from '@csstools/css-calc';
 
+import { findMatchingParenthesis } from '../parser/source-search.js';
+
 import {
   convertAbsoluteLengthToPx,
-  formatDimension,
+  formatResolvedDimension,
+  formatResolvedNumber,
   roundCompactNumber
 } from './shared.js';
 
@@ -124,28 +127,6 @@ function findFunctionNameStart (value, openIndex) {
   return index;
 }
 
-/**
- * Finds the parenthesis closing the one at the given index.
- *
- * @param  {string} value      The CSS value string being scanned.
- * @param  {number} openIndex  The index of the opening parenthesis.
- * @return {number}            The index of the matching closing parenthesis, or -1 when it never closes.
- */
-function findClosingParenthesis (value, openIndex) {
-  let depth = 0;
-  for (let index = openIndex; index < value.length; index++) {
-    if (value[index] === '(') {
-      depth++;
-    } else if (value[index] === ')') {
-      depth--;
-      if (depth === 0) {
-        return index;
-      }
-    }
-  }
-  return -1;
-}
-
 /**
  * Rewrites the contents of every math function in a value, leaving the rest of
  * the value untouched. A `*` only means multiplication inside these functions,
@@ -166,7 +147,7 @@ function rewriteMathFunctionContents (rewriteExpression, value) {
       break;
     }
     const functionName = value.slice(findFunctionNameStart(value, openIndex), openIndex).toLowerCase();
-    const closeIndex = findClosingParenthesis(value, openIndex);
+    const closeIndex = findMatchingParenthesis(value, openIndex);
     if (!MATH_FUNCTION_NAMES.has(functionName) || closeIndex === -1) {
       result += value.slice(index, openIndex + 1);
       index = openIndex + 1;
@@ -265,6 +246,158 @@ function convertReciprocalMultiplicationToDivision (expression) {
   });
 }
 
+/**
+ * Matches a whole expression that divides a percentage by a plain number,
+ * capturing the percentage and the divisor it is shared out between.
+ *
+ * @type {RegExp}
+ */
+const PERCENTAGE_DIVISION = /^([+-]?(?:\d+|\d*\.\d+))%\s*\/\s*([+-]?(?:\d+|\d*\.\d+))$/;
+
+/**
+ * Picks between what a calculation resolved to and the calculation itself,
+ * keeping whichever takes fewer characters to write. A tie goes to the
+ * resolved value, which states the same thing without the arithmetic.
+ *
+ * @param  {string} resolved     The value the calculation resolves to.
+ * @param  {string} calculation  The calculation, written as compactly as it can be.
+ * @return {string}              The shorter of the two.
+ */
+function shorterOfResolutionAndCalculation (resolved, calculation) {
+  if (resolved.length <= calculation.length) {
+    return resolved;
+  }
+  return calculation;
+}
+
+/**
+ * Resolves a percentage divided by a number into the single percentage it
+ * equals, which is how `calc(100%/16)` comes to be written as `6.25%`. The
+ * division stays as it was written when the result is no shorter, and when
+ * the divisor is zero, since that resolves to nothing a stylesheet can state.
+ *
+ * @param  {string}      expression  The contents of a `calc()`, with its whitespace collapsed.
+ * @return {string|null}             The shorter of the resolved percentage and the division, or null when the expression is not one.
+ */
+function resolvePercentageDivision (expression) {
+  const division = expression.match(PERCENTAGE_DIVISION);
+  if (!division) {
+    return null;
+  }
+  const [, percentage, divisor] = division;
+  const calculation = 'calc(' + percentage + '%/' + divisor + ')';
+  if (Number(divisor) === 0) {
+    return calculation;
+  }
+  const resolved = formatResolvedNumber(Number(percentage) / Number(divisor)) + '%';
+  return shorterOfResolutionAndCalculation(resolved, calculation);
+}
+
+/**
+ * The properties whose values every CSS specification defines as
+ * non-negative, so that a math function declared on one of them has its
+ * result clamped rather than read as written.
+ *
+ * @type {Set<string>}
+ */
+const NON_NEGATIVE_PROPERTIES = new Set([
+  'animation-duration',
+  'animation-iteration-count',
+  'background-size',
+  'block-size',
+  'border-block-end-width',
+  'border-block-start-width',
+  'border-block-width',
+  'border-bottom-left-radius',
+  'border-bottom-right-radius',
+  'border-bottom-width',
+  'border-end-end-radius',
+  'border-end-start-radius',
+  'border-image-outset',
+  'border-image-width',
+  'border-inline-end-width',
+  'border-inline-start-width',
+  'border-inline-width',
+  'border-left-width',
+  'border-radius',
+  'border-right-width',
+  'border-start-end-radius',
+  'border-start-start-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-top-width',
+  'border-width',
+  'column-count',
+  'column-gap',
+  'column-rule-width',
+  'column-width',
+  'flex-basis',
+  'flex-grow',
+  'flex-shrink',
+  'font-size',
+  'gap',
+  'height',
+  'inline-size',
+  'line-height',
+  'mask-size',
+  'max-block-size',
+  'max-height',
+  'max-inline-size',
+  'max-width',
+  'min-block-size',
+  'min-height',
+  'min-inline-size',
+  'min-width',
+  'outline-width',
+  'padding',
+  'padding-block',
+  'padding-block-end',
+  'padding-block-start',
+  'padding-bottom',
+  'padding-inline',
+  'padding-inline-end',
+  'padding-inline-start',
+  'padding-left',
+  'padding-right',
+  'padding-top',
+  'perspective',
+  'row-gap',
+  'shape-margin',
+  'stroke-width',
+  'tab-size',
+  'transition-duration',
+  'width'
+]);
+
+/**
+ * Matches a value written as a single negative number, with or without the
+ * unit or percent sign that follows its digits.
+ *
+ * @type {RegExp}
+ */
+const NEGATIVE_NUMBER_VALUE = /^-(?:\d+|\d*\.\d+)(?:[a-z]+|%)?$/i;
+
+/**
+ * Clamps what a math function resolved to into the range its property
+ * accepts. A negative length written out directly makes the declaration
+ * invalid and the CSS engine throws it away, but a math function is allowed
+ * to resolve to one: its result is clamped to the nearest value the property
+ * does take, which on a property that only accepts non-negative values is
+ * zero, as the range checking section of the CSS Values specification
+ * describes: https://drafts.csswg.org/css-values/#calc-range.
+ *
+ * @param  {string} resolvedValue  The value the math function resolved to.
+ * @param  {string} property       The property the math function is declared on.
+ * @return {string}                The resolved value, held inside the property's range.
+ */
+function clampResolvedValueToPropertyRange (resolvedValue, property) {
+  const acceptsNegativeValues = !NON_NEGATIVE_PROPERTIES.has(String(property).toLowerCase());
+  if (acceptsNegativeValues || !NEGATIVE_NUMBER_VALUE.test(resolvedValue)) {
+    return resolvedValue;
+  }
+  return '0';
+}
+
 /**
  * The units a folded calc() expression leads with, in the order they are
  * written. Every other unit follows them alphabetically.
@@ -296,15 +429,15 @@ function tryFoldCalcExpression (expression) {
     expr = expr.replace(/\(([^()]+)\)/g, '$1');
     // Fold: <number> * <number><unit> → computed result in same unit
     expr = expr.replace(/(-?(?:\d*\.\d+|\d+))\s*\*\s*(-?(?:\d*\.\d+|\d+))(px|pt|pc|in|cm|mm|q|%)/gi, (match, a, b, unit) => {
-      return formatDimension(parseFloat(a) * parseFloat(b), unit);
+      return formatResolvedDimension(parseFloat(a) * parseFloat(b), unit);
     });
     // Fold: <number><unit> * <number> → computed result in same unit
     expr = expr.replace(/(-?(?:\d*\.\d+|\d+))(px|pt|pc|in|cm|mm|q|%)\s*\*\s*(-?(?:\d*\.\d+|\d+))/gi, (match, a, unit, b) => {
-      return formatDimension(parseFloat(a) * parseFloat(b), unit);
+      return formatResolvedDimension(parseFloat(a) * parseFloat(b), unit);
     });
     // Fold: <number><unit> / <number> → computed result in same unit
     expr = expr.replace(/(-?(?:\d*\.\d+|\d+))(px|pt|pc|in|cm|mm|q)\s*\/\s*(-?(?:\d*\.\d+|\d+))/gi, (match, value, unit, divisor) => {
-      return formatDimension(parseFloat(value) / parseFloat(divisor), unit);
+      return formatResolvedDimension(parseFloat(value) / parseFloat(divisor), unit);
     });
     // Collapse zero-with-unit terms (e.g. 0px, 0%) to plain 0 or remove them
     expr = expr.replace(/(^|[+-])\s*0(?:px|pt|pc|in|cm|mm|q|%)\b/g, (match, sign) => {
@@ -381,26 +514,100 @@ function tryFoldCalcExpression (expression) {
 
   if (outputTerms.length === 1) {
     const { unit, value } = outputTerms[0];
-    if (unit) {
-      return roundCompactNumber(value) + unit;
-    }
-    return roundCompactNumber(value);
+    return formatResolvedDimension(value, unit);
   }
 
   const [first, ...rest] = outputTerms;
-  let result = roundCompactNumber(first.value) + first.unit;
+  let result = formatResolvedDimension(first.value, first.unit);
   for (const term of rest) {
     const sign = term.value < 0 ? '-' : '+';
-    result += ' ' + sign + ' ' + roundCompactNumber(Math.abs(term.value)) + term.unit;
+    result += ' ' + sign + ' ' + formatResolvedDimension(Math.abs(term.value), term.unit);
   }
   return 'calc(' + result + ')';
 }
 
+/**
+ * Matches a whole expression that scales a percentage by a plain number,
+ * written either way around. Both operands are already as short as they can
+ * be, so the expression is only ever squeezed, never resolved.
+ *
+ * @type {RegExp}
+ */
+const PERCENTAGE_MULTIPLICATION = /^(?:-?(?:\d*\.\d+|\d+)%\s*\*\s*-?(?:\d*\.\d+|\d+)|-?(?:\d*\.\d+|\d+)\s*\*\s*-?(?:\d*\.\d+|\d+)%)$/;
+
+/**
+ * Matches a value that is a single percentage, which is all a calculation
+ * leaves behind once every term of it has resolved into one.
+ *
+ * @type {RegExp}
+ */
+const RESOLVED_PERCENTAGE = /^-?(?:\d+|\d*\.\d+)%$/;
+
+/**
+ * Chooses how a calculation that shares a percentage out resolves. The
+ * library states the result to the full precision a float carries, which is
+ * both longer than the calculation it replaces and finer than a stylesheet
+ * has any use for, so the result is rounded into the budget a resolved number
+ * is written within and kept only when it is the shorter of the two.
+ *
+ * @param  {string} simplified    The result the calculation library returned.
+ * @param  {string} compactInner  The contents of the `calc()`, with its whitespace collapsed.
+ * @param  {string} match         The whole `calc()` as it was written.
+ * @return {string}               How the resolved calculation is written.
+ */
+function chooseResolvedPercentage (simplified, compactInner, match) {
+  // A division sign written after a percentage, which is what the resolved percentage was shared out by
+  const dividesAPercentage = RESOLVED_PERCENTAGE.test(simplified) && /%\s*\//.test(match);
+  if (!dividesAPercentage) {
+    return simplified;
+  }
+  // Remove whitespace around division operator
+  const calculation = 'calc(' + compactInner.replace(/\s*\/\s*/g, '/') + ')';
+  const resolved = formatResolvedNumber(parseFloat(simplified)) + '%';
+  return shorterOfResolutionAndCalculation(resolved, calculation);
+}
+
+/**
+ * Resolves the contents of a `calc()` into the shortest way of writing the
+ * same value, which is either the value the arithmetic works out to or the
+ * calculation itself with the whitespace squeezed out of it.
+ *
+ * @param  {string} match         The whole `calc()` as it was written.
+ * @param  {string} compactInner  The contents of the `calc()`, with its whitespace collapsed.
+ * @return {string}               The shortest way of writing what the calculation states.
+ */
+function resolveCalcExpression (match, compactInner) {
+  if (PERCENTAGE_MULTIPLICATION.test(compactInner)) {
+    // Remove whitespace around multiplication/division operators
+    return 'calc(' + compactInner.replace(/\s*([*/])\s*/g, '$1') + ')';
+  }
+
+  const dividedPercentage = resolvePercentageDivision(compactInner);
+  if (dividedPercentage) {
+    return dividedPercentage;
+  }
+
+  const folded = tryFoldCalcExpression(compactInner);
+  if (folded) {
+    return folded;
+  }
+
+  try {
+    const simplified = calc(match);
+    if (typeof simplified !== 'string') {
+      return match;
+    }
+    return chooseResolvedPercentage(simplified, compactInner, match);
+  } catch {
+    return match;
+  }
+}
+
 /**
  * Simplifies calc(), min(), and max() expressions within a CSS value string using the `@csstools`/css-calc library, falling back to the original value on failure.
  *
  * @param  {string} value          The CSS value string containing math functions to simplify.
- * @param  {string} property       The CSS property name, used for context-aware simplification.
+ * @param  {string} property       The CSS property name, whose range every resolved result is clamped into.
  * @param  {string} originalValue  The original unmodified value to fall back to if simplification produces an invalid result.
  * @return {string}                The value with math functions simplified where possible.
  */
@@ -424,7 +631,10 @@ function normalizeMathFunctions (value, property, originalValue = '') {
   result = result.replace(/\b(min|max)\(([^()]+)\)/gi, keepSeparatorAfterDissolvedFunction((match) => {
     try {
       const simplified = calc(match);
-      return typeof simplified === 'string' ? simplified : match;
+      if (typeof simplified !== 'string') {
+        return match;
+      }
+      return clampResolvedValueToPropertyRange(simplified, property);
     } catch {
       return match;
     }
@@ -434,35 +644,8 @@ function normalizeMathFunctions (value, property, originalValue = '') {
   result = result.replace(/calc\(([^()]+)\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {
     // Collapse whitespace inside calc expression
     const compactInner = inner.replace(/\s+/g, ' ').trim();
-    // Preserve percent-times-number expressions (e.g. 50%*2 or 2*50%) — just strip inner spaces
-    if (/^(?:-?(?:\d*\.\d+|\d+)%\s*\*\s*-?(?:\d*\.\d+|\d+)|-?(?:\d*\.\d+|\d+)\s*\*\s*-?(?:\d*\.\d+|\d+)%)$/i.test(compactInner)) {
-      // Remove whitespace around multiplication/division operators
-      return 'calc(' + compactInner.replace(/\s*([*/])\s*/g, '$1') + ')';
-    }
-    // Preserve percent/number division expressions (e.g. 100%/3) — just strip inner spaces
-    if (/^\d+(?:\.\d+)?%\s*\/\s*\d+(?:\.\d+)?$/i.test(compactInner)) {
-      // Remove whitespace around division operator
-      return 'calc(' + compactInner.replace(/\s*\/\s*/g, '/') + ')';
-    }
-
-    const folded = tryFoldCalcExpression(compactInner);
-    if (folded) {
-      return folded;
-    }
-
-    try {
-      const simplified = calc(match);
-      if (typeof simplified !== 'string') {
-        return match;
-      }
-      // If simplified to a bare percentage but original had division, preserve the calc form
-      if (/^-?(?:\d+|\d*\.\d+)%$/.test(simplified) && /%\s*\//.test(match)) {
-        return 'calc(' + compactInner.replace(/\s*\/\s*/g, '/') + ')';
-      }
-      return simplified;
-    } catch {
-      return match;
-    }
+    const resolved = resolveCalcExpression(match, compactInner);
+    return clampResolvedValueToPropertyRange(resolved, property);
   }));
 
   // When calc() folded to an absolute-length unit (pt, pc, in, cm, mm, q), convert to pixels
@@ -476,9 +659,9 @@ function normalizeMathFunctions (value, property, originalValue = '') {
     }
   }
 
-  // Round results with excessive decimal places (4+ digits after the decimal)
+  // Round a result whose decimal places run past the budget a resolved number is written within
   result = result.replace(/(-?(?:\d+|\d*\.\d+)\.\d{4,})([a-z%]+)/gi, (match, number, unit) => {
-    return roundCompactNumber(number) + unit;
+    return formatResolvedNumber(number) + unit;
   });
   return result;
 }
@@ -486,18 +669,14 @@ function normalizeMathFunctions (value, property, originalValue = '') {
 /**
  * Simplifies a standalone calc() value by flattening nested calc expressions, converting absolute length units to pixels, and folding constant terms.
  *
- * @param  {string} value  The CSS value string that may be a standalone calc() expression.
+ * @param  {string} value  The CSS value string, already known to be a single `calc()`.
  * @return {string}        The simplified value, or the original value if simplification is not applicable.
  */
-function simplifyStandaloneCalc (value) {
-  // Check if value starts with calc( and ends with )
-  if (!/^calc\(/i.test(value) || !value.endsWith(')')) {
-    return value;
-  }
+function foldStandaloneCalc (value) {
   let inner = value.slice(5, -1).trim();
 
   // Preserve percent-times-number expressions, only stripping whitespace around operators
-  if (/^(?:-?(?:\d*\.\d+|\d+)%\s*\*\s*-?(?:\d*\.\d+|\d+)|-?(?:\d*\.\d+|\d+)\s*\*\s*-?(?:\d*\.\d+|\d+)%)$/i.test(inner.replace(/\s+/g, ' ').trim())) {
+  if (PERCENTAGE_MULTIPLICATION.test(inner.replace(/\s+/g, ' ').trim())) {
     return 'calc(' + inner.replace(/\s*([*/])\s*/g, '$1') + ')';
   }
 
@@ -536,15 +715,31 @@ function simplifyStandaloneCalc (value) {
 
   // Collapse whitespace and check for percent-division expressions
   const compactInner = inner.replace(/\s+/g, ' ').trim();
-  // Preserve percent/number division, just strip whitespace around the operator
-  if (/^\d+(?:\.\d+)?%\s*\/\s*\d+(?:\.\d+)?$/i.test(compactInner)) {
-    return 'calc(' + compactInner.replace(/\s*\/\s*/g, '/') + ')';
+  const dividedPercentage = resolvePercentageDivision(compactInner);
+  if (dividedPercentage) {
+    return dividedPercentage;
   }
 
   // Default: strip whitespace around multiplication/division operators
   return 'calc(' + compactInner.replace(/\s*([*/])\s*/g, '$1') + ')';
 }
 
+/**
+ * Simplifies a value that is a single `calc()`, holding whatever it resolves
+ * to inside the range the property it is declared on accepts.
+ *
+ * @param  {string} value     The CSS value string that may be a standalone calc() expression.
+ * @param  {string} property  The CSS property the value is declared on.
+ * @return {string}           The simplified value, or the original value if simplification is not applicable.
+ */
+function simplifyStandaloneCalc (value, property = '') {
+  // Check if value starts with calc( and ends with )
+  if (!/^calc\(/i.test(value) || !value.endsWith(')')) {
+    return value;
+  }
+  return clampResolvedValueToPropertyRange(foldStandaloneCalc(value), property);
+}
+
 export {
   normalizeMathFunctions,
   simplifyStandaloneCalc

package/src/value/minify.js

@@ -3,6 +3,12 @@
  */
 
 import { isUnicodeCharset } from '../context.js';
+import {
+  findMatchingParenthesis,
+  skipParenthesizedGroup,
+  skipQuotedString,
+  startsUrlToken
+} from '../parser/source-search.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
 import { evaluateColorMix } from './color-mix.js';
@@ -31,12 +37,13 @@ import {
 import {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
+  formatResolvedNumber,
+  hasSubstitutedParts,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,
   roundCompactNumber
 } from './shared.js';
-import { findMatchingParenthesis } from './syntax.js';
 import { elideRedundantSeparators } from './tokens.js';
 import { minifyTransformValue } from './transforms.js';
 import { optimizeUnicodeRange } from './unicode-range.js';
@@ -136,68 +143,24 @@ function splitValueSegments (value) {
   const segments = [];
   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(';
-  };
-
-  const consumeUrl = (start) => {
-    let depth = 1;
-    let end = start + 4;
-    while (end < value.length && depth > 0) {
-      if (value[end] === '"' || value[end] === '\'') {
-        end = consumeQuoted(end);
-        continue;
-      }
-      // An escaped character is url data, never the parenthesis that ends it
-      if (value[end] === '\\') {
-        end += 2;
-        continue;
-      }
-      if (value[end] === '(') {
-        depth++;
-      }
-      if (value[end] === ')') {
-        depth--;
-      }
-      end++;
-    }
-    return end;
-  };
-
   while (index < value.length) {
     if (value[index] === '"' || value[index] === '\'') {
-      const end = consumeQuoted(index);
+      const end = skipQuotedString(value, index);
       segments.push({ text: value.slice(index, end), isLiteral: true });
       index = end;
       continue;
     }
 
-    if (startsUrl(index)) {
-      const end = consumeUrl(index);
+    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] !== '\'' && !startsUrl(index)) {
+    while (index < value.length && value[index] !== '"' && value[index] !== '\'' && !startsUrlToken(value, index)) {
       index++;
     }
     segments.push({ text: value.slice(start, index), isLiteral: false });
@@ -836,7 +799,11 @@ const ZERO_INITIAL_PROPERTIES = new Set(['margin', 'padding']);
  *
  * @type {Set<string>}
  */
-const AUTO_INITIAL_PROPERTIES = new Set(['min-width', 'min-height']);
+const AUTO_INITIAL_PROPERTIES = new Set([
+  'min-width',
+  'min-height',
+  'hyphenate-limit-chars'
+]);
 
 /**
  * Properties whose initial value is a single keyword longer than the global
@@ -1008,6 +975,69 @@ function reorderBorderWidthBeforeStyle (value) {
   return value.replace(BORDER_STYLE_BEFORE_WIDTH_PATTERN, '$2 $1');
 }
 
+/**
+ * Matches a trailing `!important` flag, so the components in front of it can be
+ * rewritten without the flag being mistaken for part of the last one.
+ *
+ * @type {RegExp}
+ */
+const IMPORTANT_SUFFIX_PATTERN = /!important$/i;
+
+/**
+ * Separates a value from the `!important` flag it may end with.
+ *
+ * @param  {string} value  The declaration value, possibly flagged important.
+ * @return {object}        The components in front of the flag, and the flag itself or an empty string.
+ */
+function splitImportantSuffix (value) {
+  const match = value.match(IMPORTANT_SUFFIX_PATTERN);
+  if (!match) {
+    return { components: value, importantSuffix: '' };
+  }
+  return {
+    components: value.slice(0, match.index).trim(),
+    importantSuffix: match[0]
+  };
+}
+
+/**
+ * Collapses a `hyphenate-limit-chars` value to its shortest equivalent form.
+ * The property states up to three components: the shortest word that may be
+ * hyphenated, then the fewest characters allowed before a hyphen, then the
+ * fewest allowed after it. An unstated "before" component is read as `auto`,
+ * and an unstated "after" component repeats whatever "before" holds, so a
+ * trailing component that only restates the default it stands in for is
+ * redundant.
+ *
+ * @param  {string} value  The `hyphenate-limit-chars` value.
+ * @return {string}        The value with its redundant trailing components dropped.
+ */
+function collapseHyphenateLimitChars (value) {
+  const {
+    components,
+    importantSuffix
+  } = splitImportantSuffix(value);
+  const parts = components.split(' ').filter(Boolean);
+  if (hasSubstitutedParts(parts)) {
+    return value;
+  }
+  const isAfterMatchingBefore = (
+    parts.length === 3 &&
+    parts[2].toLowerCase() === parts[1].toLowerCase()
+  );
+  if (isAfterMatchingBefore) {
+    parts.pop();
+  }
+  const isBeforeLeftAtDefault = (
+    parts.length === 2 &&
+    parts[1].toLowerCase() === 'auto'
+  );
+  if (isBeforeLeftAtDefault) {
+    parts.pop();
+  }
+  return parts.join(' ') + importantSuffix;
+}
+
 /**
  * Minifies a declaration's value for output, rewriting its initial keyword to
  * the shorter global `initial` keyword after shorthand assembly. Both are
@@ -1301,6 +1331,10 @@ function applyPropertyOptimizations (val, property) {
     val = collapseShorthandParts(val.split(' ')).join(' ');
   }
 
+  if (property === 'hyphenate-limit-chars') {
+    val = collapseHyphenateLimitChars(val);
+  }
+
   if (property === 'border-radius') {
     const segments = val.split('/').map((segment) => {
       return segment.trim();
@@ -1343,7 +1377,7 @@ function computeMinifiedValue (declaration) {
     // Remove whitespace around * and / operators (safe outside calc context)
     val = val.replace(/\s*([*/])\s*/g, '$1');
     val = normalizeMathFunctions(val, declaration.property, declaration.value || '');
-    val = simplifyStandaloneCalc(val);
+    val = simplifyStandaloneCalc(val, declaration.property);
     // Simplify calc() expressions containing zero-percent additive terms
     val = val.replace(/calc\(([^()]+)\)/gi, (match, inner) => {
       // Collapse whitespace inside calc expression
@@ -1367,10 +1401,11 @@ function computeMinifiedValue (declaration) {
     }
     val = val.replace(/(^|\s|,|\()(-?)0+(\.\d+)/g, '$1$2$3'); // e.g. 0.5 -> .5, -0.5 -> -.5
 
-    // If value is a standalone number with optional unit, round it compactly
+    // If value is a standalone number with optional unit, round it into the
+    // 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 = roundCompactNumber(rawNumber, 4) + rawUnit;
+      val = formatResolvedNumber(rawNumber) + rawUnit;
     }
 
     val = lowercaseHexColors(val);