@thejaredwilcurt/csslop 0.0.39 → 0.0.40

package/package.json

@@ -2,15 +2,15 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Experimental CSS minification",
   "scripts": {
-    "prestart": "node ./scripts/prestart.js",
+    "prestart": "node ./scripts/pre/start.js",
     "start": "vite",
     "preview": "vite preview",
-    "prebuild": "node ./scripts/prebuild.js",
+    "prebuild": "node ./scripts/pre/build.js",
     "build": "vite build",
-    "postbuild": "node ./scripts/postbuild.js",
+    "postbuild": "node ./scripts/post/build.js",
     "copy": "node ./scripts/copyTests.js",
     "test": "node ./tests/index.test.js",
     "real": "node ./tests/realworld.test.js",
@@ -28,17 +28,17 @@
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.12",
+    "@codemirror/view": "^6.43.13",
     "@eslint/js": "^10.0.1",
     "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.10.0",
+    "eslint": "^10.11.0",
     "eslint-config-tjw-base": "^5.0.0",
     "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": "^64.5.2",
+    "eslint-plugin-jsdoc": "^64.5.4",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",
@@ -60,11 +60,11 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.9.0"
+      "version": "26.10.0"
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.0.2"
+      "version": "12.1.0"
     }
   }
 }

package/src/rules/custom-properties.js

@@ -2,6 +2,9 @@
  * @file Custom property value whitespace and comment processing for CSS minification.
  */
 
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+import { formatCompactNumber } from '../value/shared.js';
+
 /**
  * Removes spaces after commas only inside parenthesized groups (function
  * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
@@ -34,15 +37,89 @@ function removeSpacesAfterCommasInsideFunctions (value) {
 }
 
 /**
- * Strips leading zeros from decimal numbers in a custom property value
- * (e.g. `0.5` becomes `.5`, `-0.02em` becomes `-.02em`).
+ * The token types whose text begins with a number, and so may hold digits that
+ * are written out longer than they need to be.
+ *
+ * @type {Set<string>}
+ */
+const NUMERIC_TOKEN_TYPES = new Set(['number', 'dimension', 'percentage']);
+
+/**
+ * Splits a numeric token into the decimal number it states and the unit
+ * written on it. A number carrying a scientific exponent does not match, since
+ * its digits cannot be restated without reading the exponent along with them,
+ * and neither does a whole number, which has no zeros to shed.
+ *
+ * @type {RegExp}
+ */
+const DECIMAL_NUMBER_TOKEN = /^([+-]?(?:\d+\.\d+|\.\d+))([a-zA-Z%]*)$/;
+
+/**
+ * Restates a numeric token as the shortest way of writing the same number,
+ * dropping the zeros that lead the decimal point and the ones that trail the
+ * digits behind it (`-0.020em` becomes `-.02em`). A token that is not a plain
+ * decimal, or whose number is only expressible in scientific notation, is left
+ * exactly as it was written.
+ *
+ * @param  {string} tokenText  The text of a number, dimension, or percentage token.
+ * @return {string}            The shortest way of writing that same token.
+ */
+function shortenNumericToken (tokenText) {
+  const decimalNumber = tokenText.match(DECIMAL_NUMBER_TOKEN);
+  if (!decimalNumber) {
+    return tokenText;
+  }
+  const [, number, unit] = decimalNumber;
+  const shortened = formatCompactNumber(number);
+  // A number too small or too large to write out plainly comes back in
+  // scientific notation, which reads as a different token once a unit follows
+  if (shortened.includes('e')) {
+    return tokenText;
+  }
+  return shortened + unit;
+}
+
+/**
+ * Reports whether two token lists say the same thing, which is what tells a
+ * rewritten value apart from one whose tokens have run together. Shortening
+ * the numbers of `1.0.0` would leave `10`, a single number where two stood.
+ *
+ * @param  {Array}   tokens           The tokens the value was read as.
+ * @param  {Array}   rewrittenTokens  The tokens the rewritten value reads as.
+ * @return {boolean}                  Whether the rewrite left every token boundary in place.
+ */
+function hasSameTokenBoundaries (tokens, rewrittenTokens) {
+  if (tokens.length !== rewrittenTokens.length) {
+    return false;
+  }
+  return tokens.every((token, index) => {
+    return token.type === rewrittenTokens[index].type;
+  });
+}
+
+/**
+ * Writes every number in a custom property value the shortest way it can be
+ * written. A custom property holds an arbitrary token sequence, so the value
+ * is walked token by token: only the tokens that state a number are rewritten,
+ * leaving strings, urls, and hash tokens exactly as the author wrote them.
  *
  * @param  {string} value  The custom property value string.
- * @return {string}        The value with leading zeros removed from decimals.
+ * @return {string}        The value with its numbers shortened.
  */
