@thejaredwilcurt/csslop 0.0.25 → 0.0.27

package/README.md

@@ -31,7 +31,7 @@
 * Gemini 3.1 Pro (High Thinking)
 * GPT-5.4 High (Thinking)
 
-These were the latest and greatest models at the time.
+These were the latest and greatest models at the time. Since then I've mostly used the latest Claude version for maintenance.
 
 **AI's used during maintenance:**
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -31,7 +31,7 @@
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.9.0",
+    "eslint": "^10.9.1",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",

package/src/context.js

@@ -5,14 +5,15 @@
 import { isUnicodeCompatibleCharset } from './charset.js';
 
 /**
- * Creates a fresh minification context used to track `@property`-registered custom properties and their declared syntax types across the entire stylesheet.
+ * Creates a fresh minification context used to track `@property`-registered custom properties, their declared syntax types, and the properties that a newly assembled shorthand must not silently reset, across the entire stylesheet.
  *
- * @return {object} A context object with a registeredCustomProperties Set and a registeredCustomPropertySyntax Map.
+ * @return {object} A context object with a registeredCustomProperties Set, a registeredCustomPropertySyntax Map, and a stylesheetResetProperties Set.
  */
 function createMinifyContext () {
   return {
     registeredCustomProperties: new Set(),
-    registeredCustomPropertySyntax: new Map()
+    registeredCustomPropertySyntax: new Map(),
+    stylesheetResetProperties: new Set()
   };
 }
 

package/src/declarations/border.js

