@thejaredwilcurt/csslop 0.0.46 → 0.0.48

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -35,12 +35,12 @@
     "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.4.0",
+    "eslint-plugin-jsdoc": "^65.4.2",
     "fflate": "^0.8.3",
     "globals": "^17.13.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.8",
-    "vite": "^8.3.4"
+    "vite": "^8.3.5"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -57,11 +57,11 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.12.0"
+      "version": "26.13.0"
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.2.0"
+      "version": "12.2.1"
     }
   }
 }

package/src/declarations/border.js

@@ -182,7 +182,7 @@ function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
   const borderValue = buildBorderShorthandValue(
     widthComponents.length === 1 ? width : '',
     styleComponents.length === 1 ? style : '',
-    colorComponents[0]
+    colorComponents.length === 1 ? colorComponents[0] : ''
   ) + importantSuffix;
   const overrides = BORDER_TRIO_PROPERTIES.flatMap((property, index) => {
     if (componentsByProperty[index].length === 1) {

package/src/rules/custom-properties.js

@@ -76,6 +76,25 @@ function shortenNumericToken (tokenText) {
   if (shortened.includes('e')) {
     return tokenText;
   }
+  return preserveNumberType(shortened, unit);
+}
+
+/**
+ * Keeps a unitless number that was written with a decimal point typed as a
+ * `<number>`. Shedding its zeros could leave only digits, which reads as an
+ * `<integer>`, and a custom property substituted into, or registered with, an
+ * `<integer>` grammar would then accept a value it used to reject.
+ *
+ * @param  {string} shortened  The shortened number, without its unit.
+ * @param  {string} unit       The unit written after the number, if any.
+ * @return {string}            The shortened token, still typed as a `<number>`.
+ */
+function preserveNumberType (shortened, unit) {
+  // An optional sign followed by nothing but digits reads as an integer
+  const isIntegerSpelling = /^[+-]?\d+$/.test(shortened);
+  if (!unit && isIntegerSpelling) {
+    return shortened + '.0';
+  }
   return shortened + unit;
 }
 

package/src/rules/normalize.js

@@ -2,7 +2,9 @@
  * @file Normalizes CSS selectors, `@media` queries, and `@supports` conditions by unescaping identifiers and collapsing whitespace.
  */
 
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 import { resolveUnicodeEscape } from '../utilities.js';
+import { shortenNumericText } from '../value/numbers.js';
 
 /**
  * Converts CSS Unicode escape sequences in an identifier to their literal characters, preserving control characters that must remain escaped.
@@ -161,7 +163,38 @@ function normalizeMedia (media) {
       return fullMatch;
     }
   );
-  return compactLogicalOperators(media.trim());
+  return compactLogicalOperators(shortenRatioNumbers(media.trim()));
+}
+
+/**
+ * Shortens the numbers of every `<ratio>` in a media query, such as the
+ * `1000000/1` of `(min-aspect-ratio:1000000/1)`. A ratio is made of
+ * `<number>`s rather than `<integer>`s, so its terms may use scientific
+ * notation.
+ *
+ * @param  {string} media  A normalized `@media` query string.
+ * @return {string}        The query with shorter ratio numbers.
+ */
+function shortenRatioNumbers (media) {
+  const tokens = tokenizeCssValue(media);
+  const ratioTermIndexes = new Set();
+  tokens.forEach((token, index) => {
+    const isRatioSlash = (
+      token.text === '/' &&
+      tokens[index - 1]?.type === 'number' &&
+      tokens[index + 1]?.type === 'number'
+    );
+    if (isRatioSlash) {
+      ratioTermIndexes.add(index - 1);
+      ratioTermIndexes.add(index + 1);
+    }
+  });
+  return tokens.map((token, index) => {
+    if (ratioTermIndexes.has(index)) {
+      return shortenNumericText(token.text, true);
+    }
+    return token.text;
+  }).join('');
 }
 
 /**

package/src/rules/stringify.js

@@ -4,6 +4,7 @@
 
 import { processDeclarations } from '../declarations/process.js';
 import {
+  findMatchingParenthesis,
   skipParenthesizedGroup,
   skipQuotedString,
   splitTopLevelCommaList,
@@ -74,7 +75,20 @@ const LAYER_STATEMENT_PATTERN = /^@layer [^{}();'"]*;$/;
  */
 function removeRedundantLayerStatementSemicolon (ruleStrings) {
   const lastIndex = ruleStrings.length - 1;
-  if (lastIndex < 0 || !LAYER_STATEMENT_PATTERN.test(ruleStrings[lastIndex])) {
+  if (lastIndex < 0) {
+    return ruleStrings;
+  }
+  const lastRule = ruleStrings[lastIndex];
+  const isTrailingLayerStatement = LAYER_STATEMENT_PATTERN.test(lastRule);
+  const isTrailingImportStatement = (
+    lastRule.endsWith(';') &&
+    (
+      lastRule.startsWith('@import ') ||
+      lastRule.startsWith('@import"') ||
+      lastRule.startsWith('@import\'')
+    )
+  );
+  if (!isTrailingLayerStatement && !isTrailingImportStatement) {
     return ruleStrings;
   }
   const result = [...ruleStrings];
@@ -82,6 +96,47 @@ function removeRedundantLayerStatementSemicolon (ruleStrings) {
   return result;
 }
 
+/**
+ * Normalizes every `supports()` condition in an import prelude while leaving
+ * nested functions and quoted strings to the condition parser.
+ *
+ * @param  {string} importStatement  The import prelude being minified.
+ * @return {string}                  The import prelude with normalized conditions.
+ */
+function normalizeImportSupports (importStatement) {
+  let result = '';
+  let index = 0;
+  const normalizedStatement = importStatement.toLowerCase();
+  while (index < importStatement.length) {
+    let supportsIndex = -1;
+    let scanIndex = index;
+    while (scanIndex < importStatement.length) {
+      if (importStatement[scanIndex] === '"' || importStatement[scanIndex] === '\'') {
+        scanIndex = skipQuotedString(importStatement, scanIndex);
+        continue;
+      }
+      if (normalizedStatement.startsWith('supports(', scanIndex)) {
+        supportsIndex = scanIndex;
+        break;
+      }
+      scanIndex++;
+    }
+    if (supportsIndex === -1) {
+      break;
+    }
+    const openIndex = supportsIndex + 'supports'.length;
+    const closeIndex = findMatchingParenthesis(importStatement, openIndex);
+    if (closeIndex === -1) {
+      break;
+    }
+    const condition = importStatement.slice(openIndex + 1, closeIndex);
+    result += importStatement.slice(index, openIndex + 1);
+    result += normalizeSupports(condition) + ')';
+    index = closeIndex + 1;
+  }
+  return result + importStatement.slice(index);
+}
+
 /**
  * Recursively stringifies child rules into a concatenated minified CSS string.
  *
@@ -550,13 +605,7 @@ function stringifyRule (rule, context) {
     importStatement = importStatement.replace(/^(".*?"|'.*?') /, '$1');
     // Remove space between closing paren and next at-rule condition keyword
     importStatement = importStatement.replace(/\) ([a-zA-Z])/g, ')$1');
-    // Minify property:value pairs inside supports() by removing whitespace around colons
-    importStatement = importStatement.replace(
-      /supports\(([^()]*)\)/g,
-      (fullMatch, content) => {
-        return 'supports(' + content.replace(/\s*:\s*/g, ':') + ')';
-      }
-    );
+    importStatement = normalizeImportSupports(importStatement);
     const startsWithQuote = importStatement.startsWith('"') || importStatement.startsWith('\'');
     let importSeparator;
     if (startsWithQuote) {

package/src/value/math-expression.js

@@ -66,17 +66,29 @@ const MAXIMUM_NESTING_DEPTH = 32;
  * length is held as the pixels it measures, since every length stating the
  * same measurement then totals under the same unit.
  *
- * @param  {number} number  The number the quantity is written from.
- * @param  {string} unit    The unit the quantity is written with, or the empty string when it is a plain number.
- * @return {Map}            The unit totals the quantity states.
+ * @param  {number}  number                   The number the quantity is written from.
+ * @param  {string}  unit                     The unit the quantity is written with, or the empty string when it is a plain number.
+ * @param  {boolean} preserveWrittenQuantity  Whether to retain the original spelling for a standalone quantity.
+ * @return {Map}                              The unit totals the quantity states.
  */
-function createUnitTotals (number, unit) {
+function createUnitTotals (number, unit, preserveWrittenQuantity = false) {
   const lowercasedUnit = unit.toLowerCase();
   const pixels = convertAbsoluteLengthToPx(number, lowercasedUnit);
+  let totals;
   if (pixels === null) {
-    return new Map([[lowercasedUnit, number]]);
+    totals = new Map([[lowercasedUnit, number]]);
+  } else {
+    totals = new Map([['px', pixels]]);
+  }
+  if (preserveWrittenQuantity) {
+    totals.writtenQuantity = {
+      number,
+      unit: lowercasedUnit,
+      canonicalUnit: pixels === null ? lowercasedUnit : 'px',
+      canonicalNumber: pixels === null ? number : pixels
+    };
   }
-  return new Map([['px', pixels]]);
+  return totals;
 }
 
 /**
@@ -162,6 +174,16 @@ function multiplyUnitTotals (left, right) {
   if (isPlainNumber(left)) {
     return scaleUnitTotals(right, left.get(UNITLESS));
   }
+  const leftQuantity = readSingleQuantity(left);
+  const rightQuantity = readSingleQuantity(right);
+  if (leftQuantity && rightQuantity) {
+    if (leftQuantity.unit.startsWith('reciprocal:') && leftQuantity.unit.slice('reciprocal:'.length) === rightQuantity.unit) {
+      return createUnitTotals(leftQuantity.number * rightQuantity.number, UNITLESS);
+    }
+    if (rightQuantity.unit.startsWith('reciprocal:') && rightQuantity.unit.slice('reciprocal:'.length) === leftQuantity.unit) {
+      return createUnitTotals(leftQuantity.number * rightQuantity.number, UNITLESS);
+    }
+  }
   return null;
 }
 
@@ -175,14 +197,28 @@ function multiplyUnitTotals (left, right) {
  * @return {Map|null}        The totals of the quotient, or null when the division cannot be worked out.
  */
 function divideUnitTotals (left, right) {
-  if (!isPlainNumber(right)) {
-    return null;
+  if (isPlainNumber(right)) {
+    const divisor = right.get(UNITLESS);
+    if (divisor === 0) {
+      return null;
+    }
+    return scaleUnitTotals(left, 1 / divisor);
   }
-  const divisor = right.get(UNITLESS);
-  if (divisor === 0) {
+  const dividendQuantity = readSingleQuantity(left);
+  const divisorQuantity = readSingleQuantity(right);
+  if (!dividendQuantity || !divisorQuantity || divisorQuantity.number === 0) {
     return null;
   }
-  return scaleUnitTotals(left, 1 / divisor);
+  if (dividendQuantity.unit === divisorQuantity.unit) {
+    return createUnitTotals(dividendQuantity.number / divisorQuantity.number, UNITLESS);
+  }
+  if (dividendQuantity.unit === UNITLESS) {
+    return createUnitTotals(
+      dividendQuantity.number / divisorQuantity.number,
+      'reciprocal:' + divisorQuantity.unit
+    );
+  }
+  return null;
 }
 
 /**
@@ -478,7 +514,7 @@ function parseOperand (reader) {
   }
   if (token.type === 'number') {
     reader.index++;
-    return createUnitTotals(token.number, token.unit);
+    return createUnitTotals(token.number, token.unit, true);
   }
   if (token.type === 'identifier') {
     reader.index++;
@@ -661,7 +697,8 @@ function evaluateMinimum (argumentList) {
   if (!comparable) {
     return null;
   }
-  return createUnitTotals(Math.min(...comparable.numbers), comparable.unit);
+  const winningIndex = comparable.numbers.indexOf(Math.min(...comparable.numbers));
+  return argumentList[winningIndex].value;
 }
 
 /**
@@ -675,7 +712,8 @@ function evaluateMaximum (argumentList) {
   if (!comparable) {
     return null;
   }
-  return createUnitTotals(Math.max(...comparable.numbers), comparable.unit);
+  const winningIndex = comparable.numbers.indexOf(Math.max(...comparable.numbers));
+  return argumentList[winningIndex].value;
 }
 
 /**
@@ -1043,7 +1081,22 @@ function writeTermNumber (total) {
  * @return {string|null}         The value the calculation resolved to, or null when it cannot be written faithfully.
  */
 function formatUnitTotals (totals) {
+  const writtenQuantity = totals.writtenQuantity;
+  if (
+    writtenQuantity &&
+    totals.size === 1 &&
+    totals.has(writtenQuantity.canonicalUnit) &&
+    totals.get(writtenQuantity.canonicalUnit) === writtenQuantity.canonicalNumber
+  ) {
+    return formatResolvedNumber(writtenQuantity.number) + writtenQuantity.unit;
+  }
   const mergedTotals = mergeUnitsOfSameKind(totals);
+  const hasUnrepresentableReciprocalUnit = [...mergedTotals.keys()].some((unit) => {
+    return unit.startsWith('reciprocal:');
+  });
+  if (hasUnrepresentableReciprocalUnit) {
+    return null;
+  }
   const outputTerms = collectOutputTerms(mergedTotals);
   if (dropsPercentageBasis(mergedTotals, outputTerms)) {
     return null;

package/src/value/math.js

@@ -453,6 +453,30 @@ const NON_NEGATIVE_PROPERTIES = new Set([
   'width'
 ]);
 
+/**
+ * Properties whose computed math values must be integers.
+ *
+ * @type {Set<string>}
+ */
+const INTEGER_VALUE_PROPERTIES = new Set([
+  'column-count',
+  'order',
+  'orphans',
+  'widows',
+  'z-index'
+]);
+
+/**
+ * The inclusive bounds that CSS applies to numeric property values after
+ * resolving a math expression.
+ *
+ * @type {Map<string, {minimum?: number, maximum?: number}>}
+ */
+const NUMERIC_PROPERTY_RANGES = new Map([
+  ['column-count', { minimum: 1 }],
+  ['opacity', { minimum: 0, maximum: 1 }]
+]);
+
 /**
  * Matches a value written as a single negative number, with or without the
  * unit or percent sign that follows its digits.
@@ -461,6 +485,14 @@ const NON_NEGATIVE_PROPERTIES = new Set([
  */
 const NEGATIVE_NUMBER_VALUE = /^-(?:\d+|\d*\.\d+)(?:[a-z]+|%)?$/i;
 
+/**
+ * Matches a resolved unitless number whose value can be rounded or clamped by
+ * a property's numeric range.
+ *
+ * @type {RegExp}
+ */
+const UNIT_LESS_NUMBER_VALUE = /^[+-]?(?:\d+|\d*\.\d+)$/;
+
 /**
  * Clamps what a math function resolved to into the range its property
  * accepts. A negative length written out directly makes the declaration
@@ -475,11 +507,39 @@ const NEGATIVE_NUMBER_VALUE = /^-(?:\d+|\d*\.\d+)(?:[a-z]+|%)?$/i;
  * @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)) {
+  const normalizedProperty = String(property).toLowerCase();
+  const acceptsNegativeValues = !NON_NEGATIVE_PROPERTIES.has(normalizedProperty);
+  const hasPropertyRange = NUMERIC_PROPERTY_RANGES.has(normalizedProperty);
+  const range = NUMERIC_PROPERTY_RANGES.get(normalizedProperty) || {};
+  const isNegativeNonNegativeValue = !acceptsNegativeValues && NEGATIVE_NUMBER_VALUE.test(resolvedValue);
+  if (isNegativeNonNegativeValue) {
+    const isUnitlessNumber = UNIT_LESS_NUMBER_VALUE.test(resolvedValue);
+    if (!isUnitlessNumber) {
+      return formatResolvedNumber(range.minimum === undefined ? 0 : range.minimum);
+    }
+    if (!hasPropertyRange && !INTEGER_VALUE_PROPERTIES.has(normalizedProperty)) {
+      return '0';
+    }
+  }
+  if (!hasPropertyRange && !INTEGER_VALUE_PROPERTIES.has(normalizedProperty)) {
     return resolvedValue;
   }
-  return '0';
+  if (!UNIT_LESS_NUMBER_VALUE.test(resolvedValue)) {
+    return resolvedValue;
+  }
+
+  const shouldRoundToInteger = INTEGER_VALUE_PROPERTIES.has(normalizedProperty);
+  let numericValue = Number(resolvedValue);
+  if (shouldRoundToInteger) {
+    numericValue = Math.round(numericValue);
+  }
+  if (range.minimum !== undefined) {
+    numericValue = Math.max(range.minimum, numericValue);
+  }
+  if (range.maximum !== undefined) {
+    numericValue = Math.min(range.maximum, numericValue);
+  }
+  return formatResolvedNumber(numericValue);
 }
 
 /**

package/src/value/minify.js

@@ -9,6 +9,7 @@ import {
   skipQuotedString,
   startsUrlToken
 } from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
 import { evaluateColorMix } from './color-mix.js';
@@ -30,6 +31,12 @@ import {
   simplifyStandaloneCalc
 } from './math.js';
 import { namedColors } from './named-colors.js';
+import {
+  formatShortestNumber,
+  parseNumericParts,
+  scaleByPowerOfTen,
+  shortenNumericText
+} from './numbers.js';
 import { isQuotesNoneEquivalent } from './quotes.js';
 import {
   evaluateRelativeColor,
@@ -38,6 +45,7 @@ import {
 import {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
+  formatCompactNumber,
   formatResolvedNumber,
   hasSubstitutedParts,
   normalizeScaleComponent,
@@ -623,6 +631,40 @@ function isCssDigit (character) {
   return character >= '0' && character <= '9';
 }
 
+/**
+ * Converts OKLCH lightness and chroma percentages when doing so is shorter,
+ * including the separator each spelling needs before the hue.
+ *
+ * @param  {string} value  The normalized arguments of an `oklch()` function.
+ * @return {string}        The arguments with shorter percentage spellings.
+ */
+function minifyOklchPercentages (value) {
+  const slashIndex = value.indexOf('/');
+  const componentsText = slashIndex === -1 ? value : value.slice(0, slashIndex);
+  const alphaText = slashIndex === -1 ? '' : value.slice(slashIndex + 1);
+  const components = componentsText.trim().split(' ');
+  if (components.length !== 3) {
+    return value;
+  }
+
+  let [lightness, chroma, hue] = components;
+  if (lightness.endsWith('%')) {
+    lightness = formatCompactNumber(Number.parseFloat(lightness) / 100);
+  }
+  if (chroma.endsWith('%')) {
+    const convertedChroma = formatCompactNumber(
+      Number.parseFloat(chroma) / 100 * OKLCH_CHROMA_PERCENT_REFERENCE
+    );
+    const convertedWithHueSeparator = convertedChroma.length + 1;
+    if (chroma.length < convertedWithHueSeparator) {
+      return [lightness, chroma + hue].join(' ') + (slashIndex === -1 ? '' : '/' + alphaText);
+    }
+    chroma = convertedChroma;
+  }
+
+  return [lightness, chroma, hue].join(' ') + (slashIndex === -1 ? '' : '/' + alphaText);
+}
+
 /**
  * Converts `oklch()` colors that fall inside the sRGB gamut to their hex
  * equivalent when that is shorter. Out-of-gamut colors have no sRGB
@@ -747,6 +789,9 @@ function convertColorsToHex (val) {
       return integer;
     });
     minified = compactNegativeColorChannelSpacing(func, minified);
+    if (func.toLowerCase() === 'oklch') {
+      minified = minifyOklchPercentages(minified);
+    }
     return func + '(' + minified.trim() + ')';
   });
 
@@ -880,26 +925,89 @@ function convertBackgroundPositionKeywords (value) {
 }
 
 /**
- * Converts millisecond time values to seconds when the result is a
- * shorter string. Values of 0ms become 0s (time must keep a unit),
- * and values at or below 99ms stay in milliseconds (shorter representation).
+ * The power of ten that separates a time in seconds from the same time in
+ * milliseconds, keyed by the lowercased time unit.
  *
- * @param  {string} value  The CSS value string potentially containing ms time values.
- * @return {string}        The value with eligible ms times converted to seconds.
- */
-function convertMillisecondsToSeconds (value) {
-  // Match numeric values followed by the "ms" unit at word boundaries
-  return value.replace(/\b(\d+(?:\.\d+)?)ms\b/gi, (match, amount) => {
-    const milliseconds = parseFloat(amount);
-    if (milliseconds === 0) {
-      return '0s';
-    }
-    // Keep ms for values at or below 99ms (ms representation is shorter)
-    if (milliseconds <= 99) {
-      return match;
+ * @type {{[unit: string]: number}}
+ */
+const TIME_UNIT_POWERS = {
+  s: 0,
+  ms: -3
+};
+
+/**
+ * Rewrites one time token in whichever of seconds or milliseconds spells it
+ * shortest, scientific notation included. Every conversion moves the exponent
+ * of the exact digits, so no precision is lost however large the time is.
+ * Seconds win a tie, and a zero time becomes `0s`.
+ *
+ * @param  {string} text  The text of a dimension token.
+ * @return {string}       The shortest spelling of the same time.
+ */
+function shortenTimeToken (text) {
+  const parts = parseNumericParts(text);
+  const writtenUnit = parts?.unit.toLowerCase();
+  if (!parts || !(writtenUnit in TIME_UNIT_POWERS)) {
+    return text;
+  }
+  if (!parts.digits) {
+    return '0s';
+  }
+  const writtenSpelling = shortenNumericText(text, true);
+  const secondsSpelling = formatShortestNumber(
+    scaleByPowerOfTen(parts, TIME_UNIT_POWERS[writtenUnit], 's'),
+    true
+  );
+  const millisecondsSpelling = formatShortestNumber(
+    scaleByPowerOfTen(parts, TIME_UNIT_POWERS[writtenUnit] - TIME_UNIT_POWERS.ms, 'ms'),
+    true
+  );
+  // Seconds are the conventional unit, so they win a tie with milliseconds
+  const convertedSpelling = millisecondsSpelling.length < secondsSpelling.length ? millisecondsSpelling : secondsSpelling;
+  return convertedSpelling.length <= writtenSpelling.length ? convertedSpelling : writtenSpelling;
+}
+
+/**
+ * Reports whether rewriting a number keeps its numeric type. A number written
+ * with a decimal point or an exponent has the `<number>` type, while one
+ * written with digits alone is an `<integer>`. A custom property can be
+ * substituted into, or registered with, a grammar that tells the two apart, so
+ * `100.0` cannot become `100` there.
+ *
+ * @param  {string}  originalNumber   The number as it was written.
+ * @param  {string}  rewrittenNumber  The number as it would be rewritten.
+ * @return {boolean}                  True when both spellings have the same type.
+ */
+function keepsNumberType (originalNumber, rewrittenNumber) {
+  return isIntegerSpelling(originalNumber) === isIntegerSpelling(rewrittenNumber);
+}
+
+/**
+ * Reports whether a number is spelled as an `<integer>`: digits with an
+ * optional sign, and no decimal point or exponent.
+ *
+ * @param  {string}  number  The number as written.
+ * @return {boolean}         True when the spelling is an integer.
+ */
+function isIntegerSpelling (number) {
+  // An optional sign followed by nothing but digits
+  return /^[+-]?\d+$/.test(number);
+}
+
+/**
+ * Converts each time in a value between seconds and milliseconds, whichever
+ * is the shorter string.
+ *
+ * @param  {string} value  The CSS value string potentially containing time values.
+ * @return {string}        The value with each time in its shortest unit.
+ */
+function convertTimesToShortestUnit (value) {
+  return tokenizeCssValue(value).map((token) => {
+    if (token.type !== 'dimension') {
+      return token.text;
     }
-    return roundCompactNumber(milliseconds / 1000) + 's';
-  });
+    return shortenTimeToken(token.text);
+  }).join('');
 }
 
 /**
@@ -1266,7 +1374,7 @@ function applyPropertyOptimizations (val, property, urlTokens) {
 
   // Convert ms to s for time-related properties when the seconds form is shorter
   if (TIME_PROPERTIES.has(property)) {
-    val = convertMillisecondsToSeconds(val);
+    val = convertTimesToShortestUnit(val);
   }
 
   // Transition: remove " 0s" duration (transition: all 0s -> transition: all)
@@ -1578,12 +1686,17 @@ function computeMinifiedValue (declaration) {
     // 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);
-      const scientificValue = isCustomProperty(declaration.property) ? val : shortenDimensionNumbers(val);
+      const isCustom = isCustomProperty(declaration.property);
+      const scientificValue = isCustom ? val : shortenDimensionNumbers(val, declaration.property);
       const roundedNumber = formatResolvedNumber(rawNumber);
       const losesPrecision = Number(roundedNumber) !== Number(rawNumber);
       // Preserve tiny dimensions whose significant digits would otherwise be
       // rounded away before their shorter exponent form can be considered.
-      val = losesPrecision && scientificValue !== val ? scientificValue : roundedNumber + rawUnit;
+      if (losesPrecision && scientificValue !== val) {
+        val = scientificValue;
+      } else if (!isCustom || keepsNumberType(rawNumber, roundedNumber)) {
+        val = roundedNumber + rawUnit;
+      }
     }
 
     val = lowercaseHexColors(val);
@@ -1632,7 +1745,7 @@ function computeMinifiedValue (declaration) {
     !isCustomProperty(declaration.property)
   );
   if (elidesRedundantSeparators) {
-    val = shortenDimensionNumbers(val);
+    val = shortenDimensionNumbers(val, declaration.property);
     // A property that punctuates its own components already had the whitespace
     // after its closing parentheses taken out, and only the separators its
     // grammar still needs put back, so those are the ones left alone here.

package/src/value/numbers.js

@@ -0,0 +1,154 @@
+/**
+ * @file Reads the numbers of numeric CSS tokens as exact digits and an exponent, so they can be rewritten in their shortest decimal or scientific spelling without any floating point rounding.
+ */
+
+/**
+ * A number taken apart into the pieces its spelling is built from. The digits
+ * never start or end with a zero, so the same value always has the same parts.
+ *
+ * @typedef  {object}  NumericParts
+ * @property {string}  sign          The sign as written, kept so a `+` that tells the number apart from a neighboring token survives, or an empty string for zero.
+ * @property {string}  digits        The significant digits, or an empty string for zero.
+ * @property {number}  exponent      The power of ten the digits, read as an integer, are multiplied by.
+ * @property {string}  unit          The unit or percent sign that follows the number.
+ * @property {boolean} hasExponent   Whether the original spelling used scientific notation.
+ */
+
+/**
+ * Matches the text of a numeric token, capturing its sign, its coefficient,
+ * the exponent of its scientific notation when it has one, and the unit or
+ * percent sign written after it. An exponent needs digits after the `e`, so the
+ * `e` that starts a unit such as `em` is left to the unit.
+ *
+ * @type {RegExp}
+ */
+const NUMERIC_TOKEN_PATTERN = /^([+-]?)(\d*\.\d+|\d+)(?:[eE]([+-]?\d+))?(%|[a-zA-Z_-][\w-]*)?$/;
+
+/**
+ * Takes the text of a numeric token apart into its sign, significant digits,
+ * exponent, and unit.
+ *
+ * @param  {string}            text  The text of a number, percentage, or dimension token.
+ * @return {NumericParts|null}       The parts of the number, or null when the text is not a plain number.
+ */
+function parseNumericParts (text) {
+  const match = text.match(NUMERIC_TOKEN_PATTERN);
+  if (!match) {
+    return null;
+  }
+  const [, sign, coefficient, writtenExponent, unit = ''] = match;
+  const decimalIndex = coefficient.indexOf('.');
+  const fractionalDigitCount = decimalIndex === -1 ? 0 : coefficient.length - decimalIndex - 1;
+  // Leading zeros carry no magnitude, so only the digits after them count
+  const unpaddedDigits = coefficient.replace('.', '').replace(/^0+/, '');
+  // Trailing zeros only scale the digits before them, so they move into the exponent
+  const digits = unpaddedDigits.replace(/0+$/, '');
+  const trailingZeroCount = unpaddedDigits.length - digits.length;
+  return {
+    sign: digits ? sign : '',
+    digits,
+    exponent: Number(writtenExponent || 0) + trailingZeroCount - fractionalDigitCount,
+    unit,
+    hasExponent: writtenExponent !== undefined
+  };
+}
+
+/**
+ * Spells a number out in plain decimal notation, without a leading zero before
+ * its decimal point.
+ *
+ * @param  {NumericParts} parts  The parts of a non-zero number.
+ * @return {string}              The decimal spelling, without the unit.
+ */
+function formatDecimal (parts) {
+  const { sign, digits, exponent } = parts;
+  if (exponent >= 0) {
+    return sign + digits + '0'.repeat(exponent);
+  }
+  const decimalIndex = digits.length + exponent;
+  if (decimalIndex > 0) {
+    return sign + digits.slice(0, decimalIndex) + '.' + digits.slice(decimalIndex);
+  }
+  return sign + '.' + '0'.repeat(-decimalIndex) + digits;
+}
+
+/**
+ * Spells a number out in scientific notation, keeping every significant digit
+ * in an integer mantissa so no decimal point is ever needed.
+ *
+ * @param  {NumericParts} parts  The parts of a non-zero number.
+ * @return {string}              The scientific spelling, without the unit.
+ */
+function formatScientific (parts) {
+  if (parts.exponent === 0) {
+    return parts.sign + parts.digits;
+  }
+  return parts.sign + parts.digits + 'e' + parts.exponent;
+}
+
+/**
+ * Spells a number in the shortest way its grammar allows. Plain decimal
+ * notation wins a tie, since it is the more familiar spelling.
+ *
+ * @param  {NumericParts} parts             The parts of a non-zero number.
+ * @param  {boolean}      allowsScientific  Whether the number may be written in scientific notation.
+ * @return {string}                         The shortest spelling, unit included.
+ */
+function formatShortestNumber (parts, allowsScientific) {
+  const decimal = formatDecimal(parts);
+  if (!allowsScientific) {
+    return decimal + parts.unit;
+  }
+  const scientific = formatScientific(parts);
+  const shortest = scientific.length < decimal.length ? scientific : decimal;
+  return shortest + parts.unit;
+}
+
+/**
+ * Rewrites the text of a numeric token in its shortest spelling. A number
+ * written without an exponent only changes when the new spelling is shorter,
+ * while one written with an exponent is always normalized, which lowercases
+ * the `e`, drops a `+` sign, and folds trailing zeros into the exponent.
+ *
+ * @param  {string}  text              The text of a number, percentage, or dimension token.
+ * @param  {boolean} allowsScientific  Whether the number may be written in scientific notation.
+ * @return {string}                    The shortest equivalent text.
+ */
+function shortenNumericText (text, allowsScientific) {
+  const parts = parseNumericParts(text);
+  if (!parts || !parts.digits) {
+    return text;
+  }
+  if (parts.hasExponent && !allowsScientific) {
+    return text;
+  }
+  const shortest = formatShortestNumber(parts, allowsScientific);
+  if (parts.hasExponent || shortest.length < text.length) {
+    return shortest;
+  }
+  return text;
+}
+
+/**
+ * Scales a number by a power of ten by moving its exponent, which is exact for
+ * any number of digits.
+ *
+ * @param  {NumericParts} parts  The parts of the number.
+ * @param  {number}       power  The power of ten to multiply by.
+ * @param  {string}       unit   The unit the scaled number is written with.
+ * @return {NumericParts}        The parts of the scaled number.
+ */
+function scaleByPowerOfTen (parts, power, unit) {
+  return {
+    ...parts,
+    exponent: parts.exponent + power,
+    unit
+  };
+}
+
+export {
+  formatShortestNumber,
+  parseNumericParts,
+  scaleByPowerOfTen,
+  shortenNumericText
+};

package/src/value/tokens.js

@@ -4,6 +4,8 @@
 
 import { tokenizeCssValue } from '../parser/tokenizer.js';
 
+import { shortenNumericText } from './numbers.js';
+
 /**
  * One token of a value, as the tokenizer reads it.
  *
@@ -142,36 +144,92 @@ function elideRedundantSeparators (value, elidesAfterSelfEndingTokens = true) {
 }
 
 /**
- * Shortens decimal dimension and percentage tokens without changing their
- * digits. Unitless numbers stay untouched because integer grammars reject
+ * Properties whose whole value is a unitless `<number>` rather than an
+ * `<integer>`, so a number written directly in them may use scientific
+ * notation.
+ *
+ * @type {Set<string>}
+ */
+const NUMBER_VALUED_PROPERTIES = new Set([
+  'animation-iteration-count',
+  'fill-opacity',
+  'flex-grow',
+  'flex-shrink',
+  'flood-opacity',
+  'opacity',
+  'stop-opacity',
+  'stroke-miterlimit',
+  'stroke-opacity',
+  'tab-size'
+]);
+
+/**
+ * Functions whose arguments are unitless `<number>`s rather than `<integer>`s,
+ * so the numbers written directly inside them may use scientific notation.
+ *
+ * @type {Set<string>}
+ */
+const NUMBER_ARGUMENT_FUNCTIONS = new Set([
+  'matrix',
+  'matrix3d',
+  'scale',
+  'scale3d',
+  'scalex',
+  'scaley',
+  'scalez'
+]);
+
+/**
+ * Reports whether a unitless number token sits where only a `<number>` is
+ * accepted, either directly in a number-valued property or directly inside a
+ * function that takes number arguments.
+ *
+ * @param  {string|null} enclosingFunction  The lowercased name of the innermost function holding the token, or null at the top level.
+ * @param  {string}      property           The lowercased property the value belongs to.
+ * @return {boolean}                        Whether the number may use scientific notation.
+ */
+function isNumberTypedPosition (enclosingFunction, property) {
+  if (enclosingFunction === null) {
+    return NUMBER_VALUED_PROPERTIES.has(property);
+  }
+  return NUMBER_ARGUMENT_FUNCTIONS.has(enclosingFunction);
+}
+
+/**
+ * Shortens the numeric tokens of a value into their shortest spelling,
+ * including scientific notation. Dimensions and percentages are always
+ * `<number>` based, but a unitless number is only shortened where its grammar
+ * is known to take a `<number>`, because `<integer>` grammars reject
  * scientific notation.
  *
- * @param  {string} value  The CSS value.
- * @return {string}        The value with shorter numeric spellings.
+ * @param  {string} value       The CSS value.
+ * @param  {string} [property]  The property the value belongs to.
+ * @return {string}             The value with shorter numeric spellings.
  */
-function shortenDimensionNumbers (value) {
+function shortenDimensionNumbers (value, property = '') {
+  const normalizedProperty = property.toLowerCase();
+  const functionStack = [];
   return tokenizeCssValue(value).map((token) => {
-    if (token.type !== 'dimension' && token.type !== 'percentage') {
+    if (token.type === 'function') {
+      functionStack.push(token.text.slice(0, -1).toLowerCase());
       return token.text;
     }
-    // Capture a decimal coefficient and its unit, excluding existing exponents.
-    const match = token.text.match(/^([+-]?)(\d*\.\d+|\d+)([%a-z]+)$/i);
-    if (!match) {
+    if (token.text === '(') {
+      functionStack.push('');
       return token.text;
     }
-    const [, sign, coefficient, unit] = match;
-    const decimalIndex = coefficient.indexOf('.');
-    const fractionalDigits = decimalIndex === -1 ? 0 : coefficient.length - decimalIndex - 1;
-    const digits = coefficient.replace('.', '');
-    // Leading zeros carry no magnitude; trailing zeros move into the exponent.
-    const significantDigits = digits.replace(/^0+/, '').replace(/0+$/, '');
-    if (!significantDigits) {
+    if (token.text === ')') {
+      functionStack.pop();
       return token.text;
     }
-    const trailingZeros = digits.length - digits.replace(/0+$/, '').length;
-    const exponent = trailingZeros - fractionalDigits;
-    const scientific = sign + significantDigits + 'e' + exponent + unit;
-    return scientific.length < token.text.length ? scientific : token.text;
+    if (token.type === 'dimension' || token.type === 'percentage') {
+      return shortenNumericText(token.text, true);
+    }
+    const enclosingFunction = functionStack.length ? functionStack[functionStack.length - 1] : null;
+    if (token.type === 'number' && isNumberTypedPosition(enclosingFunction, normalizedProperty)) {
+      return shortenNumericText(token.text, true);
+    }
+    return token.text;
   }).join('');
 }