@thejaredwilcurt/csslop 0.0.52 → 0.0.54

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -32,15 +32,15 @@
     "codemirror": "^6.0.2",
     "eslint": "^10.14.0",
     "eslint-config-tjw-base": "^5.0.0",
-    "eslint-config-tjw-import-x": "^1.0.1",
+    "eslint-config-tjw-import-x": "^1.0.2",
     "eslint-config-tjw-jsdoc": "^2.0.1",
-    "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^65.4.2",
+    "eslint-plugin-import-x": "^4.18.0",
+    "eslint-plugin-jsdoc": "^65.4.5",
     "fflate": "^0.8.3",
     "globals": "^17.14.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.9",
-    "vite": "^8.3.5"
+    "vite": "^8.3.6"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -61,7 +61,7 @@
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.2.1"
+      "version": "12.2.2"
     }
   }
 }

package/src/declarations/border.js

@@ -12,13 +12,34 @@ import {
 
 import {
   BORDER_EDGE_PROPERTIES,
-  CSS_WIDE_KEYWORDS
+  CSS_WIDE_KEYWORDS,
+  expandToLeafProperties
 } from './config.js';
 import { collectDeclaredProperties } from './lookup.js';
 import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 const BORDER_TRIO_PROPERTIES = ['border-width', 'border-style', 'border-color'];
 
+/**
+ * Every property the `border` shorthand sets: the physical edge shorthands, such
+ * as `border-top`, and the longhands they expand into, such as `border-top-width`.
+ * A declaration of one of them beside the trio competes with the shorthand.
+ *
+ * @type {Set<string>}
+ */
+const BORDER_SHORTHAND_PROPERTIES = new Set([
+  ...BORDER_EDGE_PROPERTIES,
+  ...expandToLeafProperties('border')
+]);
+
+/**
+ * Matches the logical border longhands, such as `border-inline-start-color`
+ * and `border-block-width`, which set the same edges as the physical ones.
+ *
+ * @type {RegExp}
+ */
+const LOGICAL_BORDER_PATTERN = /^border-(?:inline|block)(?:-|$)/;
+
 /**
  * The keywords that state a border line style.
  *
@@ -140,7 +161,7 @@ function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
         return entry.property === property;
       }).length !== 1;
     }
-    return property === 'border' || (property.startsWith('border-') && !property.startsWith('border-image'));
+    return property === 'border' || BORDER_SHORTHAND_PROPERTIES.has(property) || LOGICAL_BORDER_PATTERN.test(property);
   });
   if (hasCompetingBorderWrites) {
     return declarations;
@@ -179,10 +200,14 @@ function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
   }
 
   const [widthComponents, styleComponents, colorComponents] = componentsByProperty;
+  // The `border` shorthand resets its color to currentcolor, so a color that
+  // states currentcolor is left out of the shorthand rather than repeated.
+  const statesShorthandColor = colorComponents.length === 1 &&
+    colorComponents[0].toLowerCase() !== INITIAL_BORDER_EDGE_PARTS['border-color'];
   const borderValue = buildBorderShorthandValue(
     widthComponents.length === 1 ? width : '',
     styleComponents.length === 1 ? style : '',
-    colorComponents.length === 1 ? colorComponents[0] : ''
+    statesShorthandColor ? colorComponents[0] : ''
   ) + importantSuffix;
   const overrides = BORDER_TRIO_PROPERTIES.flatMap((property, index) => {
     if (componentsByProperty[index].length === 1) {

package/src/declarations/process.js

@@ -186,6 +186,17 @@ function usesVendorPrefixedDisplayValue (value) {
   });
 }
 
+/**
+ * Checks if a declaration value contains the IE6-IE9 double !important hack.
+ *
+ * @param  {string}  value  The minified CSS value string.
+ * @return {boolean}        Whether the value contains double !important.
+ */
+function hasDoubleImportant (value) {
+  // Match !important appearing twice in the value
+  return /!important.*!important/.test(value);
+}
+
 /**
  * Normalizes a vendor-prefixed display value to its standard equivalent.
  *
@@ -366,6 +377,11 @@ function deduplicateDeclarations (declarations) {
       continue;
     }
 
+    // IE6-IE9 double !important properties are invalid and should be removed
+    if (hasDoubleImportant(minifiedValue)) {
+      continue;
+    }
+
     // A vendor-prefixed property that repeats the value of its unprefixed
     // form is dead code for browsers that read the unprefixed one
     if (propertyName.startsWith('-') && !propertyName.startsWith('--')) {

package/src/rules/normalize.js

@@ -141,6 +141,17 @@ function normalizeLayerNames (layerNames) {
   return String(layerNames ?? '').trim().replace(/\s*,\s*/g, ',');
 }
 