@@ -6,6 +6,8 @@ import { minifyValue } from '../value/minify.js';
 import { splitTopLevelComponents } from '../value/syntax.js';
 
 import { 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'];
 
@@ -32,10 +34,17 @@ function findLastDeclarationIndex (declarations, property) {
  * by a `border-color` override that restores the per-edge colors. The rewrite is
  * only applied when the resulting pair is shorter than the three longhands.
  *
- * @param  {Array} declarations  The declarations of a single rule.
- * @return {Array}               The declarations, with the trio rewritten when it is shorter.
+ * @param  {Array}  declarations  The declarations of a single rule.
+ * @param  {object} context       The minification context with the stylesheet's reset properties.
+ * @return {Array}                The declarations, with the trio rewritten when it is shorter.
  */
-function collapseBorderTrioWithPerEdgeColor (declarations) {
+function collapseBorderTrioWithPerEdgeColor (declarations, context) {
+  // The `border` shorthand also resets `border-image`, so the trio stays as it
+  // is when another rule of the stylesheet relies on that value.
+  if (resetsPropertyDeclaredElsewhere('border', collectDeclaredProperties(declarations), context)) {
+    return declarations;
+  }
+
   const trioIndexes = BORDER_TRIO_PROPERTIES.map((property) => {
     return findLastDeclarationIndex(declarations, property);
   });

package/src/declarations/config.js

@@ -2,6 +2,46 @@
  * @file Defines lookup tables mapping CSS shorthand properties to their constituent longhand properties and override relationships.
  */
 
+/**
+ * The gap decoration rule components that CSS Gaps 1 defines once per
+ * direction, as a `column-rule-*` and a `row-rule-*` longhand.
+ *
+ * @type {Array}
+ */
+const GAP_DECORATION_RULE_COMPONENTS = [
+  'width',
+  'style',
+  'color',
+  'break',
+  'visibility-items',
+  'inset-cap-start',
+  'inset-cap-end',
+  'inset-junction-start',
+  'inset-junction-end'
+];
+
+/**
+ * Builds the bidirectional `rule-*` gap decoration shorthands, each of which
+ * applies a single value to both the column and the row longhand of one gap
+ * decoration component.
+ *
+ * @return {object} A lookup of shorthand name to its column and row longhands.
+ */
+function createBidirectionalGapRuleShorthands () {
+  const shorthands = {};
+  for (const component of GAP_DECORATION_RULE_COMPONENTS) {
+    shorthands['rule-' + component] = ['column-rule-' + component, 'row-rule-' + component];
+  }
+  return shorthands;
+}
+
+/**
+ * The bidirectional gap decoration shorthands, keyed by shorthand name.
+ *
+ * @type {object}
+ */
+const BIDIRECTIONAL_GAP_RULE_SHORTHANDS = createBidirectionalGapRuleShorthands();
+
 const shorthandMap = {
   margin: ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
   padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'],
@@ -42,12 +82,15 @@ const shorthandMap = {
   animation: ['animation-name', 'animation-duration', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
   mask: ['mask-image', 'mask-repeat', 'mask-size'],
   'position-try': ['position-try-order', 'position-try-fallbacks'],
-  font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family']
+  font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family'],
+  marker: ['marker-start', 'marker-mid', 'marker-end'],
+  ...BIDIRECTIONAL_GAP_RULE_SHORTHANDS
 };
 
 const shorthandOverrideMap = {
+  animation: ['animation-timeline', 'animation-range', 'animation-range-start', 'animation-range-end'],
   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: ['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']
 };
 
@@ -77,6 +120,19 @@ const EDGE_SHORTHANDS = new Set([
   'border-block-end'
 ]);
 
+/**
+ * Shorthands that apply one value to every longhand they set, such as the SVG
+ * `marker` shorthand and the bidirectional gap decoration rules. They have no
+ * way to express longhands that differ, so a group of longhands only collapses
+ * into them when every longhand already holds the same value.
+ *
+ * @type {Set<string>}
+ */
+const UNIFORM_VALUE_SHORTHANDS = new Set([
+  'marker',
+  ...Object.keys(BIDIRECTIONAL_GAP_RULE_SHORTHANDS)
+]);
+
 /**
  * The four physical edge shorthands that together cover the `border` shorthand.
  *
@@ -142,12 +198,50 @@ function getOverridesOf (shorthandName) {
   return OVERRIDES_BY_SHORTHAND.get(shorthandName) || NO_PROPERTIES;
 }
 
+/**
+ * The leaf longhands each property ultimately sets, computed on first use. The
+ * shorthand tables never change, so a property always expands the same way.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const leafPropertiesByProperty = new Map();
+
+/**
+ * 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.
+ * @return {Set}              The set of leaf longhand property names.
+ */
+function expandToLeafProperties (property) {
+  const cachedLeaves = leafPropertiesByProperty.get(property);
+  if (cachedLeaves) {
+    return cachedLeaves;
+  }
+  const leafProperties = new Set();
+  const longhands = shorthandMap[property];
+  if (!longhands) {
+    leafProperties.add(property);
+  } else {
+    for (const longhand of longhands) {
+      for (const leafProperty of expandToLeafProperties(longhand)) {
+        leafProperties.add(leafProperty);
+      }
+    }
+  }
+  leafPropertiesByProperty.set(property, leafProperties);
+  return leafProperties;
+}
+
 export {
   BORDER_EDGE_PROPERTIES,
   CSS_WIDE_KEYWORDS,
   EDGE_SHORTHANDS,
+  expandToLeafProperties,
   getLonghandsOf,
   getOverridesOf,
   shorthandMap,
-  shorthandOverrideMap
+  shorthandOverrideMap,
+  UNIFORM_VALUE_SHORTHANDS
 };

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

@@ -2,51 +2,18 @@
  * @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,
+  expandToLeafProperties,
   getLonghandsOf,
   getOverridesOf,
   shorthandMap
 } from './config.js';
-import { collectDeclaredProperties } from './lookup.js';
-
-/**
- * The leaf longhands each property ultimately sets, computed on first use. The
- * shorthand tables never change, so a property always expands the same way.
- *
- * @type {Map<string, Set<string>>}
- */
-const leafPropertiesByProperty = new Map();
-
-/**
- * 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.
- * @return {Set}              The set of leaf longhand property names.
- */
-function expandToLeafProperties (property) {
-  const cachedLeaves = leafPropertiesByProperty.get(property);
-  if (cachedLeaves) {
-    return cachedLeaves;
-  }
-  const leafProperties = new Set();
-  const longhands = shorthandMap[property];
-  if (!longhands) {
-    leafProperties.add(property);
-  } else {
-    for (const longhand of longhands) {
-      for (const leafProperty of expandToLeafProperties(longhand)) {
-        leafProperties.add(leafProperty);
-      }
-    }
-  }
-  leafPropertiesByProperty.set(property, leafProperties);
-  return leafProperties;
-}
+import {
+  collectDeclaredProperties,
+  describeDeclaration
+} from './lookup.js';
+import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 /**
  * Checks whether a group of longhands sets every leaf longhand that the
@@ -70,16 +37,6 @@ function coversEveryLonghandOfShorthand (shorthandName, properties) {
   });
 }
 
-/**
- * @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.
@@ -95,16 +52,7 @@ function collectLonghandEntries (declarations, shorthandName) {
     if (!declaration.property || !longhands.has(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
-    });
+    entries.push(describeDeclaration(declaration, index));
   });
   return entries;
 }
@@ -206,12 +154,16 @@ function resetsEarlierDeclaration (declarations, shorthandName, insertionIndex)
  * @param  {Array}      declarations        The declarations of a single rule.
  * @param  {string}     shorthandName       The target shorthand property name.
  * @param  {Set}        declaredProperties  The property names the rule currently declares.
+ * @param  {object}     context             The minification context with the stylesheet's reset properties.
  * @return {Array|null}                     The rewritten declarations, or null when the rewrite does not apply.
  */
-function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredProperties) {
+function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredProperties, context) {
   if (declaredProperties.has(shorthandName)) {
     return null;
   }
+  if (resetsPropertyDeclaredElsewhere(shorthandName, declaredProperties, context)) {
+    return null;
+  }
 
   const entries = collectLonghandEntries(declarations, shorthandName);
   if (entries.length < 2 || hasRepeatedProperty(entries)) {
@@ -283,10 +235,11 @@ function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredPr
  * 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.
+ * @param  {Array}  declarations  The declarations of a single rule.
+ * @param  {object} context       The minification context with the stylesheet's reset properties.
+ * @return {Array}                The declarations, with eligible groups rewritten.
  */
-function hoistCssWideKeywordsIntoShorthands (declarations) {
+function hoistCssWideKeywordsIntoShorthands (declarations, context) {
   let result = declarations;
   // Every shorthand needs to know which properties the rule declares, so that
   // set is kept alongside the declarations and only rebuilt after a rewrite
@@ -295,7 +248,7 @@ function hoistCssWideKeywordsIntoShorthands (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, declaredProperties);
+    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName, declaredProperties, context);
     if (rewritten) {
       result = rewritten;
       declaredProperties = collectDeclaredProperties(result);

package/src/declarations/fold.js

@@ -0,0 +1,342 @@
+/**
+ * @file Folds longhand declarations that follow their own shorthand back into that shorthand, whenever restating the whole shorthand is shorter than keeping the shorthand and its overrides apart.
+ */
+
+import { splitTopLevelComponents } from '../value/syntax.js';
+
+import {
+  CSS_WIDE_KEYWORDS,
+  expandToLeafProperties,
+  shorthandMap
+} from './config.js';
+import { describeDeclaration } from './lookup.js';
+import { canMergeVarValue } from './merge.js';
+import { buildShorthandValue } from './shorthand-values.js';
+
+/**
+ * The shorthands whose value is a positional list of the values of their
+ * longhands: either a start/end pair or the four sides of a box. Only these can
+ * be expanded back into one value per longhand and rebuilt around an override.
+ *
+ * @type {Array}
+ */
+const POSITIONAL_SHORTHAND_NAMES = [
+  'margin',
+  'padding',
+  'inset',
+  'gap',
+  'overflow',
+  'place-items',
+  'place-content',
+  'place-self',
+  'border-width',
+  'border-style',
+  'border-color',
+  'border-radius',
+  'margin-inline',
+  'margin-block',
+  'padding-inline',
+  'padding-block',
+  'inset-inline',
+  'inset-block',
+  'border-inline-width',
+  'border-block-width'
+];
+
+/**
+ * The words of the property names that describe the same box as a shorthand,
+ * computed on first use. The shorthand tables never change, so a shorthand
+ * always has the same family.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const familyWordsByShorthand = new Map();
+
+/**
+ * Collects the hyphen separated words of a shorthand and of every longhand it
+ * sets. Logical properties such as `padding-inline-start` describe the same box
+ * as physical ones such as `padding-right`, but which physical side they map to
+ * depends on the writing mode, so the words of the names are what relates them.
+ *
+ * @param  {string} shorthandName  The CSS shorthand property name.
+ * @return {Set}                   The words that mark a property as part of the same family.
+ */
+function collectFamilyWords (shorthandName) {
+  const cachedWords = familyWordsByShorthand.get(shorthandName);
+  if (cachedWords) {
+    return cachedWords;
+  }
+  const words = new Set(shorthandName.split('-'));
+  for (const leafProperty of expandToLeafProperties(shorthandName)) {
+    for (const word of leafProperty.split('-')) {
+      words.add(word);
+    }
+  }
+  familyWordsByShorthand.set(shorthandName, words);
+  return words;
+}
+
+/**
+ * Checks whether a property might set part of the same box as a shorthand,
+ * which it does when the two names have a word in common.
+ *
+ * @param  {string}  property     The property name to classify.
+ * @param  {Set}     familyWords  The words of the shorthand's family.
+ * @return {boolean}              Whether the property belongs to the same family.
+ */
+function belongsToFamily (property, familyWords) {
+  return property.split('-').some((word) => {
+    return familyWords.has(word);
+  });
+}
+
+/**
+ * @typedef  {object} FoldCandidate
+ * @property {object} shorthandEntry   The description of the shorthand declaration.
+ * @property {Array}  overrideEntries  The descriptions of the longhands that follow it.
+ */
+
+/**
+ * Finds the shorthand of a family and the longhands declared after it, which
+ * are the declarations a fold would replace with a single shorthand. A family
+ * that states its shorthand or one of its longhands twice keeps an intentional
+ * fallback, so it is left alone.
+ *
+ * @param  {Array}              declarations   The declarations of a single rule, in source order.
+ * @param  {string}             shorthandName  The CSS shorthand property name.
+ * @return {FoldCandidate|null}                The declarations to fold, or null when there are none.
+ */
+function findFoldCandidate (declarations, shorthandName) {
+  const longhandProperties = new Set(shorthandMap[shorthandName]);
+  const shorthandEntries = [];
+  const overrideEntries = [];
+  const overriddenProperties = new Set();
+  let hasRepeatedOverride = false;
+
+  declarations.forEach((declaration, index) => {
+    if (declaration.property === shorthandName) {
+      shorthandEntries.push(describeDeclaration(declaration, index));
+      return;
+    }
+    if (!shorthandEntries.length || !longhandProperties.has(declaration.property)) {
+      return;
+    }
+    if (overriddenProperties.has(declaration.property)) {
+      hasRepeatedOverride = true;
+    }
+    overriddenProperties.add(declaration.property);
+    overrideEntries.push(describeDeclaration(declaration, index));
+  });
+
+  if (shorthandEntries.length !== 1 || !overrideEntries.length || hasRepeatedOverride) {
+    return null;
+  }
+  return {
+    shorthandEntry: shorthandEntries[0],
+    overrideEntries
+  };
+}
+
+/**
+ * Checks whether a declaration lying between the shorthand and the last of its
+ * overrides would change meaning once the overrides move up to the shorthand.
+ * Only a declaration from another family is harmless, and a nested rule is
+ * never safe to step over because its own declarations may set the same box.
+ *
+ * @param  {Array}   declarations   The declarations of a single rule, in source order.
+ * @param  {string}  shorthandName  The CSS shorthand property name.
+ * @param  {object}  candidate      The shorthand and the longhands that follow it.
+ * @return {boolean}                Whether nothing stands in the way of the fold.
+ */
+function isFoldPathClear (declarations, shorthandName, candidate) {
+  const { shorthandEntry, overrideEntries } = candidate;
+  const foldedIndexes = new Set(overrideEntries.map((entry) => {
+    return entry.index;
+  }));
+  const lastOverrideIndex = overrideEntries[overrideEntries.length - 1].index;
+  const familyWords = collectFamilyWords(shorthandName);
+
+  for (let index = shorthandEntry.index + 1; index < lastOverrideIndex; index++) {
+    if (foldedIndexes.has(index)) {
+      continue;
+    }
+    const { property } = declarations[index];
+    if (!property || belongsToFamily(property, familyWords)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Determines whether a value can stand as one component of a positional
+ * shorthand. A CSS-wide keyword is only valid as a declaration's entire value,
+ * a `/` separates the two radii of a corner rather than two components, and a
+ * `var()` may expand to any number of components at computed value time.
+ *
+ * @param  {string}  component  The value component to check.
+ * @param  {object}  context    The minification context with registered custom property data.
+ * @return {boolean}            Whether the component can be positioned in a shorthand.
+ */
+function isPositionalComponent (component, context) {
+  return (
+    !component.includes('/') &&
+    !CSS_WIDE_KEYWORDS.has(component.toLowerCase()) &&
+    canMergeVarValue(component, context)
+  );
+}
+
+/**
+ * Expands the components of a positional shorthand into one value per longhand,
+ * repeating the value of the opposite side for every component the author left
+ * out, as the CSS box model rules require.
+ *
+ * @param  {Array}  components     The value components the shorthand was written with.
+ * @param  {number} longhandCount  The number of longhands the shorthand sets.
+ * @return {Array}                 One value per longhand, in longhand order.
+ */
+function expandPositionalComponents (components, longhandCount) {
+  if (longhandCount === 2) {
+    const [start, end = start] = components;
+    return [start, end];
+  }
+  const [top, right = top, bottom = top, left = right] = components;
+  return [top, right, bottom, left];
+}
+
+/**
+ * Rebuilds a shorthand from its own value plus the longhands declared after it.
+ *
+ * @param  {string}      shorthandName  The CSS shorthand property name.
+ * @param  {object}      candidate      The shorthand and the longhands that follow it.
+ * @param  {object}      context        The minification context with registered custom property data.
+ * @return {string|null}                The rebuilt shorthand value, or null when it cannot be built.
+ */
+function buildFoldedValue (shorthandName, candidate, context) {
+  const { shorthandEntry, overrideEntries } = candidate;
+  const longhands = shorthandMap[shorthandName];
+  const components = splitTopLevelComponents(shorthandEntry.value);
+  if (!components.length || components.length > longhands.length) {
+    return null;
+  }
+
+  const expandedValues = expandPositionalComponents(components, longhands.length);
+  const valueByProperty = new Map(longhands.map((property, index) => {
+    return [property, expandedValues[index]];
+  }));
+  for (const entry of overrideEntries) {
+    const overrideComponents = splitTopLevelComponents(entry.value);
+    if (overrideComponents.length !== 1) {
+      return null;
+    }
+    valueByProperty.set(entry.property, entry.value);
+  }
+
+  const cleanValues = longhands.map((property) => {
+    return valueByProperty.get(property);
+  });
+  const areAllPositional = cleanValues.every((value) => {
+    return isPositionalComponent(value, context);
+  });
+  if (!areAllPositional) {
+    return null;
+  }
+
+  return buildShorthandValue(shorthandName, {
+    properties: longhands,
+    valueMap: valueByProperty,
+    cleanValues,
+    importantSuffix: shorthandEntry.isImportant ? '!important' : ''
+  });
+}
+
+/**
+ * Replaces a shorthand and the longhands declared after it with the single
+ * shorthand that states the same box.
+ *
+ * @param  {Array}  declarations   The declarations of a single rule, in source order.
+ * @param  {string} shorthandName  The CSS shorthand property name.
+ * @param  {object} candidate      The shorthand and the longhands that follow it.
+ * @param  {string} foldedValue    The rebuilt shorthand value.
+ * @return {Array}                 The declarations, with the family stated once.
+ */
+function applyFold (declarations, shorthandName, candidate, foldedValue) {
+  const { shorthandEntry, overrideEntries } = candidate;
+  const foldedIndexes = new Set(overrideEntries.map((entry) => {
+    return entry.index;
+  }));
+  return declarations.flatMap((declaration, index) => {
+    if (index === shorthandEntry.index) {
+      return [{
+        property: shorthandName,
+        value: foldedValue,
+        isAssembledShorthand: true
+      }];
+    }
+    if (foldedIndexes.has(index)) {
+      return [];
+    }
+    return [declaration];
+  });
+}
+
+/**
+ * Folds the longhands that follow one shorthand back into it, when the single
+ * rebuilt shorthand is shorter than the declarations it replaces.
+ *
+ * @param  {Array}  declarations   The declarations of a single rule, in source order.
+ * @param  {string} shorthandName  The CSS shorthand property name.
+ * @param  {object} context        The minification context with registered custom property data.
+ * @return {Array}                 The declarations, folded when that is shorter.
+ */
+function foldOverridesIntoShorthand (declarations, shorthandName, context) {
+  const candidate = findFoldCandidate(declarations, shorthandName);
+  if (!candidate) {
+    return declarations;
+  }
+
+  // A shorthand and a longhand of differing importance do not describe one
+  // cascade step, so the pair cannot be restated as a single declaration.
+  const { shorthandEntry, overrideEntries } = candidate;
+  const shareImportance = overrideEntries.every((entry) => {
+    return entry.isImportant === shorthandEntry.isImportant;
+  });
+  if (!shareImportance || !isFoldPathClear(declarations, shorthandName, candidate)) {
+    return declarations;
+  }
+
+  const foldedValue = buildFoldedValue(shorthandName, candidate, context);
+  if (!foldedValue) {
+    return declarations;
+  }
+
+  const foldedLength = (shorthandName + ':' + foldedValue).length;
+  const originalLength = [shorthandEntry.text, ...overrideEntries.map((entry) => {
+    return entry.text;
+  })].join(';').length;
+  if (foldedLength >= originalLength) {
+    return declarations;
+  }
+
+  return applyFold(declarations, shorthandName, candidate, foldedValue);
+}
+
+/**
+ * Folds every longhand that follows its own shorthand back into that shorthand.
+ * A longhand after a shorthand only overrides the one side the shorthand had
+ * already set, so `padding:10px;padding-right:20px` states the same box as
+ * `padding:10px 20px 10px 10px`, and the shorter of the two is kept.
+ *
+ * @param  {Array}  declarations  The declarations of a single rule, in source order.
+ * @param  {object} context       The minification context with registered custom property data.
+ * @return {Array}                The declarations, with eligible families folded.
+ */
+function foldLonghandOverridesIntoShorthands (declarations, context) {
+  let result = declarations;
+  for (const shorthandName of POSITIONAL_SHORTHAND_NAMES) {
+    result = foldOverridesIntoShorthand(result, shorthandName, context);
+  }
+  return result;
+}
+
+export { foldLonghandOverridesIntoShorthands };