@thejaredwilcurt/csslop 0.0.27 → 0.0.28

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -39,7 +39,7 @@
     "eslint-plugin-jsdoc": "^64.2.1",
     "fflate": "^0.8.3",
     "globals": "^17.11.0",
-    "pretty-ms": "^9.3.0",
+    "pretty-ms": "^9.3.1",
     "real-world-css-libraries": "^1.0.8",
     "vite": "^8.2.2"
   },

package/src/declarations/border.js

@@ -3,14 +3,72 @@
  */
 
 import { minifyValue } from '../value/minify.js';
+import { namedColors } from '../value/named-colors.js';
+import { collapseShorthandParts } from '../value/shared.js';
 import { splitTopLevelComponents } from '../value/syntax.js';
 
-import { CSS_WIDE_KEYWORDS } from './config.js';
+import {
+  BORDER_EDGE_PROPERTIES,
+  CSS_WIDE_KEYWORDS
+} from './config.js';
 import { collectDeclaredProperties } from './lookup.js';
 import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 const BORDER_TRIO_PROPERTIES = ['border-width', 'border-style', 'border-color'];
 
+/**
+ * The keywords that state a border line style.
+ *
+ * @type {Set<string>}
+ */
+const BORDER_STYLE_KEYWORDS = new Set([
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset'
+]);
+
+/**
+ * The keywords that state a border line width without writing a length.
+ *
+ * @type {Set<string>}
+ */
+const BORDER_WIDTH_KEYWORDS = new Set(['thin', 'medium', 'thick']);
+
+/**
+ * The functions that resolve to a length, so a border edge component calling one
+ * of them states the line width.
+ *
+ * @type {RegExp}
+ */
+const LENGTH_FUNCTION_PATTERN = /^(?:calc|min|max|clamp|round|rem|mod|abs|sign|anchor-size)\(/i;
+
+/**
+ * The functions that resolve to a color, so a border edge component calling one
+ * of them states the line color.
+ *
+ * @type {RegExp}
+ */
+const COLOR_FUNCTION_PATTERN = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix|light-dark|contrast-color|device-cmyk)\(/i;
+
+/**
+ * The value that each part of a border edge takes when the edge leaves it out,
+ * since an edge shorthand resets every part it does not state.
+ *
+ * @type {{[key: string]: string}}
+ */
+const INITIAL_BORDER_EDGE_PARTS = {
+  'border-width': 'medium',
+  'border-style': 'none',
+  'border-color': 'currentcolor'
+};
+
 /**
  * Finds the index of the last declaration for a property, which is the one that
  * wins the cascade within a rule.
@@ -126,4 +184,212 @@ function collapseBorderTrioWithPerEdgeColor (declarations, context) {
   });
 }
 
-export { collapseBorderTrioWithPerEdgeColor };
+/**
+ * Decides which part of a border edge a single component states. Every
+ * component has to be recognized, because a component sorted into the wrong
+ * part would change what the rule renders.
+ *
+ * @param  {string}      component  One component of a border edge value.
+ * @return {string|null}            The trio property the component states, or null when it is unrecognized.
+ */
+function classifyBorderEdgeComponent (component) {
+  const keyword = component.toLowerCase();
+  if (BORDER_STYLE_KEYWORDS.has(keyword)) {
+    return 'border-style';
+  }
+  // Match a number with an optional unit, which is how a length is written
+  const isLength = /^[+-]?(?:\d+|\d*\.\d+)[a-z]*$/i.test(component);
+  if (BORDER_WIDTH_KEYWORDS.has(keyword) || isLength || LENGTH_FUNCTION_PATTERN.test(component)) {
+    return 'border-width';
+  }
+  const isColor = (
+    keyword === 'currentcolor' ||
+    component.startsWith('#') ||
+    Object.hasOwn(namedColors, keyword) ||
+    COLOR_FUNCTION_PATTERN.test(component)
+  );
+  if (isColor) {
+    return 'border-color';
+  }
+  return null;
+}
+
+/**
+ * Splits one border edge value into the width, style, and color it sets. A part
+ * the edge leaves unstated is reset to its initial value by the edge shorthand,
+ * so the split states that initial value in its place.
+ *
+ * @param  {string}      value  The value of a `border-<side>` declaration, without its importance.
+ * @return {object|null}        The value each trio property takes, or null when the edge cannot be split.
+ */
+function splitBorderEdgeValue (value) {
+  const statedProperties = new Set();
+  const parts = { ...INITIAL_BORDER_EDGE_PARTS };
+
+  for (const component of splitTopLevelComponents(value)) {
+    const property = classifyBorderEdgeComponent(component);
+    if (!property || statedProperties.has(property)) {
+      return null;
+    }
+    statedProperties.add(property);
+    parts[property] = component;
+  }
+
+  if (!statedProperties.size) {
+    return null;
+  }
+  return parts;
+}
+
+/**
+ * Collects the one declaration of each border edge, in top/right/bottom/left
+ * order. An edge that a rule states more than once is kept as it is, since the
+ * repeat is a deliberate fallback whose order the split would not preserve.
+ *
+ * @param  {Array}      declarations  The declarations of a single rule.
+ * @return {Array|null}               The four edge declarations, or null when the rule does not state each edge exactly once.
+ */
+function collectBorderEdgeDeclarations (declarations) {
+  const edgeDeclarations = [];
+  for (const edgeProperty of BORDER_EDGE_PROPERTIES) {
+    const matches = declarations.filter((declaration) => {
+      return declaration.property === edgeProperty;
+    });
+    if (matches.length !== 1) {
+      return null;
+    }
+    edgeDeclarations.push(matches[0]);
+  }
+  return edgeDeclarations;
+}
+
+/**
+ * Builds the `border-width`, `border-style`, and `border-color` declarations
+ * that state per side what a set of border edges stated per edge. The edges are
+ * read as authored rather than minified, so that each component is still a
+ * component of its own and keeps the spelling it was written with.
+ *
+ * @param  {Array}      edgeDeclarations  The four edge declarations, in top/right/bottom/left order.
+ * @return {Array|null}                   The trio declarations, or null when the edges cannot be split.
+ */
+function buildBorderTrioDeclarations (edgeDeclarations) {
+  const edgeParts = [];
+  for (const declaration of edgeDeclarations) {
+    if (typeof declaration.value !== 'string') {
+      return null;
+    }
+    const parts = splitBorderEdgeValue(declaration.value.trim());
+    if (!parts) {
+      return null;
+    }
+    edgeParts.push(parts);
+  }
+
+  // The three parts do not affect one another, so they are written in a fixed
+  // alphabetical order rather than in an order the values would decide.
+  return [...BORDER_TRIO_PROPERTIES].sort().map((property) => {
+    const sideValues = edgeParts.map((parts) => {
+      return parts[property];
+    });
+    return {
+      property,
+      value: collapseShorthandParts(sideValues).join(' '),
+      isAssembledShorthand: true
+    };
+  });
+}
+
+/**
+ * Measures what a set of declarations costs in the output, which is the text of
+ * each of them joined by the semicolons that separate them.
+ *
+ * @param  {Array}  declarations  The declarations to measure.
+ * @return {number}               The number of characters the declarations take up.
+ */
+function measureDeclarations (declarations) {
+  return declarations.map((declaration) => {
+    return declaration.property + ':' + minifyValue(declaration);
+  }).join(';').length;
+}
+
+/**
+ * Rewrites four `border-<side>` declarations whose values differ into the
+ * `border-width`, `border-style`, and `border-color` trio. Unlike `margin`, the
+ * `border` shorthand is not a four-sided one: it takes a single width, style,
+ * and color, so four differing edges have no `border` value to collapse into.
+ * The trio, on the other hand, states each of the three parts once per side,
+ * which spells the same borders out in fewer characters.
+ *
+ * @param  {Array} declarations  The declarations of a single rule.
+ * @return {Array}               The declarations, with the edges rewritten when the trio is shorter.
+ */
+function splitBorderEdgesIntoTrio (declarations) {
+  const declaredProperties = collectDeclaredProperties(declarations);
+  // A rule that already states a part of the trio, or the whole border, would
+  // gain a second declaration of it rather than a shorter spelling of the edges.
+  const statesTrioAlready = ['border', ...BORDER_TRIO_PROPERTIES].some((property) => {
+    return declaredProperties.has(property);
+  });
+  if (statesTrioAlready) {
+    return declarations;
+  }
+
+  const edgeDeclarations = collectBorderEdgeDeclarations(declarations);
+  if (!edgeDeclarations) {
+    return declarations;
+  }
+
+  const edgeValues = edgeDeclarations.map((declaration) => {
+    return minifyValue(declaration);
+  });
+  const importantEdges = edgeValues.filter((value) => {
+    return value.includes('!important');
+  });
+  // An edge whose importance differs from its siblings cannot join a shared
+  // declaration, which carries one importance for all four sides.
+  const hasUniformImportance = importantEdges.length === 0 || importantEdges.length === edgeValues.length;
+  if (!hasUniformImportance) {
+    return declarations;
+  }
+  const importantSuffix = importantEdges.length ? '!important' : '';
+
+  const trioDeclarations = buildBorderTrioDeclarations(edgeDeclarations.map((declaration) => {
+    return {
+      ...declaration,
+      // Match a trailing importance flag, which the trio carries once instead
+      value: String(declaration.value).replace(/\s*!\s*important\s*$/i, '')
+    };
+  }));
+  if (!trioDeclarations) {
+    return declarations;
+  }
+  const importantTrioDeclarations = trioDeclarations.map((declaration) => {
+    return {
+      ...declaration,
+      value: declaration.value + importantSuffix
+    };
+  });
+
+  const isShorter = measureDeclarations(importantTrioDeclarations) < measureDeclarations(edgeDeclarations);
+  if (!isShorter) {
+    return declarations;
+  }
+
+  const insertionIndex = declarations.findIndex((declaration) => {
+    return BORDER_EDGE_PROPERTIES.includes(declaration.property);
+  });
+  return declarations.flatMap((declaration, index) => {
+    if (index === insertionIndex) {
+      return importantTrioDeclarations;
+    }
+    if (BORDER_EDGE_PROPERTIES.includes(declaration.property)) {
+      return [];
+    }
+    return [declaration];
+  });
+}
+
+export {
+  collapseBorderTrioWithPerEdgeColor,
+  splitBorderEdgesIntoTrio
+};

package/src/declarations/config.js

@@ -66,7 +66,7 @@ const shorthandMap = {
   'place-items': ['align-items', 'justify-items'],
   'place-content': ['align-content', 'justify-content'],
   'place-self': ['align-self', 'justify-self'],
-  columns: ['column-width', 'column-count'],
+  columns: ['column-width', 'column-count', 'column-height'],
   'list-style': ['list-style-position', 'list-style-image', 'list-style-type'],
   'margin-inline': ['margin-inline-start', 'margin-inline-end'],
   'margin-block': ['margin-block-start', 'margin-block-end'],
@@ -89,9 +89,10 @@ const shorthandMap = {
 
 const shorthandOverrideMap = {
   animation: ['animation-timeline', 'animation-range', 'animation-range-start', 'animation-range-end'],
+  columns: ['column-wrap'],
   border: ['border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
   font: ['font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position', 'font-feature-settings', 'font-kerning', 'font-language-override', 'font-optical-sizing', 'font-size-adjust', 'font-variation-settings'],
-  mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode']
+  mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode', 'mask-position', 'mask-origin', 'mask-clip', 'mask-composite', 'mask-mode']
 };
 
 /**

package/src/declarations/merge.js

@@ -35,6 +35,7 @@ const PARTIAL_MERGE_REQUIREMENTS = {
   background: [['background-color', 'background-image']],
   'background-position': [['background-position-x'], ['background-position-y']],
   'border-image': [['border-image-source']],
+  columns: [['column-width', 'column-count', 'column-height']],
   font: [['font-size'], ['font-family']],
   mask: [['mask-image']]
 };

package/src/declarations/process.js

@@ -6,7 +6,10 @@ import { minifyValue } from '../value/minify.js';
 import { hasInvalidQuotesCount } from '../value/quotes.js';
 
 import { absorbBackgroundLonghandsIntoShorthand } from './background.js';
-import { collapseBorderTrioWithPerEdgeColor } from './border.js';
+import {
+  collapseBorderTrioWithPerEdgeColor,
+  splitBorderEdgesIntoTrio
+} from './border.js';
 import {
   getLonghandsOf,
   shorthandMap
@@ -406,6 +409,7 @@ function processDeclarations (declarations, context) {
   result = mergeLonghandsIntoShorthands(result, context);
   result = foldLonghandOverridesIntoShorthands(result, context);
   result = hoistCssWideKeywordsIntoShorthands(result, context);
+  result = splitBorderEdgesIntoTrio(result);
   result = collapseBorderTrioWithPerEdgeColor(result, context);
 
   return orderDeclarations(result);

package/src/declarations/shorthand-values.js

@@ -193,14 +193,27 @@ function buildTextDecorationValue ({ valueMap, importantSuffix }) {
 }
 
 /**
- * Builds a `columns` value, which keeps both components even when they match,
- * because the width and count are not interchangeable.
+ * Builds a `columns` value from its width, count, and height components. The
+ * grammar writes the width and the count next to each other and places the
+ * height behind a `/`. Every one of the three starts out as `auto`, so a
+ * component that holds `auto` states nothing and is left out, and a value whose
+ * components are all `auto` shrinks to a single `auto`.
  *
  * @param  {ShorthandComponents} components  The collected longhand values.
  * @return {string|null}                     The shorthand value, or null when it cannot be built.
  */
-function buildColumnsValue ({ cleanValues, importantSuffix }) {
-  return cleanValues.join(' ') + importantSuffix;
+function buildColumnsValue ({ valueMap, importantSuffix }) {
+  const height = valueMap.get('column-height');
+  const statedParts = ['column-width', 'column-count'].map((property) => {
+    return valueMap.get(property);
+  }).filter((value) => {
+    return value && value !== 'auto';
+  });
+  const inlineSize = statedParts.join(' ') || 'auto';
+  if (height && height !== 'auto') {
+    return inlineSize + '/' + height + importantSuffix;
+  }
+  return inlineSize + importantSuffix;
 }
 
 /**

package/src/value/minify.js

@@ -84,10 +84,11 @@ const COLOR_TOKEN_PATTERN = new RegExp(
  * the shortest equivalent representation, comparing full hex, shortened hex,
  * and any matching named color keyword.
  *
- * @param  {string} segment  A CSS value segment (outside strings and urls).
- * @return {string}          The segment with all colors shortened to their minimal form.
+ * @param  {string}  segment                      A CSS value segment (outside strings and urls).
+ * @param  {boolean} rewritesEqualLengthSpelling  Whether a spelling of the same length is worth switching to.
+ * @return {string}                               The segment with all colors shortened to their minimal form.
  */
-function shortenColorValues (segment) {
+function shortenColorValues (segment, rewritesEqualLengthSpelling = true) {
   // Match "color-mix(" as a whole word, case-insensitive
   const hasColorMix = /\bcolor-mix\(/i.test(segment);
   return segment.replace(COLOR_TOKEN_PATTERN, (match) => {
@@ -108,19 +109,30 @@ function shortenColorValues (segment) {
     if (!channels) {
       return match;
     }
-    return shortestColor(channels[0], channels[1], channels[2], channels[3]);
+    const shortest = shortestColor(channels[0], channels[1], channels[2], channels[3]);
+    if (!rewritesEqualLengthSpelling && shortest.length >= match.length) {
+      return match;
+    }
+    return shortest;
   });
 }
 
 /**
- * Applies a replacer function only to segments of a CSS value that are outside quoted strings and url() functions, preserving those literal segments unchanged.
+ * @typedef  {object}  ValueSegment
+ * @property {string}  text          The segment's slice of the value.
+ * @property {boolean} isLiteral     Whether the segment is a quoted string or a url() token.
+ */
+
+/**
+ * Splits a CSS value into literal and syntax segments. A quoted string and a
+ * `url()` token are literals: they hold data rather than CSS syntax, so no pass
+ * may rewrite what is inside them. Everything between the literals is syntax.
  *
- * @param  {string}                   value     The full CSS value string.
- * @param  {function(string): string} replacer  A function called with each non-string, non-url segment, returning the replacement string.
- * @return {string}                             The value with the replacer applied to all eligible segments.
+ * @param  {string} value  The full CSS value string.
+ * @return {Array}         The value's segments, in order.
  */
-function replaceOutsideStringsAndUrls (value, replacer) {
-  let result = '';
+function splitValueSegments (value) {
+  const segments = [];
   let index = 0;
 
   const consumeQuoted = (start) => {
@@ -144,31 +156,36 @@ function replaceOutsideStringsAndUrls (value, replacer) {
     return value.slice(start, start + 4).toLowerCase() === 'url(';
   };
 
+  const consumeUrl = (start) => {
+    let depth = 1;
+    let end = start + 4;
+    while (end < value.length && depth > 0) {
+      if (value[end] === '"' || value[end] === '\'') {
+        end = consumeQuoted(end);
+        continue;
+      }
+      if (value[end] === '(') {
+        depth++;
+      }
+      if (value[end] === ')') {
+        depth--;
+      }
+      end++;
+    }
+    return end;
+  };
+
   while (index < value.length) {
     if (value[index] === '"' || value[index] === '\'') {
       const end = consumeQuoted(index);
-      result += value.slice(index, end);
+      segments.push({ text: value.slice(index, end), isLiteral: true });
       index = end;
       continue;
     }
 
     if (startsUrl(index)) {
-      let depth = 1;
-      let end = index + 4;
-      while (end < value.length && depth > 0) {
-        if (value[end] === '"' || value[end] === '\'') {
-          end = consumeQuoted(end);
-          continue;
-        }
-        if (value[end] === '(') {
-          depth++;
-        }
-        if (value[end] === ')') {
-          depth--;
-        }
-        end++;
-      }
-      result += value.slice(index, end);
+      const end = consumeUrl(index);
+      segments.push({ text: value.slice(index, end), isLiteral: true });
       index = end;
       continue;
     }
@@ -177,10 +194,40 @@ function replaceOutsideStringsAndUrls (value, replacer) {
     while (index < value.length && value[index] !== '"' && value[index] !== '\'' && !startsUrl(index)) {
       index++;
     }
-    result += replacer(value.slice(start, index));
+    segments.push({ text: value.slice(start, index), isLiteral: false });
   }
 
-  return result;
+  return segments;
+}
+
+/**
+ * Reports whether a segment is a quoted string. Every literal segment is either
+ * a quoted string or a url() token, so anything else is one of the latter.
+ *
+ * @param  {ValueSegment} [segment]  The segment to test, when the value has one there.
+ * @return {boolean}                 Whether the segment is a quoted string.
+ */
+function isQuotedStringSegment (segment) {
+  if (!segment?.isLiteral) {
+    return false;
+  }
+  return segment.text.startsWith('"') || segment.text.startsWith('\'');
+}
+
+/**
+ * Applies a replacer function only to segments of a CSS value that are outside quoted strings and url() functions, preserving those literal segments unchanged.
+ *
+ * @param  {string}                   value     The full CSS value string.
+ * @param  {function(string): string} replacer  A function called with each non-string, non-url segment, returning the replacement string.
+ * @return {string}                             The value with the replacer applied to all eligible segments.
+ */
+function replaceOutsideStringsAndUrls (value, replacer) {
+  return splitValueSegments(value).map((segment) => {
+    if (segment.isLiteral) {
+      return segment.text;
+    }
+    return replacer(segment.text);
+  }).join('');
 }
 
 /**
@@ -214,6 +261,108 @@ function elideSpaceBeforeHexColors (value) {
   });
 }
 
+/**
+ * Matches the separator whitespace at the head of a value segment. Whitespace
+ * that precedes a `+` or a `-` is left alone, because a math function requires
+ * those two operators to be surrounded by it.
+ *
+ * @type {RegExp}
+ */
+const LEADING_SEPARATOR_PATTERN = /^\s+(?![+-])/;
+
+/**
+ * Removes the separator whitespace that follows a closing parenthesis. A
+ * parenthesis ends its own token, so the whitespace after one never keeps two
+ * tokens from merging: `url(a.png) 30 round` holds the same tokens as
+ * `url(a.png)30 round`.
+ *
+ * @param  {string} value  The CSS value string.
+ * @return {string}        The value without the redundant separators.
+ */
+function elideSpaceAfterParentheses (value) {
+  const segments = splitValueSegments(value);
+  return segments.map((segment, index) => {
+    if (segment.isLiteral) {
+      return segment.text;
+    }
+    let text = segment.text;
+    const previousSegment = segments[index - 1];
+    // A url() token ends with the parenthesis that closes it, so whitespace at
+    // the head of the segment after one is a separator of the same kind
+    if (previousSegment?.isLiteral && !isQuotedStringSegment(previousSegment)) {
+      text = text.replace(LEADING_SEPARATOR_PATTERN, '');
+    }
+    // Match whitespace that follows a closing parenthesis
+    return text.replace(/\)\s+(?![+-])/g, ')');
+  }).join('');
+}
+
+/**
+ * Removes the separator whitespace that follows a closing quote. A string ends
+ * its own token, so no separator is needed between it and the token that comes
+ * next: `"smcp" 1` holds the same tokens as `"smcp"1`.
+ *
+ * @param  {string} value  The CSS value string.
+ * @return {string}        The value without the redundant separators.
+ */
+function elideSpaceAfterStrings (value) {
+  const segments = splitValueSegments(value);
+  return segments.map((segment, index) => {
+    if (segment.isLiteral || !isQuotedStringSegment(segments[index - 1])) {
+      return segment.text;
+    }
+    return segment.text.replace(LEADING_SEPARATOR_PATTERN, '');
+  }).join('');
+}
+
+/**
+ * Reports whether a value separates top-level entries with commas, the way the
+ * repeatable values of properties such as `font-variation-settings` and
+ * `transition` do. Every literal is skipped, so a comma inside a string or a
+ * url does not count, and the parenthesis depth tells a function's argument
+ * separators apart from the value's own.
+ *
+ * @param  {string}  value  The CSS value string.
+ * @return {boolean}        Whether the value holds more than one comma-separated entry.
+ */
+function hasCommaSeparatedEntries (value) {
+  let depth = 0;
+  for (const segment of splitValueSegments(value)) {
+    if (segment.isLiteral) {
+      continue;
+    }
+    for (const character of segment.text) {
+      if (character === '(') {
+        depth++;
+      }
+      if (character === ')') {
+        depth = Math.max(0, depth - 1);
+      }
+      if (character === ',' && depth === 0) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Restores the whitespace that a math function requires before a `+` or a `-`
+ * operator. Both operators have to be surrounded by whitespace to be read as
+ * operators rather than as the sign of the term that follows, and the
+ * whitespace before one that trails a closing parenthesis is removed together
+ * with the rest of the parenthesis padding.
+ *
+ * @param  {string} value  The CSS value string with parenthesis padding removed.
+ * @return {string}        The value with the operator separator restored.
+ */
+function restoreSpaceBeforeMathOperators (value) {
+  return replaceOutsideStringsAndUrls(value, (segment) => {
+    // Match a closing parenthesis immediately followed by a `+` or `-` operator
+    return segment.replace(/\)(?=[+-])/g, ') ');
+  });
+}
+
 /**
  * Chooses the shortest valid representation for the path inside a `url(...)`
  * token, weighing an unquoted form, an escaped single space, and a quoted form.
@@ -800,16 +949,77 @@ const TIME_PROPERTIES = new Set([
   'animation-delay'
 ]);
 
+/**
+ * Properties whose grammar delimits its own components, either with punctuation
+ * (the `/` and `,` of the `background`, `mask`, and `src` layers) or by taking
+ * nothing but functions (`transform`). Their components stay readable without
+ * the whitespace that follows a closing parenthesis, so that whitespace is left
+ * elided and each of them restores only the separators its grammar still needs.
+ *
+ * @type {Set<string>}
+ */
+const PUNCTUATED_COMPONENT_PROPERTIES = new Set([
+  'background',
+  'mask',
+  'src',
+  'transform'
+]);
+
+/**
+ * Matches one offset of a position: an edge keyword or a numeric distance.
+ *
+ * @type {string}
+ */
+const POSITION_OFFSET_SOURCE = '(?:left|center|right|top|bottom|[+-]?(?:\\d+|\\d*\\.\\d+)(?:%|[a-z]+)?)';
+
+/**
+ * Matches a whole position component, which is one or two of those offsets.
+ *
+ * @type {string}
+ */
+const POSITION_COMPONENT_SOURCE = '(' + POSITION_OFFSET_SOURCE + '(?:\\s+' + POSITION_OFFSET_SOURCE + ')?)';
+
+/**
+ * Matches a close-paren directly followed by a position that no slash follows,
+ * which is the position that needs its separator put back.
+ *
+ * @type {RegExp}
+ */
+const UNSEPARATED_IMAGE_POSITION_PATTERN = new RegExp('\\)' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
+
+/**
+ * Matches a close-paren separated from a position that a slash follows, where
+ * the slash already delimits the position from the size behind it.
+ *
+ * @type {RegExp}
+ */
+const SEPARATED_IMAGE_SIZE_POSITION_PATTERN = new RegExp('\\)\\s+' + POSITION_COMPONENT_SOURCE + '(?=\\/)', 'gi');
+
+/**
+ * Restores the separator between an image function and the position that
+ * follows it. Both `background` and `mask` take a `<position> [ / <size> ]`
+ * component after their image, and a bare position only reads as its own
+ * component while whitespace separates it from the image function. A position
+ * that a `/` follows needs no separator, since the slash delimits the pair.
+ *
+ * @param  {string} value  The layered image value, with the parenthesis padding removed.
+ * @return {string}        The value with the position separator restored.
+ */
+function restoreImagePositionSeparator (value) {
+  const separated = value.replace(UNSEPARATED_IMAGE_POSITION_PATTERN, ') $1');
+  return separated.replace(SEPARATED_IMAGE_SIZE_POSITION_PATTERN, ')$1');
+}
+
 /**
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
  *
- * @param  {string}  val                    The CSS value string after generic minification.
- * @param  {string}  property               The CSS property name.
- * @param  {boolean} allowsHexSpaceElision  Whether the space preceding a hex color may be removed.
- * @return {string}                         The value with property-specific optimizations applied.
+ * @param  {string}  val                     The CSS value string after generic minification.
+ * @param  {string}  property                The CSS property name.
+ * @param  {boolean} allowsSeparatorElision  Whether redundant separator whitespace may be removed.
+ * @return {string}                          The value with property-specific optimizations applied.
  */
-function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
+function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
   if (property === 'font-weight' && isUnicodeCharset()) {
     // Replace font-weight keyword "bold" with its numeric equivalent
     val = val.replace(/\bbold\b/gi, '700');
@@ -971,16 +1181,19 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
   });
 
   // Shorten all color tokens (second pass after property-specific color evaluations)
-  val = replaceOutsideStringsAndUrls(val, shortenColorValues);
+  val = replaceOutsideStringsAndUrls(val, (segment) => {
+    return shortenColorValues(segment, allowsSeparatorElision);
+  });
 
   // Remove space before hex colors (second pass after color evaluations)
-  if (allowsHexSpaceElision) {
+  if (allowsSeparatorElision) {
     val = elideSpaceBeforeHexColors(val);
   }
-  if (property !== 'transform' && property !== 'background' && property !== 'src') {
+  if (!PUNCTUATED_COMPONENT_PROPERTIES.has(property)) {
     // Restore space after close-paren when followed by an alphanumeric, hash, or hyphen
     val = val.replace(/\)(?=[0-9a-zA-Z#-])/g, ') ');
   }
+  val = restoreSpaceBeforeMathOperators(val);
 
   if (property === 'font') {
     // Split font shorthand on whitespace
@@ -1014,10 +1227,11 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
     if (normalized) {
       val = normalized;
     }
-    // Restore the required separator between an image function and a following
-    // background-position when that position is not immediately followed by `/size`.
-    val = val.replace(/\)((?:left|center|right|top|bottom|[+-]?(?:\d+|\d*\.\d+)(?:%|[a-z]+)?)(?:\s+(?:left|center|right|top|bottom|[+-]?(?:\d+|\d*\.\d+)(?:%|[a-z]+)?))?)(?!\/)/gi, ') $1');
-    val = val.replace(/\)\s+((?:left|center|right|top|bottom|[+-]?(?:\d+|\d*\.\d+)(?:%|[a-z]+)?)(?:\s+(?:left|center|right|top|bottom|[+-]?(?:\d+|\d*\.\d+)(?:%|[a-z]+)?))?)(?=\/)/gi, ')$1');
+    val = restoreImagePositionSeparator(val);
+  }
+
+  if (property === 'mask') {
+    val = restoreImagePositionSeparator(val);
   }
 
   if (property === 'border') {
@@ -1094,7 +1308,7 @@ function computeMinifiedValue (declaration) {
   // Values assembled from already-minified longhands keep the separator spaces
   // between their components, because those spaces delimit the shorthand's
   // parts rather than the authored whitespace of a single written value.
-  const allowsHexSpaceElision = !declaration.isAssembledShorthand;
+  const allowsSeparatorElision = !declaration.isAssembledShorthand;
 
   if (typeof val === 'string') {
     val = val.trim();
@@ -1138,21 +1352,26 @@ function computeMinifiedValue (declaration) {
     }
 
     val = lowercaseHexColors(val);
-    if (allowsHexSpaceElision) {
+    if (allowsSeparatorElision) {
       val = elideSpaceBeforeHexColors(val);
     }
 
     // Convert color functions to hex equivalents
     val = convertColorsToHex(val);
 
-    // Shorten all color tokens (hex and named) to their shortest representation
-    val = replaceOutsideStringsAndUrls(val, shortenColorValues);
+    // Shorten all color tokens (hex and named) to their shortest representation.
+    // An assembled shorthand keeps the whitespace between its components, so a
+    // spelling of the same length saves it nothing and its components keep the
+    // spelling they were written with.
+    val = replaceOutsideStringsAndUrls(val, (segment) => {
+      return shortenColorValues(segment, allowsSeparatorElision);
+    });
 
     // Collapse light-dark() when both normalized branches are identical
     val = simplifyEquivalentLightDarkFunctions(val);
 
     // Property-specific optimizations
-    val = applyPropertyOptimizations(val, declaration.property, allowsHexSpaceElision);
+    val = applyPropertyOptimizations(val, declaration.property, allowsSeparatorElision);
 
     // Minify relative color syntax (identity resolution and whitespace collapsing)
     val = minifyRelativeColorSyntax(val);
@@ -1169,6 +1388,23 @@ function computeMinifiedValue (declaration) {
     val = optimizeUnicodeRange(val);
   }
 
+  // Every earlier pass reads the value with its component separators in place,
+  // so the ones that turned out to be redundant are only dropped at the end.
+  // The properties that punctuate their own components never got them back.
+  const elidesRedundantSeparators = (
+    typeof val === 'string' &&
+    allowsSeparatorElision &&
+    !PUNCTUATED_COMPONENT_PROPERTIES.has(declaration.property)
+  );
+  if (elidesRedundantSeparators) {
+    val = elideSpaceAfterParentheses(val);
+    // A value written as one entry is elided down to its tokens, while a
+    // comma-separated list keeps the whitespace that groups each of its entries.
+    if (!hasCommaSeparatedEntries(val)) {
+      val = elideSpaceAfterStrings(val);
+    }
+  }
+
   return val;
 }
 

package/src/value/shared.js

@@ -143,6 +143,31 @@ function parseAngleToDegrees (angleToken) {
   return parseFloat(match[1]) * ANGLE_UNIT_TO_DEGREES[unit];
 }
 
+/**
+ * The substitution functions whose result is only known at computed-value time.
+ * Each of them may stand in for any number of components, so a shorthand part
+ * that holds one cannot be counted as the single value it looks like.
+ *
+ * @type {RegExp}
+ */
+const SUBSTITUTION_FUNCTION_PATTERN = /\b(?:var|env|attr|if)\(/i;
+
+/**
+ * Reports whether a shorthand part stands in for an unknown number of
+ * components. `margin: 1px 1px` reduces to `margin: 1px`, but the same
+ * reduction across two `var()` references is unsafe: a custom property that
+ * expands to two values makes the doubled form a valid four-component margin,
+ * while the reduced form is a two-component one.
+ *
+ * @param  {Array}   parts  The shorthand value strings to test.
+ * @return {boolean}        Whether any part substitutes a value of unknown length.
+ */
+function hasSubstitutedParts (parts) {
+  return parts.some((part) => {
+    return SUBSTITUTION_FUNCTION_PATTERN.test(part);
+  });
+}
+
 /**
  * Collapses redundant CSS shorthand parts using the standard box-model
  * reduction rules: 4-value → 3-value → 2-value → 1-value.
@@ -153,6 +178,9 @@ function parseAngleToDegrees (angleToken) {
  * @return {Array}        The same array, mutated with redundant entries removed.
  */
 function collapseShorthandParts (parts) {
+  if (hasSubstitutedParts(parts)) {
+    return parts;
+  }
   if (parts.length === 4 && parts[1] === parts[3]) {
     parts.splice(3, 1);
   }