+/**
+ * Checks if a media query contains the IE10/IE11 exclusive `\0` hack.
+ *
+ * @param  {string}  media  The media query string to check.
+ * @return {boolean}        True if the media query contains the IE hack.
+ */
+function containsIEHack (media) {
+  // Match the \0 character which is used as an IE10/IE11 exclusive hack
+  return /\\0/.test(media);
+}
+
 /**
  * Normalizes a `@media` query string by collapsing whitespace, stripping the default "all and" prefix, and converting min/max-width to range syntax.
  *
@@ -236,6 +247,7 @@ function canUnwrapSupports (supports) {
 
 export {
   canUnwrapSupports,
+  containsIEHack,
   normalizeLayerNames,
   normalizeMedia,
   normalizeRuleSelectors,

package/src/rules/optimize/at-rules.js

@@ -3,10 +3,26 @@
  */
 
 import {
+  containsIEHack,
   normalizeLayerNames,
   normalizeMedia
 } from '../normalize.js';
 
+/**
+ * Removes `@media` rules that contain IE10/IE11 exclusive hacks (the `\0` character).
+ *
+ * @param  {Array} rules  The AST rule nodes to process.
+ * @return {Array}        A new array of rules with IE-exclusive media queries removed.
+ */
+function removeIEMediaRules (rules) {
+  return rules.filter((rule) => {
+    if (rule.type === 'media' && containsIEHack(rule.media)) {
+      return false;
+    }
+    return true;
+  });
+}
+
 /**
  * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
  *
@@ -109,5 +125,6 @@ function mergeLayerRules (rules, mergeSelectorRules) {
 export {
   deduplicateKeyframes,
   mergeLayerRules,
-  mergeMediaRules
+  mergeMediaRules,
+  removeIEMediaRules
 };

package/src/rules/optimize/factor-parents.js

@@ -155,22 +155,78 @@ function collectSharedParentCandidates (rule) {
 }
 
 /**
- * Counts how many characters wrapping a run behind a shared parent selector
- * saves: the parent is written once with its braces, and every wrapped
- * selector shrinks to its nested form.
+ * Counts the characters a list of rules takes up as selector text. Each rule
+ * counts its selectors, its braces, and every rule nested within it, while
+ * plain declarations count for nothing.
  *
- * @param  {Array}  run     The rules of the run paired with their nested selectors.
- * @param  {string} parent  The shared parent selector string.
- * @return {number}         The character savings of the wrapper, or a non-positive number when it costs more than it saves.
+ * @param  {Array}  rules  The AST entries to measure.
+ * @return {number}        The number of characters the rules take up.
  */