-function stripLeadingZerosFromDecimals (value) {
-  // Match a boundary (start, whitespace, comma, open-paren), optional sign, then leading zeros before a decimal
-  return value.replace(/(^|\s|,|\()(-?)0+(\.\d+)/g, '$1$2$3');
+function shortenNumbers (value) {
+  const tokens = tokenizeCssValue(value);
+  const rewritten = tokens
+    .map((token) => {
+      if (!NUMERIC_TOKEN_TYPES.has(token.type)) {
+        return token.text;
+      }
+      return shortenNumericToken(token.text);
+    })
+    .join('');
+  if (!hasSameTokenBoundaries(tokens, tokenizeCssValue(rewritten))) {
+    return value;
+  }
+  return rewritten;
 }
 
 /**
@@ -69,7 +146,7 @@ function processCustomPropertyComments (value) {
  * Collapses whitespace in a custom property value while preserving
  * token boundaries. Each whitespace sequence is reduced to a single
  * space, spaces after commas inside function calls are removed, and
- * leading zeros on decimal numbers are stripped.
+ * every number is written the shortest way it can be.
  *
  * @param  {string} value  The raw custom property value string.
  * @return {string}        The minified custom property value.
@@ -79,8 +156,8 @@ function collapseCustomPropertyWhitespace (value) {
   let collapsed = value.replace(/\s+/g, ' ');
   // Remove spaces after commas only inside function calls (e.g. var(--bar, 1.5) → var(--bar,1.5))
   collapsed = removeSpacesAfterCommasInsideFunctions(collapsed);
-  // Strip leading zeros from decimals (e.g. 0.5 → .5, -0.02em → -.02em)
-  collapsed = stripLeadingZerosFromDecimals(collapsed);
+  // Shorten decimals (e.g. 0.5 → .5, -0.020em → -.02em)
+  collapsed = shortenNumbers(collapsed);
   return collapsed;
 }
 export {

package/src/rules/optimize.js

@@ -1351,6 +1351,74 @@ const MERGE_AT_LATER_RULE = 'later';
  */
 const MERGE_AT_EARLIER_RULE = 'earlier';
 
+/**
+ * Reports whether an entry of a rule's body is a declaration whose standing in
+ * the cascade can be read off the property it writes. Anything else a body may
+ * hold, such as a nested rule, is never shadowed by a declaration beside it.
+ *
+ * @param  {object}  entry  An entry of a rule's declaration list.
+ * @return {boolean}        True when the entry is a property declaration.
+ */
+function isPropertyDeclaration (entry) {
+  return entry.type === 'declaration' && Boolean(entry.property);
+}
+
+/**
+ * Finds which declaration decides each leaf property once a list of
+ * declarations is read as one rule's body. Within a rule, an important
+ * declaration beats a non-important one, and between two of equal weight the
+ * last one written wins.
+ *
+ * @param  {Array} declarations  The declarations of the combined rule, in the order they would be written.
+ * @return {Map}                 Map of leaf property name to the declaration that decides it.
+ */
+function findDecidingDeclarations (declarations) {
+  const decidingDeclarations = new Map();
+  const importantDeclarations = new Set();
+  for (const declaration of declarations) {
+    if (!isPropertyDeclaration(declaration)) {
+      continue;
+    }
+    const isImportant = isImportantDeclaration(declaration);
+    if (isImportant) {
+      importantDeclarations.add(declaration);
+    }
+    for (const leafProperty of expandToOverridableProperties(declaration.property)) {
+      const decidingDeclaration = decidingDeclarations.get(leafProperty);
+      const outranksIt = (
+        !decidingDeclaration ||
+        isImportant ||
+        !importantDeclarations.has(decidingDeclaration)
+      );
+      if (outranksIt) {
+        decidingDeclarations.set(leafProperty, declaration);
+      }
+    }
+  }
+  return decidingDeclarations;
+}
+
+/**
+ * Reports whether anything a rule brings to a merge still decides a property
+ * of the combined rule. A declaration that loses every property it writes to
+ * another declaration of the same rule is dropped from the merged rule, so
+ * where the merged rule sits cannot change how it reads.
+ *
+ * @param  {object}  rule                  The rule contributing the entries.
+ * @param  {Map}     decidingDeclarations  The deciding declaration of each leaf property of the merged rule.
+ * @return {boolean}                       True when the rule still decides something after the merge.
+ */
+function decidesAnythingAfterMerge (rule, decidingDeclarations) {
+  return (rule.declarations || []).some((entry) => {
+    if (!isPropertyDeclaration(entry)) {
+      return entry.type !== 'whitespace' && entry.type !== 'comment';
+    }
+    return [...expandToOverridableProperties(entry.property)].some((leafProperty) => {
+      return decidingDeclarations.get(leafProperty) === entry;
+    });
+  });
+}
+
 /**
  * Decides where two rules with the same selector can be combined. Merging them
  * always makes one set of declarations cross whatever separates the two rules,
@@ -1358,6 +1426,12 @@ const MERGE_AT_EARLIER_RULE = 'earlier';
  * the merged rule goes wherever the set that moved keeps its old standing.
  * Nothing separates adjacent rules, so those always merge.
  *
+ * The declarations one rule loses to the other are the exception: they are
+ * dropped from the merged rule, so the merged rule belongs wherever the
+ * declarations that outlive the merge already were, and nothing has to cross
+ * anything at all. That is what lets `.a{color:red!important}` swallow a later
+ * `.a{color:tan}` across a rule that also writes `color`.
+ *
  * @param  {object}      overrideIndex    The index of what each position writes to.
  * @param  {object}      earlierRule      The first of the two rules with this selector.
  * @param  {object}      laterRule        The second of the two rules with this selector.
@@ -1367,7 +1441,20 @@ const MERGE_AT_EARLIER_RULE = 'earlier';
  */
 function chooseMergePlacement (overrideIndex, earlierRule, laterRule, earlierPosition, laterPosition) {
   const rulesAreAdjacent = earlierPosition === laterPosition - 1;
-  if (rulesAreAdjacent || !overrideIndex.blocksRelocation(earlierRule, earlierPosition)) {
+  if (rulesAreAdjacent) {
+    return MERGE_AT_LATER_RULE;
+  }
+  const decidingDeclarations = findDecidingDeclarations([
+    ...(earlierRule.declarations || []),
+    ...(laterRule.declarations || [])
+  ]);
+  if (!decidesAnythingAfterMerge(laterRule, decidingDeclarations)) {
+    return MERGE_AT_EARLIER_RULE;
+  }
+  if (!decidesAnythingAfterMerge(earlierRule, decidingDeclarations)) {
+    return MERGE_AT_LATER_RULE;
+  }
+  if (!overrideIndex.blocksRelocation(earlierRule, earlierPosition)) {
     return MERGE_AT_LATER_RULE;
   }
   if (!overrideIndex.blocksRelocation(laterRule, earlierPosition)) {

package/src/value/math.js

@@ -8,7 +8,8 @@ import { findMatchingParenthesis } from '../parser/source-search.js';
 
 import {
   convertAbsoluteLengthToPx,
-  formatDimension,
+  formatResolvedDimension,
+  formatResolvedNumber,
   roundCompactNumber
 } from './shared.js';
 
@@ -245,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.
@@ -276,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) => {
@@ -361,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.
  */
@@ -404,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;
     }
@@ -414,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
@@ -456,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;
 }
@@ -466,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') + ')';
   }
 
@@ -516,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

@@ -37,6 +37,7 @@ import {
 import {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
+  formatResolvedNumber,
   hasSubstitutedParts,
   normalizeScaleComponent,
   parseAlphaString,
@@ -1376,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
@@ -1400,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);

package/src/value/shared.js

@@ -47,8 +47,10 @@ function roundCompactNumber (value, precision = 3) {
   if (!Number.isFinite(number)) {
     return String(value);
   }
-  // Strip trailing zeros and trailing decimal point from the fixed-precision string
-  let result = number.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
+  // Strip the zeros trailing the fraction, then the decimal point they leave
+  // behind. Only zeros written after a decimal point are droppable, so the
+  // match has to start at one: the zeros of a whole number are digits.
+  let result = number.toFixed(precision).replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
   if (result.startsWith('0.')) {
     result = result.slice(1);
   }
@@ -58,6 +60,44 @@ function roundCompactNumber (value, precision = 3) {
   return result;
 }
 
+/**
+ * The most characters the result of a resolved calculation is written with,
+ * counting the digits and the decimal point but not the sign. A calculation is
+ * only replaced by its result to save characters, and a result that repeats
+ * can always be written out longer, so its digits are cut off where the
+ * accuracy they add stops paying for the characters they cost.
+ *
+ * @type {number}
+ */
+const MAXIMUM_RESOLVED_NUMBER_CHARACTERS = 7;
+
+/**
+ * Formats what a calculation resolved to as the number a stylesheet states it
+ * with: rounded to however many decimal places are left over once the whole
+ * part and the decimal point have taken their share of the character budget a
+ * resolved number is written within.
+ *
+ * @param  {number|string} value              The number the calculation resolved to.
+ * @param  {number}        maximumCharacters  The most characters the written number may take.
+ * @return {string}                           The number as it is written into the stylesheet.
+ */
+function formatResolvedNumber (value, maximumCharacters = MAXIMUM_RESOLVED_NUMBER_CHARACTERS) {
+  const number = typeof value === 'number' ? value : parseFloat(value);
+  if (!Number.isFinite(number)) {
+    return String(value);
+  }
+  const wholePart = Math.floor(Math.abs(number));
+  // A magnitude below one is written without its leading zero, so nothing of
+  // its whole part is spent from the budget
+  let wholeDigitCount = 0;
+  if (wholePart !== 0) {
+    wholeDigitCount = String(wholePart).length;
+  }
+  // The decimal point itself takes one of the characters the digits could have
+  const decimalPlaces = Math.max(maximumCharacters - wholeDigitCount - 1, 0);
+  return roundCompactNumber(number, decimalPlaces);
+}
+
 /**
  * Converts an absolute CSS length value (pt, pc, in, cm, mm, q) to its pixel equivalent using standard conversion factors.
  *
@@ -84,15 +124,16 @@ function convertAbsoluteLengthToPx (value, unit) {
 }
 
 /**
- * Formats a numeric value with its CSS unit as a compact string, rounding to the specified precision.
+ * Formats what a calculation resolved to as the dimension a stylesheet states
+ * it with, rounding the number into the character budget a resolved number is
+ * written within.
  *
- * @param  {number} value      The numeric dimension value.
- * @param  {string} unit       The CSS unit suffix (e.g. "px", "%").
- * @param  {number} precision  The number of decimal places to keep.
- * @return {string}            The formatted dimension string.
+ * @param  {number} value  The numeric result of the calculation.
+ * @param  {string} unit   The CSS unit suffix the result carries (e.g. "px", "%").
+ * @return {string}        The dimension as it is written into the stylesheet.
  */
-function formatDimension (value, unit, precision = 3) {
-  return roundCompactNumber(value, precision) + unit;
+function formatResolvedDimension (value, unit) {
+  return formatResolvedNumber(value) + unit;
 }
 
 /**
@@ -197,7 +238,8 @@ export {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
   formatCompactNumber,
-  formatDimension,
+  formatResolvedDimension,
+  formatResolvedNumber,
   hasSubstitutedParts,
   normalizeScaleComponent,
   parseAlphaString,