@thejaredwilcurt/csslop 0.0.21 → 0.0.22

package/README.md

@@ -20,16 +20,23 @@
 
 * All tests pass.
 * Several new tests were created upstream, and some existing tests were improved/fixed upstream (all manually by me, no AI used).
-* The `src` folder is 100% vibe coded, and despite passing all tests, is almost certainly not worth using. Though if you do, and you find issues, you can isolate the problem and [compare against the correct output of real minifiers](https://TheJaredWilcurt.com/playground), then use that to create a [new test upstream](https://github.com/keithamus/css-minify-tests/issues) for the AI's to be forced to pass.
+* The `src` folder is 100% vibe coded, and despite passing all tests, is absolutely not worth using as CSSLOP often outputs invalid CSS syntax. But that's the point, any time it outputs something wrong, that's an indication of a missing test upstream.
+* I've made [an online playground](https://TheJaredWilcurt.com/playground) of all modern CSS minifiers so you can compare and isolate the problem, then use that to create a [new test upstream](https://github.com/keithamus/css-minify-tests/issues) for the AI's to be forced to pass.
 * No AI generated code exists outside of the `src` folder, this README, for example, is 100% human crafted.
 
-**AI's used:**
+**AI's used during initial library creation:**
 
 * Claude Opus 4.6 (Thinking)
 * Claude Sonnet 4.6 (Thinking)
 * Gemini 3.1 Pro (High Thinking)
 * GPT-5.4 High (Thinking)
 
+These were the latest and greatest models at the time.
+
+**AI's used during maintenance:**
+
+As new tests are created upstream I use whatever the latest models are, like "Claude 5 High Thinking".
+
 These tools were prompted to pass the tests in the `/copiedTests` folder that came from `keithamus/css-minify-tests`.
 
 **Summary of project phases:**
@@ -51,8 +58,8 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
 1. **Test improvements:** Throughout this process, as upstream tests were improved or created, they were pulled in, and the AI was instructed to pass those new tests with prompts like, "Run `npm t` and fix all failing tests by modifying files in `src`."
 1. **Publish:** I had the AI pick a name for the library. Then I published it to npm. It was added to the `css-minify-tests` repo as evidence that it is possible to get all tests to pass and none are conflicting.
 1. **Real world testing:** I created a [separate repo](https://github.com/TheJaredWilcurt/real-world-css-libraries) with copies of 150+ real-world CSS files from open source licensed repos. Then ran all of those CSS files through CSSLOP. One file found a bug in CSSLOP, so I had Claude fix it with a one-line change. See: [`realWorldResults.json`](https://github.com/TheJaredWilcurt/csslop/blob/main/realWorldResults.json) for how well the library actually does on real CSS files. Examining the output has lead to many upstream improvements to the test suite.
-1. **Failed Performance improvements:** CSSLOP takes 3 hours to minify all the real-world tests. Which averages to 144 seconds per test. In reality, most tests take 0-50ms, but there are a handful of large (2-5MB) CSS files that can take over an hour. I asked Claude to improve performance, and it did so bad I had to reject all changes. Then I gave GPT a chance and it took a safer approach. I Had Claude clean up the messy code after the fact. Then bench marked it and it was somehow even slower (+20 min), and also the outputs weren't as small as before (+0.05%). Details below.
-1. **Playground:** Created an [online playground](https://TheJaredWilcurt.com/csslop) (no AI used) for others to more easily test things out and find issues that can be fixed upstream.
+1. **Failed Performance improvements:** CSSLOP takes 3 hours to minify all the real-world tests. Which averages to 144 seconds per test. In reality, most tests take 0-50ms, but there are a handful of large (2-5MB) CSS files that can take over an hour. I asked Claude to improve performance, and it did so bad I had to reject all changes. Then I gave GPT a chance and it took a safer approach. I Had Claude clean up the messy code after the fact. Then benchmarked it and it was somehow even slower (+20 min), and also the outputs weren't as small as before (+0.05%). Details below. **Update:** The "Real world" library has grown. It now takes over 7 hours to complete.
+1. **Playground:** Created an [online playground](https://TheJaredWilcurt.com/csslop) (no AI used) for others to more easily test things out and find and create new upstream tests.
 
 
 **Full Notes of AI Experiment:**
@@ -166,7 +173,7 @@ These tools were prompted to pass the tests in the `/copiedTests` folder that ca
   * Okay, so GPT's changes look promising, it's passing all tests, passing the linter, and it added some new files related to worker threads. Though it did out out of using promises, because it didn't want to change the entrypoint function of the library to be async. This would be a breaking change for library consumers, but I was aware of that when I told it to do it and it ignored me, so whatever.
   * On to actually testing it! Before the optimizations, the 150 files took 3 hours and 4 minutes to run, and now with the new and improved optimizations, it only takes 3 hours and 20 minutes. Also the total minified filesize increased by 0.05%. So that's cool.... Dumping those changes.
 * **KILL ALL HUMANS:**
-  * More libraries were added to the "Real World CSS Libraries". Now when I run `npm run real` to minify all of them, it ends up taking about 7 hours to run. This is because the optimizations CSSLOP performs do not scale linearly with more CSS rules, they scale exponentially. There are a handfull of large CSS files that each take about an hour to complete, where as the smaller files all go by pretty fast.
+  * More libraries were added to the "Real World CSS Libraries". Now when I run `npm run real` to minify all of them, it ends up taking about 7 hours to run. This is because the optimizations CSSLOP performs do not scale linearly with more CSS rules, they scale exponentially. There are a handful of large CSS files that each take about an hour to complete, where as the smaller files all go by pretty fast.
   * When the upstream `css-minify-tests` adds a new test to their suite, I pull it in and have the AI update the library to pass that new test. For some reason, the AI notices `/tests/realworld.test.js`, sees that `npm run real` will execute that, then sees it has permission to run `npm run *`, so it takes it upon itself to run this SEVEN HOUR LONG COMMAND, without anyone asking it to...
   * This has happened several times. Me saying "Don't run `npm run real`", doesn't actually stop it from doing it. I also tried "Do not, under any circumstance, run `npm run real`.". And it *mostly* stopped doing it... but not completely.
   * This has lead me to update all my prompts to now end with: "DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",

package/src/declarations/css-wide-keywords.js

@@ -0,0 +1,285 @@
+/**
+ * @file Rewrites longhand declarations that share a CSS-wide keyword into a shorthand carrying that keyword, followed by the longhands that override it.
+ */
+
+import { minifyValue } from '../value/minify.js';
+
+import {
+  CSS_WIDE_KEYWORDS,
+  shorthandMap,
+  shorthandOverrideMap
+} from './config.js';
+
+/**
+ * Expands a property into the set of leaf longhands it ultimately sets, so that
+ * different groupings of the same box, such as `border-width` and
+ * `border-top-width`, can be compared for equivalent coverage.
+ *
+ * @param  {string} property        The property name to expand.
+ * @param  {Set}    leafProperties  The set collecting the leaf longhand names.
+ * @return {Set}                    The set of leaf longhand property names.
+ */
+function expandToLeafProperties (property, leafProperties = new Set()) {
+  const longhands = shorthandMap[property];
+  if (!longhands) {
+    leafProperties.add(property);
+    return leafProperties;
+  }
+  for (const longhand of longhands) {
+    expandToLeafProperties(longhand, leafProperties);
+  }
+  return leafProperties;
+}
+
+/**
+ * Checks whether a group of longhands sets every leaf longhand that the
+ * shorthand sets. A CSS-wide keyword may only move into the shorthand when the
+ * group covers all of them, otherwise the keyword would also land on a longhand
+ * the author never declared.
+ *
+ * @param  {string}  shorthandName  The target shorthand property name.
+ * @param  {Array}   properties     The longhand property names in the group.
+ * @return {boolean}                Whether the group covers the whole shorthand.
+ */
+function coversEveryLonghandOfShorthand (shorthandName, properties) {
+  const coveredLeaves = new Set();
+  for (const property of properties) {
+    expandToLeafProperties(property, coveredLeaves);
+  }
+  return [...expandToLeafProperties(shorthandName)].every((leafProperty) => {
+    return coveredLeaves.has(leafProperty);
+  });
+}
+
+/**
+ * @typedef  {object}  LonghandEntry
+ * @property {object}  declaration    The original declaration object.
+ * @property {number}  index          The declaration's index within the rule.
+ * @property {string}  property       The longhand property name.
+ * @property {string}  text           The minified `property:value` text.
+ * @property {string}  value          The minified value, without any `!important`.
+ * @property {boolean} isImportant    Whether the declaration carries `!important`.
+ */
+
+/**
+ * Collects the declarations of a rule that set one of a shorthand's longhands,
+ * in source order.
+ *
+ * @param  {Array}  declarations   The declarations of a single rule.
+ * @param  {string} shorthandName  The shorthand whose longhands to collect.
+ * @return {Array}                 The matching longhand entries, in source order.
+ */
+function collectLonghandEntries (declarations, shorthandName) {
+  const longhands = shorthandMap[shorthandName];
+  const entries = [];
+  declarations.forEach((declaration, index) => {
+    if (!declaration.property || !longhands.includes(declaration.property)) {
+      return;
+    }
+    const minifiedValue = minifyValue(declaration);
+    const isImportant = minifiedValue.includes('!important');
+    entries.push({
+      declaration,
+      index,
+      property: declaration.property,
+      text: declaration.property + ':' + minifiedValue,
+      value: minifiedValue.replace('!important', '').trim(),
+      isImportant
+    });
+  });
+  return entries;
+}
+
+/**
+ * Checks whether a group declares the same property more than once, which
+ * happens when an intentional fallback was kept. Rewriting such a group would
+ * drop one of the two declarations, so it is left alone.
+ *
+ * @param  {Array}   entries  The longhand entries of the group.
+ * @return {boolean}          Whether any property appears more than once.
+ */
+function hasRepeatedProperty (entries) {
+  const seenProperties = new Set();
+  return entries.some((entry) => {
+    if (seenProperties.has(entry.property)) {
+      return true;
+    }
+    seenProperties.add(entry.property);
+    return false;
+  });
+}
+
+/**
+ * Resolves the `!important` suffix the shorthand must carry. A group that mixes
+ * important and normal longhands cannot be rewritten, because the shorthand
+ * would either lose or gain priority over the longhands it replaces.
+ *
+ * @param  {Array}       entries  The longhand entries of the group.
+ * @return {string|null}          The suffix to append, or null when the group cannot be rewritten.
+ */
+function resolveImportantSuffix (entries) {
+  const allImportant = entries.every((entry) => {
+    return entry.isImportant;
+  });
+  if (allImportant) {
+    return '!important';
+  }
+  const noneImportant = entries.every((entry) => {
+    return !entry.isImportant;
+  });
+  if (noneImportant) {
+    return '';
+  }
+  return null;
+}
+
+/**
+ * Resolves the single CSS-wide keyword shared by the longhands that use one.
+ * A group with no keyword has nothing to hoist, and a group mixing different
+ * keywords has no single value the shorthand could carry.
+ *
+ * @param  {Array}       entries  The longhand entries of the group.
+ * @return {string|null}          The shared keyword, or null when there is none.
+ */
+function resolveSharedKeyword (entries) {
+  const keywords = entries.filter((entry) => {
+    return CSS_WIDE_KEYWORDS.has(entry.value.toLowerCase());
+  }).map((entry) => {
+    return entry.value.toLowerCase();
+  });
+  if (!keywords.length) {
+    return null;
+  }
+  const isSharedByAll = keywords.every((keyword) => {
+    return keyword === keywords[0];
+  });
+  if (!isSharedByAll) {
+    return null;
+  }
+  return keywords[0];
+}
+
+/**
+ * Checks whether a property the shorthand also resets, such as `border-image`
+ * for `border`, is declared before the point where the shorthand would be
+ * inserted. Inserting the shorthand there would discard that declaration.
+ *
+ * @param  {Array}   declarations    The declarations of a single rule.
+ * @param  {string}  shorthandName   The target shorthand property name.
+ * @param  {number}  insertionIndex  The index the shorthand would be inserted at.
+ * @return {boolean}                 Whether an earlier declaration would be discarded.
+ */
+function resetsEarlierDeclaration (declarations, shorthandName, insertionIndex) {
+  const resetProperties = shorthandOverrideMap[shorthandName] || [];
+  if (!resetProperties.length) {
+    return false;
+  }
+  return declarations.slice(0, insertionIndex).some((declaration) => {
+    return resetProperties.includes(declaration.property);
+  });
+}
+
+/**
+ * Rewrites one longhand group into a shorthand holding the shared CSS-wide
+ * keyword, followed by the longhands that override it, when that is shorter
+ * than the group of longhands it replaces.
+ *
+ * @param  {Array}      declarations   The declarations of a single rule.
+ * @param  {string}     shorthandName  The target shorthand property name.
+ * @return {Array|null}                The rewritten declarations, or null when the rewrite does not apply.
+ */
+function rewriteGroupAsKeywordShorthand (declarations, shorthandName) {
+  const shorthandAlreadyExists = declarations.some((declaration) => {
+    return declaration.property === shorthandName;
+  });
+  if (shorthandAlreadyExists) {
+    return null;
+  }
+
+  const entries = collectLonghandEntries(declarations, shorthandName);
+  if (entries.length < 2 || hasRepeatedProperty(entries)) {
+    return null;
+  }
+  const properties = entries.map((entry) => {
+    return entry.property;
+  });
+  if (!coversEveryLonghandOfShorthand(shorthandName, properties)) {
+    return null;
+  }
+
+  const importantSuffix = resolveImportantSuffix(entries);
+  const sharedKeyword = resolveSharedKeyword(entries);
+  if (importantSuffix === null || !sharedKeyword) {
+    return null;
+  }
+
+  const insertionIndex = entries[0].index;
+  if (resetsEarlierDeclaration(declarations, shorthandName, insertionIndex)) {
+    return null;
+  }
+
+  // The longhands whose value is not the shared keyword have to be restated
+  // after the shorthand, because the shorthand also set them to the keyword.
+  const overrideEntries = entries.filter((entry) => {
+    return entry.value.toLowerCase() !== sharedKeyword;
+  });
+  const shorthandDeclaration = {
+    property: shorthandName,
+    value: sharedKeyword + importantSuffix,
+    isAssembledShorthand: true
+  };
+  const rewrittenLength = [shorthandDeclaration.property + ':' + shorthandDeclaration.value, ...overrideEntries.map((entry) => {
+    return entry.text;
+  })].join(';').length;
+  const longhandLength = entries.map((entry) => {
+    return entry.text;
+  }).join(';').length;
+  if (rewrittenLength >= longhandLength) {
+    return null;
+  }
+
+  const groupIndexes = new Set(entries.map((entry) => {
+    return entry.index;
+  }));
+  const result = [];
+  declarations.forEach((declaration, index) => {
+    if (index === insertionIndex) {
+      result.push(shorthandDeclaration);
+      for (const entry of overrideEntries) {
+        result.push(entry.declaration);
+      }
+      return;
+    }
+    if (groupIndexes.has(index)) {
+      return;
+    }
+    result.push(declaration);
+  });
+  return result;
+}
+
+/**
+ * Hoists a CSS-wide keyword such as `inherit` out of a group of longhands into
+ * their shorthand. A CSS-wide keyword is only valid as a declaration's whole
+ * value, so `border-style:inherit;border-color:inherit;border-width:2px` cannot
+ * become `border:2px inherit inherit`. It can however become `border:inherit`
+ * followed by `border-width:2px`, which inherits every border property and then
+ * overrides the one that differs.
+ *
+ * @param  {Array} declarations  The declarations of a single rule.
+ * @return {Array}               The declarations, with eligible groups rewritten.
+ */
+function hoistCssWideKeywordsIntoShorthands (declarations) {
+  let result = declarations;
+  // Shorthands are visited in declaration order, so the widest shorthand of a
+  // family is rewritten before the narrower shorthands it contains.
+  for (const shorthandName of Object.keys(shorthandMap)) {
+    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName);
+    if (rewritten) {
+      result = rewritten;
+    }
+  }
+  return result;
+}
+
+export { hoistCssWideKeywordsIntoShorthands };

package/src/declarations/process.js

@@ -8,6 +8,7 @@ import { hasInvalidQuotesCount } from '../value/quotes.js';
 import { absorbBackgroundLonghandsIntoShorthand } from './background.js';
 import { collapseBorderTrioWithPerEdgeColor } from './border.js';
 import { shorthandMap } from './config.js';
+import { hoistCssWideKeywordsIntoShorthands } from './css-wide-keywords.js';
 import {
   getMergeProps,
   tryMergeToShorthand
@@ -304,6 +305,7 @@ function processDeclarations (declarations, context) {
   result = removeLonghandsOverriddenByShorthands(result);
   result = absorbBackgroundLonghandsIntoShorthand(result);
   result = mergeLonghandsIntoShorthands(result, context);
+  result = hoistCssWideKeywordsIntoShorthands(result);
   result = collapseBorderTrioWithPerEdgeColor(result);
 
   return orderDeclarations(result);

package/src/index.js

@@ -34,7 +34,10 @@ import {
   removeEmptyRules,
   removeOverriddenMultiSelectorProperties
 } from './rules/optimize.js';
-import { stringifyRule } from './rules/stringify.js';
+import {
+  removeRedundantLayerStatementSemicolon,
+  stringifyRule
+} from './rules/stringify.js';
 import { minifyValue } from './value/minify.js';
 
 /**
@@ -256,7 +259,7 @@ export const minifyCSS = function (input) {
       output.push(stringifyRule(rule, context));
     }
 
-    const mergedOutput = mergeAdjacentRulesWithIdenticalBodies(output);
+    const mergedOutput = removeRedundantLayerStatementSemicolon(mergeAdjacentRulesWithIdenticalBodies(output));
 
     clearActiveCharset();
     return restoreEscapeSequences(mergedOutput.join(''));

package/src/rules/normalize.js

@@ -48,6 +48,18 @@ function unescapeSelector (selector) {
   });
 }
 
+/**
+ * Normalizes a `@layer` cascade layer name list by trimming it and removing the
+ * optional whitespace that may surround the commas separating the layer names.
+ *
+ * @param  {string} layerNames  The raw layer name list (e.g. "reset, base,\n  components").
+ * @return {string}             The normalized comma-separated layer name list.
+ */
+function normalizeLayerNames (layerNames) {
+  // Collapse the optional whitespace surrounding the commas between layer names
+  return String(layerNames ?? '').trim().replace(/\s*,\s*/g, ',');
+}
+
 /**
  * Normalizes a `@media` query string by collapsing whitespace, stripping the default "all and" prefix, and converting min/max-width to range syntax.
  *
@@ -112,6 +124,7 @@ function canUnwrapSupports (supports) {
 
 export {
   canUnwrapSupports,
+  normalizeLayerNames,
   normalizeMedia,
   normalizeSupports,
   unescapeIdent,

package/src/rules/optimize.js

@@ -4,7 +4,10 @@
 
 import { escapeRegexString } from '../utilities.js';
 
-import { normalizeMedia } from './normalize.js';
+import {
+  normalizeLayerNames,
+  normalizeMedia
+} from './normalize.js';
 
 /**
  * Expands rules that contain only nested sub-rules into flat rules with combined selectors, enabling further merging when the combined selectors already exist elsewhere.
@@ -786,7 +789,7 @@ function mergeLayerRules (rules, mergeSelectorRules) {
   const result = [];
   for (const rule of rules) {
     if (rule.type === 'layer') {
-      const layerName = rule.layer || '';
+      const layerName = normalizeLayerNames(rule.layer);
       if (rule.rules && rule.rules.length > 0) {
         if (layerName && layerBlockMap.has(layerName)) {
           layerBlockMap.get(layerName).rules.push(...rule.rules);

package/src/rules/stringify.js

@@ -11,6 +11,7 @@ import {
 } from './custom-properties.js';
 import {
   canUnwrapSupports,
+  normalizeLayerNames,
   normalizeMedia,
   normalizeSupports,
   unescapeIdent,
@@ -40,6 +41,34 @@ function stringifyDeclarations (declarations) {
     .join(';');
 }
 
+/**
+ * Matches a complete `@layer` statement, which declares layer names without a
+ * block and ends with the semicolon that separates it from the CSS that follows
+ * it. Layer names are identifiers, so any block, string, or function character
+ * means the string is something other than a lone layer statement.
+ *
+ * @type {RegExp}
+ */
+const LAYER_STATEMENT_PATTERN = /^@layer [^{}();'"]*;$/;
+
+/**
+ * Removes the semicolon of a trailing `@layer` statement, since that semicolon
+ * only exists to separate the statement from whatever comes after it. When the
+ * statement ends a stylesheet or a block, there is nothing left to separate.
+ *
+ * @param  {Array} ruleStrings  The stringified rules, in output order.
+ * @return {Array}              The stringified rules, without the redundant semicolon.
+ */
+function removeRedundantLayerStatementSemicolon (ruleStrings) {
+  const lastIndex = ruleStrings.length - 1;
+  if (lastIndex < 0 || !LAYER_STATEMENT_PATTERN.test(ruleStrings[lastIndex])) {
+    return ruleStrings;
+  }
+  const result = [...ruleStrings];
+  result[lastIndex] = result[lastIndex].slice(0, -1);
+  return result;
+}
+
 /**
  * Recursively stringifies child rules into a concatenated minified CSS string.
  *
@@ -48,9 +77,10 @@ function stringifyDeclarations (declarations) {
  * @return {string}          The concatenated minified CSS for all child rules.
  */
 function stringifyChildRules (rules, context) {
-  return (rules || []).map((childRule) => {
+  const ruleStrings = (rules || []).map((childRule) => {
     return stringifyRule(childRule, context);
-  }).join('');
+  }).filter(Boolean);
+  return removeRedundantLayerStatementSemicolon(ruleStrings).join('');
 }
 /**
  * Minifies a `@function` prelude (signature) by collapsing whitespace around
@@ -341,9 +371,7 @@ function stringifyRule (rule, context) {
     const renderedDeclarations = mediaDeclarations.map((declaration) => {
       return [unescapeIdent(declaration.property), ':', minifyValue(declaration)].join('');
     }).join(';');
-    const renderedRules = subRules.map((childRule) => {
-      return stringifyRule(childRule, context);
-    }).join('');
+    const renderedRules = stringifyChildRules(subRules, context);
     const children = [renderedDeclarations, renderedRules].filter(Boolean).join('');
     if (!children) {
       return '';
@@ -474,10 +502,11 @@ function stringifyRule (rule, context) {
   }
 
   if (rule.type === 'layer') {
+    const layerNames = normalizeLayerNames(rule.layer);
     if (rule.rules && rule.rules.length) {
-      return '@layer ' + (rule.layer || '') + '{' + stringifyChildRules(rule.rules, context) + '}';
+      return '@layer ' + layerNames + '{' + stringifyChildRules(rule.rules, context) + '}';
     } else {
-      return '@layer ' + rule.layer + ';';
+      return '@layer ' + layerNames + ';';
     }
   }
 
@@ -635,4 +664,7 @@ function stringifyRule (rule, context) {
   return ''; // Ignore unknown for now
 }
 
-export { stringifyRule };
+export {
+  removeRedundantLayerStatementSemicolon,
+  stringifyRule
+};

package/src/value/minify.js

@@ -30,6 +30,7 @@ import {
 } from './relative-colors.js';
 import {
   collapseShorthandParts,
+  convertAbsoluteLengthToPx,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,
@@ -711,6 +712,49 @@ function convertMillisecondsToSeconds (value) {
   });
 }
 
+/**
+ * Matches an absolute CSS length token: an optionally signed number followed by
+ * an absolute length unit. The lookbehind rejects digits that belong to a larger
+ * identifier, such as the custom property name in `var(--size-2in)`, where the
+ * digits and unit do not form a value of their own.
+ *
+ * @type {RegExp}
+ */
+const ABSOLUTE_LENGTH_PATTERN = /(?<![\w#.%-])(-?(?:\d+|\d*\.\d+))(pt|pc|in|cm|mm|q)\b/gi;
+
+/**
+ * The largest difference in pixels that a rounded conversion may introduce and
+ * still count as exact, which allows for binary floating point error without
+ * allowing a visible change to the rendered length.
+ *
+ * @type {number}
+ */
+const PIXEL_ROUNDING_TOLERANCE = 1e-6;
+
+/**
+ * Converts absolute length values (pt, pc, in, cm, mm, Q) to their pixel
+ * equivalent when the conversion is exact and the pixel form is no longer than
+ * the original. Normalizing to px also improves compression by reducing the
+ * number of distinct unit strings in the output.
+ *
+ * @param  {string} value  A CSS value segment, outside strings and urls.
+ * @return {string}        The segment with eligible absolute lengths converted to px.
+ */
+function convertAbsoluteLengthsToPx (value) {
+  return value.replace(ABSOLUTE_LENGTH_PATTERN, (token, amount, unit) => {
+    const pixels = convertAbsoluteLengthToPx(amount, unit);
+    if (pixels === null) {
+      return token;
+    }
+    const converted = roundCompactNumber(pixels) + 'px';
+    const isExact = Math.abs(parseFloat(converted) - pixels) < PIXEL_ROUNDING_TOLERANCE;
+    if (!isExact || converted.length > token.length) {
+      return token;
+    }
+    return converted;
+  });
+}
+
 /**
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
@@ -867,11 +911,11 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
     });
   }
 
-  if (property === 'font-size') {
-    // Convert point (pt) font-size values to their pixel (px) equivalent
-    val = val.replace(/^(-?(?:\d+|\d*\.\d+))pt$/i, (match, amount) => {
-      return roundCompactNumber(parseFloat(amount) * (96 / 72)) + 'px';
-    });
+  // Custom properties hold an arbitrary token stream rather than a typed value,
+  // so a unit-like token in one is not necessarily a length.
+  const isCustomProperty = Boolean(property) && property.startsWith('--');
+  if (!isCustomProperty) {
+    val = replaceOutsideStringsAndUrls(val, convertAbsoluteLengthsToPx);
   }
 
   if (property === 'syntax') {