-function measureWrapperSavings (run, parent) {
-  const charactersSaved = run.reduce((total, entry) => {
-    return total + entry.sibling.selectors.reduce((sum, selector, position) => {
-      return sum + selector.trim().length - entry.nestedSelectors[position].length;
-    }, 0);
+function measureRuleCharacters (rules) {
+  return rules.reduce((total, rule) => {
+    if (rule.type !== 'rule') {
+      return total;
+    }
+    const selectorText = (rule.selectors || []).map((selector) => {
+      return selector.trim();
+    }).join(',');
+    const nestedRules = (rule.declarations || []).filter((declaration) => {
+      return declaration.type === 'rule';
+    });
+    // The two braces wrap the rule's declarations
+    return total + selectorText.length + 2 + measureRuleCharacters(nestedRules);
   }, 0);
+}
+
+/**
+ * Counts how many characters wrapping a run behind a shared parent selector
+ * saves: the run is measured as it is written, against the declarations the
+ * wrapper would hold plus the parent written once with its braces.
+ *
+ * @param  {Array}  run           The rules of the run paired with their nested selectors.
+ * @param  {Array}  declarations  The declarations the wrapper would hold, including any factoring of the nested rules.
+ * @param  {string} parent        The shared parent selector string.
+ * @return {number}               The character savings of the wrapper, or a non-positive number when it costs more than it saves.
+ */
+function measureWrapperSavings (run, declarations, parent) {
+  const charactersBefore = measureRuleCharacters(run.map((entry) => {
+    return entry.sibling;
+  }));
   // The wrapper writes the shared selector once plus its surrounding braces.
-  return charactersSaved - (parent.length + 2);
+  const charactersAfter = measureRuleCharacters(declarations) + parent.length + 2;
+  return charactersBefore - charactersAfter;
+}
+
+/**
+ * Expresses every selector of a sibling rule relative to a candidate parent.
+ * A nested selector must be shorter than the selector it replaces, so each
+ * factoring pass leaves the rules smaller and factoring them again terminates.
+ *
+ * @param  {object}                          rule                 The sibling rule whose selectors are nested.
+ * @param  {function(string): (string|null)} matchNestedSelector  The matcher built for the candidate parent.
+ * @return {Array|null}                                           The nested selectors, or null when any selector cannot nest under the parent.
+ */
+function nestSelectorsUnderParent (rule, matchNestedSelector) {
+  const nestedSelectors = [];
+  for (const selector of rule.selectors) {
+    const trimmedSelector = selector.trim();
+    const nestedSelector = matchNestedSelector(trimmedSelector);
+    if (nestedSelector === null || nestedSelector.length >= trimmedSelector.length) {
+      return null;
+    }
+    nestedSelectors.push(nestedSelector);
+  }
+  return nestedSelectors;
+}
+
+/**
+ * Re-expresses a run entry as a rule whose selectors are the nested selectors.
+ *
+ * @param  {object} entry  A run entry pairing a sibling rule with its nested selectors.
+ * @return {object}        The rule, with its selectors replaced by the nested ones.
+ */
+function createNestedChild (entry) {
+  return { ...entry.sibling, selectors: entry.nestedSelectors };
 }
 
 /**
@@ -187,15 +243,49 @@ function orderRulesBySourcePosition (rules) {
   });
 }
 
+/**
+ * Builds the declarations of a wrapper that holds a run of sibling rules nested
+ * under their shared parent. A first rule whose only nested selector is `&` is
+ * the parent itself, so its declarations are hoisted into the wrapper. Otherwise
+ * the nested rules are factored again, so the selectors they still share can be
+ * wrapped in turn.
+ *
+ * @param  {Array} run  The rules of the run paired with their nested selectors.
+ * @return {Array}      The declarations of the wrapper rule.
+ */
+function createWrapperDeclarations (run) {
+  const firstEntry = run[0];
+  const firstSelectorIsParent = (
+    firstEntry.nestedSelectors.length === 1 &&
+    firstEntry.nestedSelectors[0] === '&'
+  );
+  if (!firstSelectorIsParent) {
+    return factorCommonParents(run.map(createNestedChild), true);
+  }
+  const directDeclarations = firstEntry.sibling.declarations;
+  const directNestedRules = directDeclarations.filter((declaration) => {
+    return declaration.type === 'rule';
+  });
+  const directEntries = directDeclarations.filter((declaration) => {
+    return declaration.type !== 'rule';
+  });
+  const children = run.slice(1).map(createNestedChild);
+  return [
+    ...directEntries,
+    ...orderRulesBySourcePosition([...directNestedRules, ...children])
+  ];
+}
+
 /**
  * Groups consecutive sibling rules that share a common leading selector
  * portion (such as `.foo` in `.foo .a`, `.foo .b`, or `.menu .item` in
  * `.menu .item:hover .x`) into a synthesized parent rule with the shared
  * portion factored out. Every viable prefix of the first rule's selector is
  * tried as the parent, and the grouping that saves the most characters wins,
- * but only when it saves more than the wrapper itself costs. Rules with a
- * comma-separated selector list can join a run when every one of their
- * selectors nests under the parent.
+ * measured with the rules nested under it factored in turn, but only when it
+ * saves more than the wrapper itself costs. Rules with a comma-separated
+ * selector list can join a run when every one of their selectors nests under
+ * the parent.
  *
  * @param  {Array}   rules                  The flat AST rule nodes to factor.
  * @param  {boolean} allowTrailingCompound  True when the rules are children of a factored wrapper, whose `&`-relative selectors may share a trailing compound that can be factored out in turn.
@@ -225,12 +315,8 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
         if (sibling.type !== 'rule' || !sibling.selectors?.length) {
           break;
         }
-        const nestedSelectors = sibling.selectors.map((selector) => {
-          return matchNestedSelector(selector.trim());
-        });
-        if (nestedSelectors.some((nestedSelector) => {
-          return nestedSelector === null;
-        })) {
+        const nestedSelectors = nestSelectorsUnderParent(sibling, matchNestedSelector);
+        if (!nestedSelectors) {
           break;
         }
         run.push({ sibling, nestedSelectors });
@@ -243,12 +329,13 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       if (run.length < 2 && selectorCount < 2) {
         continue;
       }
-      const savings = measureWrapperSavings(run, candidateParent);
+      const declarations = createWrapperDeclarations(run);
+      const savings = measureWrapperSavings(run, declarations, candidateParent);
       if (savings > 0 && (!bestGrouping || savings > bestGrouping.savings)) {
         bestGrouping = {
+          declarations,
           lookahead,
           parent: candidateParent,
-          run,
           savings
         };
       }
@@ -262,39 +349,10 @@ function factorCommonParents (rules, allowTrailingCompound = false) {
       index++;
       continue;
     }
-    const firstEntry = bestGrouping.run[0];
-    const firstSelectorIsParent = (
-      firstEntry.nestedSelectors.length === 1 &&
-      firstEntry.nestedSelectors[0] === '&'
-    );
-    const directDeclarations = firstSelectorIsParent ?
-      firstEntry.sibling.declarations :
-      [];
-    const entriesToNest = firstSelectorIsParent ?
-      bestGrouping.run.slice(1) :
-      bestGrouping.run;
-    const children = entriesToNest.map((entry) => {
-      return { ...entry.sibling, selectors: entry.nestedSelectors };
-    });
-    let declarations;
-    if (firstSelectorIsParent) {
-      const directNestedRules = directDeclarations.filter((declaration) => {
-        return declaration.type === 'rule';
-      });
-      const directEntries = directDeclarations.filter((declaration) => {
-        return declaration.type !== 'rule';
-      });
-      declarations = [
-        ...directEntries,
-        ...orderRulesBySourcePosition([...directNestedRules, ...children])
-      ];
-    } else {
-      declarations = factorCommonParents(children, true);
-    }
     result.push({
       type: 'rule',
       selectors: [bestGrouping.parent],
-      declarations
+      declarations: bestGrouping.declarations
     });
     index = bestGrouping.lookahead;
   }

package/src/rules/optimize/index.js

@@ -5,7 +5,8 @@
 import {
   deduplicateKeyframes,
   mergeLayerRules,
-  mergeMediaRules
+  mergeMediaRules,
+  removeIEMediaRules
 } from './at-rules.js';
 import { removeEmptyRules } from './empty-rules.js';
 import { expandPureNestedRules } from './expand-nesting.js';
@@ -43,6 +44,7 @@ function clearSelectorCaches () {
  */
 function optimizeRuleList (rules) {
   let result = expandPureNestedRules(rules);
+  result = removeIEMediaRules(result);
   result = mergeLayerRules(result, mergeSelectorRules);
   result = mergeMediaRules(result, mergeSelectorRules);
   result = deduplicateKeyframes(result);

package/src/rules/optimize/merge-declarations.js

@@ -175,7 +175,193 @@ function mergeRuleIntoPredecessor (previousRule, rule) {
 }
 
 /**
- * Merges consecutive rules whose declarations are a subset of the following rule, combining their selectors and splitting out any extra declarations.
+ * Finds properties that are present in all adjacent rules with matching values.
+ *
+ * @param  {Array} adjacentRules  The consecutive rule nodes to compare.
+ * @return {Map}                  Map of property name to value for properties common to all rules.
+ */
+function findCommonProperties (adjacentRules) {
+  if (adjacentRules.length < 2) {
+    return new Map();
+  }
+
+  const firstRuleBody = partitionRuleBody(adjacentRules[0].declarations);
+  const commonProperties = new Map(
+    firstRuleBody.plainDeclarations.map((declaration) => {
+      return [declaration.property, (declaration.value || '').trim()];
+    })
+  );
+
+  for (let ruleIndex = 1; ruleIndex < adjacentRules.length; ruleIndex++) {
+    const currentRuleBody = partitionRuleBody(adjacentRules[ruleIndex].declarations);
+    const currentValueByProperty = new Map(
+      currentRuleBody.plainDeclarations.map((declaration) => {
+        return [declaration.property, (declaration.value || '').trim()];
+      })
+    );
+
+    for (const [property, value] of commonProperties) {
+      if (currentValueByProperty.get(property) !== value) {
+        commonProperties.delete(property);
+      }
+    }
+  }
+
+  return commonProperties;
+}
+
+/**
+ * Checks if a rule contains the `all` property, which resets all other properties.
+ *
+ * @param  {object}  rule  The rule node to check.
+ * @return {boolean}       True if the rule contains the `all` property.
+ */
+function hasAllProperty (rule) {
+  const ruleBody = partitionRuleBody(rule.declarations);
+  return ruleBody.plainDeclarations.some((declaration) => {
+    return declaration.property === 'all';
+  });
+}
+
+/**
+ * Checks if any rule in a list contains the `all` property.
+ *
+ * @param  {Array}   rules  The rule nodes to check.
+ * @return {boolean}        True if any rule contains the `all` property.
+ */
+function anyRuleHasAllProperty (rules) {
+  return rules.some(hasAllProperty);
+}
+
+/**
+ * Checks if any rule has nested blocks.
+ *
+ * @param  {Array}   rules  The rule nodes to check.
+ * @return {boolean}        True if any rule has nested blocks.
+ */
+function anyRuleHasNestedBlocks (rules) {
+  return rules.some((rule) => {
+    const ruleBody = partitionRuleBody(rule.declarations);
+    return ruleBody.nestedBlocks.length > 0;
+  });
+}
+
+/**
+ * Combines adjacent rules that share common properties by creating a merged rule
+ * with all properties from the first rule, and keeping only the differing properties
+ * in each subsequent rule.
+ *
+ * @param  {Array} adjacentRules  The consecutive rule nodes to merge.
+ * @param  {Map}   commonProps    The properties common to all rules.
+ * @return {Array}                The rules after merging common properties.
+ */
+function mergeCommonProperties (adjacentRules, commonProps) {
+  if (commonProps.size === 0) {
+    return adjacentRules;
+  }
+
+  // Skip merging if any rule has the `all` property
+  if (anyRuleHasAllProperty(adjacentRules)) {
+    return adjacentRules;
+  }
+
+  // Skip merging if any rule has nested blocks
+  if (anyRuleHasNestedBlocks(adjacentRules)) {
+    return adjacentRules;
+  }
+
+  const firstRuleBody = partitionRuleBody(adjacentRules[0].declarations);
+
+  const combinedSelectors = [];
+  for (const rule of adjacentRules) {
+    combinedSelectors.push(...rule.selectors);
+  }
+
+  const mergedRule = {
+    ...adjacentRules[0],
+    selectors: deduplicateSelectors(combinedSelectors),
+    declarations: firstRuleBody.plainDeclarations
+  };
+
+  const result = [mergedRule];
+
+  for (let ruleIndex = 1; ruleIndex < adjacentRules.length; ruleIndex++) {
+    const rule = adjacentRules[ruleIndex];
+    const ruleBody = partitionRuleBody(rule.declarations);
+    const differingDeclarations = ruleBody.plainDeclarations.filter((declaration) => {
+      const firstRuleValue = firstRuleBody.plainDeclarations.find((decl) => {
+        return decl.property === declaration.property;
+      });
+      if (!firstRuleValue) {
+        return true;
+      }
+      return (declaration.value || '').trim() !== (firstRuleValue.value || '').trim();
+    });
+
+    if (differingDeclarations.length > 0) {
+      result.push({
+        ...rule,
+        declarations: differingDeclarations
+      });
+    }
+  }
+
+  // Check if the merge actually reduces size
+  const originalSize = adjacentRules.reduce((sum, rule) => {
+    return sum + calculateRuleSize(rule);
+  }, 0);
+
+  const mergedSize = result.reduce((sum, rule) => {
+    return sum + calculateRuleSize(rule);
+  }, 0);
+
+  if (mergedSize >= originalSize) {
+    return adjacentRules;
+  }
+
+  return result;
+}
+
+/**
+ * Calculates the approximate character size of a rule's selectors.
+ *
+ * @param  {object} rule  The rule node.
+ * @return {number}       The total character count of all selectors.
+ */
+function calculateSelectorSize (rule) {
+  if (!rule.selectors) {
+    return 0;
+  }
+  return rule.selectors.join(',').length;
+}
+
+/**
+ * Calculates the approximate character size of a rule's declarations.
+ *
+ * @param  {object} rule  The rule node.
+ * @return {number}       The total character count of all declarations.
+ */
+function calculateDeclarationSize (rule) {
+  const ruleBody = partitionRuleBody(rule.declarations);
+  let size = 0;
+  for (const declaration of ruleBody.plainDeclarations) {
+    size += declaration.property.length + 1 + (declaration.value || '').length;
+  }
+  return size;
+}
+
+/**
+ * Calculates the approximate character size of a rule.
+ *
+ * @param  {object} rule  The rule node.
+ * @return {number}       The total character count of the rule.
+ */
+function calculateRuleSize (rule) {
+  return calculateSelectorSize(rule) + calculateDeclarationSize(rule);
+}
+
+/**
+ * Merges consecutive rules whose declarations are a subset of the following rule, combining their selectors and splitting out any extra declarations. Also combines common properties across adjacent rules.
  *
  * @param  {Array} rules  The AST rule nodes to merge.
  * @return {Array}        A new array of rules with declaration-compatible consecutive rules combined.
@@ -191,7 +377,36 @@ function mergeByDeclarations (rules) {
     }
     result.push(rule);
   }
-  return result;
+
+  // Pass to combine common properties across adjacent rules
+  const finalResult = [];
+  let adjacentRules = [];
+
+  for (const rule of result) {
+    if (rule.type === 'rule' && rule.selectors?.length) {
+      adjacentRules.push(rule);
+    } else {
+      if (adjacentRules.length >= 2) {
+        const commonProps = findCommonProperties(adjacentRules);
+        const merged = mergeCommonProperties(adjacentRules, commonProps);
+        finalResult.push(...merged);
+      } else if (adjacentRules.length === 1) {
+        finalResult.push(adjacentRules[0]);
+      }
+      adjacentRules = [];
+      finalResult.push(rule);
+    }
+  }
+
+  if (adjacentRules.length >= 2) {
+    const commonProps = findCommonProperties(adjacentRules);
+    const merged = mergeCommonProperties(adjacentRules, commonProps);
+    finalResult.push(...merged);
+  } else if (adjacentRules.length === 1) {
+    finalResult.push(adjacentRules[0]);
+  }
+
+  return finalResult;
 }
 
 export {

package/src/value/math/index.js

@@ -169,15 +169,17 @@ function simplifyMathFunctionsOnce (value, property) {
  */
 function normalizeMathFunctions (value, property, originalValue = '') {
   let result = value;
-  let previous;
-
-  do {
-    previous = result;
-    // Resolving a math function leaves a plain value where it stood, which can
-    // bring the function it was nested in within reach of the next pass, so
-    // the value is simplified until it settles
-    result = simplifyMathFunctionsOnce(result, property);
-  } while (result !== previous);
+  if (value.includes('(')) {
+    let previous;
+
+    do {
+      previous = result;
+      // Resolving a math function leaves a plain value where it stood, which can
+      // bring the function it was nested in within reach of the next pass, so
+      // the value is simplified until it settles
+      result = simplifyMathFunctionsOnce(result, property);
+    } while (result !== previous);
+  }
 
   // When calc() folded to an absolute-length unit (pt, pc, in, cm, mm, q), convert to pixels
   if (originalValue.includes('calc(') && /^-?(?:\d+|\d*\.\d+)(pt|pc|in|cm|mm|q)$/i.test(result)) {

package/src/value/math/rewrite.js

@@ -48,8 +48,13 @@ function rewriteMathFunctionContents (rewriteExpression, value) {
       break;
     }
     const functionName = value.slice(findFunctionNameStart(value, openIndex), openIndex).toLowerCase();
+    if (!MATH_FUNCTION_NAMES.has(functionName)) {
+      result += value.slice(index, openIndex + 1);
+      index = openIndex + 1;
+      continue;
+    }
     const closeIndex = findMatchingParenthesis(value, openIndex);
-    if (!MATH_FUNCTION_NAMES.has(functionName) || closeIndex === -1) {
+    if (closeIndex === -1) {
       result += value.slice(index, openIndex + 1);
       index = openIndex + 1;
       continue;