@thejaredwilcurt/csslop 0.0.25 → 0.0.26

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.26",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",

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,10 +82,13 @@ 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'],
   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,17 @@
  * @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';
 
 /**
  * Checks whether a group of longhands sets every leaf longhand that the
@@ -70,16 +36,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 +51,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;
 }

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 };

package/src/declarations/lookup.js

@@ -1,9 +1,42 @@
 /**
- * @file Builds keyed lookups over a rule's declarations, so the shorthand
- * passes can ask which properties a rule sets without rescanning its
- * declarations once per property they are interested in.
+ * @file Builds keyed lookups and normalized views over a rule's declarations,
+ * so the shorthand passes can ask which properties a rule sets, and what each
+ * of them minifies to, without rescanning its declarations once per property
+ * they are interested in.
  */
 
+import { minifyValue } from '../value/minify.js';
+
+/**
+ * @typedef  {object}  DeclarationDescription
+ * @property {object}  declaration             The original declaration object.
+ * @property {number}  index                   The declaration's index within the rule.
+ * @property {string}  property                The declared 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`.
+ */
+
+/**
+ * Describes a declaration through its minified value, which is the form the
+ * shorthand passes compare, rewrite, and measure the output length of.
+ *
+ * @param  {object}                 declaration  The CSS declaration object.
+ * @param  {number}                 index        The declaration's index within the rule.
+ * @return {DeclarationDescription}              The normalized view of the declaration.
+ */
+function describeDeclaration (declaration, index) {
+  const minifiedValue = minifyValue(declaration);
+  return {
+    declaration,
+    index,
+    property: declaration.property,
+    text: declaration.property + ':' + minifiedValue,
+    value: minifiedValue.replace('!important', '').trim(),
+    isImportant: minifiedValue.includes('!important')
+  };
+}
+
 /**
  * Indexes the first declaration of each property. The first occurrence is the
  * one a linear search would return, so this stands in for repeated scans that
@@ -40,5 +73,6 @@ function collectDeclaredProperties (declarations) {
 
 export {
   collectDeclaredProperties,
+  describeDeclaration,
   indexFirstDeclarationByProperty
 };

package/src/declarations/merge.js

@@ -22,6 +22,39 @@ import { buildShorthandValue } from './shorthand-values.js';
  */
 const MIXED_IMPORTANT_SHORTHANDS = new Set(['margin', 'padding', 'inset', 'position-try']);
 
+/**
+ * The shorthands that may be built from only some of their longhands, and the
+ * longhands each of them cannot do without. Every listed group has to be
+ * satisfied by at least one of the properties it holds, so `font` needs both a
+ * size and a family, while `background` needs a color or an image.
+ *
+ * @type {{[key: string]: Array}}
+ */
+const PARTIAL_MERGE_REQUIREMENTS = {
+  animation: [['animation-name'], ['animation-duration']],
+  background: [['background-color', 'background-image']],
+  'background-position': [['background-position-x'], ['background-position-y']],
+  'border-image': [['border-image-source']],
+  font: [['font-size'], ['font-family']],
+  mask: [['mask-image']]
+};
+
+/**
+ * Checks whether a rule declares enough of a shorthand's longhands for the
+ * shorthand to be built from the subset it does declare.
+ *
+ * @param  {Array}   requirementGroups   The groups of interchangeable longhands the shorthand requires.
+ * @param  {Set}     declaredProperties  The property names the rule currently declares.
+ * @return {boolean}                     Whether every requirement group is satisfied.
+ */
+function meetsPartialMergeRequirements (requirementGroups, declaredProperties) {
+  return requirementGroups.every((requiredProperties) => {
+    return requiredProperties.some((property) => {
+      return declaredProperties.has(property);
+    });
+  });
+}
+
 /**
  * Determines which longhand properties are present and eligible for merging into a given shorthand. Returns null when the required longhands for the shorthand are not all available.
  *
@@ -37,35 +70,9 @@ function getMergeProps (shorthand, longhands, declaredProperties) {
   if (presentLonghands.length === 0) {
     return null;
   }
-  if (shorthand === 'font') {
-    const hasRequiredFontProps = declaredProperties.has('font-size') && declaredProperties.has('font-family');
-    if (hasRequiredFontProps) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'background-position') {
-    const hasBothAxes = declaredProperties.has('background-position-x') && declaredProperties.has('background-position-y');
-    if (hasBothAxes) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'background') {
-    const hasBackgroundProp = declaredProperties.has('background-color') || declaredProperties.has('background-image');
-    if (hasBackgroundProp) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'mask') {
-    if (declaredProperties.has('mask-image')) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'border-image') {
-    if (declaredProperties.has('border-image-source')) {
+  const requirementGroups = PARTIAL_MERGE_REQUIREMENTS[shorthand];
+  if (requirementGroups) {
+    if (meetsPartialMergeRequirements(requirementGroups, declaredProperties)) {
       return presentLonghands;
     }
     return null;
@@ -315,6 +322,7 @@ function tryMergeToShorthand (properties, declarations, shorthandName = '', cont
 }
 
 export {
+  canMergeVarValue,
   getMergeProps,
   tryMergeToShorthand
 };

package/src/declarations/order.js

@@ -6,6 +6,7 @@ import {
   shorthandMap,
   shorthandOverrideMap
 } from './config.js';
+import { collectDeclaredProperties } from './lookup.js';
 
 /**
  * Pairs of properties where the first must be emitted before the second, because
@@ -15,6 +16,10 @@ import {
  * @type {Array}
  */
 const REQUIRED_PROPERTY_ORDER = [
+  ['animation', 'animation-timeline'],
+  ['animation', 'animation-range'],
+  ['animation', 'animation-range-start'],
+  ['animation', 'animation-range-end'],
   ['border', 'border-image'],
   ['font', 'font-feature-settings'],
   ['font', 'font-variant-ligatures'],
@@ -40,8 +45,16 @@ function orderDeclarations (declarations) {
       return declaration?.property === property;
     });
   };
+  // Most rules declare neither half of any of these pairs, so the properties a
+  // rule does declare are gathered once rather than scanned for per pair.
+  // Reordering the declarations never changes which properties are declared,
+  // so the set stays accurate as the pairs are applied.
+  const declaredProperties = collectDeclaredProperties(ordered);
 
   for (const [property, followingProperty] of REQUIRED_PROPERTY_ORDER) {
+    if (!declaredProperties.has(property) || !declaredProperties.has(followingProperty)) {
+      continue;
+    }
     const fromIndex = findPropertyIndex(property);
     const toIndex = findPropertyIndex(followingProperty);
     if (fromIndex === -1 || toIndex === -1 || fromIndex < toIndex) {

package/src/declarations/process.js

@@ -12,6 +12,7 @@ import {
   shorthandMap
 } from './config.js';
 import { hoistCssWideKeywordsIntoShorthands } from './css-wide-keywords.js';
+import { foldLonghandOverridesIntoShorthands } from './fold.js';
 import {
   collectDeclaredProperties,
   indexFirstDeclarationByProperty
@@ -396,6 +397,7 @@ function processDeclarations (declarations, context) {
   result = removeLonghandsOverriddenByShorthands(result);
   result = absorbBackgroundLonghandsIntoShorthand(result);
   result = mergeLonghandsIntoShorthands(result, context);
+  result = foldLonghandOverridesIntoShorthands(result, context);
   result = hoistCssWideKeywordsIntoShorthands(result);
   result = collapseBorderTrioWithPerEdgeColor(result);
 

package/src/declarations/shorthand-values.js

@@ -6,6 +6,7 @@ import { collapseShorthandParts } from '../value/shared.js';
 import { splitTopLevelComponents } from '../value/syntax.js';
 
 import { buildBackgroundShorthandValue } from './background.js';
+import { UNIFORM_VALUE_SHORTHANDS } from './config.js';
 
 /**
  * @typedef  {object} ShorthandComponents
@@ -275,6 +276,25 @@ function buildFlexValue ({ valueMap, importantSuffix }) {
   return [grow, shrink, basis].join(' ') + importantSuffix;
 }
 
+/**
+ * Builds the value of a shorthand that applies one value to every longhand it
+ * sets, such as `marker` or the bidirectional gap decoration rules. Such a
+ * shorthand cannot express longhands that differ, so the group only collapses
+ * when every longhand already holds the same value.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildUniformValue ({ cleanValues, importantSuffix }) {
+  const isSharedByAll = cleanValues.every((value) => {
+    return value === cleanValues[0];
+  });
+  if (!isSharedByAll) {
+    return null;
+  }
+  return cleanValues[0] + importantSuffix;
+}
+
 /**
  * Determines whether a shorthand takes a single width, style, and color, as
  * `border` and `outline` do.
@@ -364,6 +384,9 @@ const NAMED_SHORTHAND_BUILDERS = {
  * @return {string|null}                        The shorthand value, or null when it cannot be built.
  */
 function buildShorthandValue (shorthandName, components) {
+  if (UNIFORM_VALUE_SHORTHANDS.has(shorthandName)) {
+    return buildUniformValue(components);
+  }
   const namedBuilder = NAMED_SHORTHAND_BUILDERS[shorthandName];
   if (namedBuilder) {
     return namedBuilder(components);

package/src/position-try.js

@@ -2,6 +2,8 @@
  * @file Handles `@position-try` rule analysis, usage tracking, and dead-rule elimination during CSS minification.
  */
 
+import { registersCustomProperty } from './rules/property.js';
+
 /**
  * Scans top-level rules to register `@property` custom properties in the context and collect `@position-try` rule declarations and initial usage counts.
  *
@@ -14,7 +16,7 @@ function collectRuleMetadata (rules, context) {
   const positionTryUsage = new Map();
 
   for (const rule of rules) {
-    if (rule.type === 'property' && rule.name) {
+    if (rule.type === 'property' && rule.name && registersCustomProperty(rule)) {
       context.registeredCustomProperties.add(rule.name);
       const syntaxDeclaration = (rule.declarations || []).find((declaration) => {
         return declaration.type !== 'whitespace' && declaration.property === 'syntax';

package/src/rules/property.js

@@ -0,0 +1,177 @@
+/**
+ * @file Analyzes `@property` at-rules, resolving each descriptor against the value the CSS engine assumes when the descriptor is absent, so redundant descriptors and pointless registrations can be dropped.
+ */
+
+/**
+ * The descriptors an `@property` rule can declare. Anything else inside the
+ * rule is an unknown descriptor, which the CSS engine discards while parsing.
+ *
+ * @type {Set<string>}
+ */
+const PROPERTY_DESCRIPTORS = new Set([
+  'syntax',
+  'inherits',
+  'initial-value'
+]);
+
+/**
+ * The syntax that accepts any token sequence. It is also the syntax a
+ * registration falls back to when the rule omits the `syntax` descriptor.
+ *
+ * @type {string}
+ */
+const UNIVERSAL_SYNTAX = '*';
+
+/**
+ * The inheritance a registration falls back to when the rule omits the
+ * `inherits` descriptor.
+ *
+ * @type {string}
+ */
+const DEFAULT_INHERITS = 'true';
+
+/**
+ * Reads a descriptor value the way the CSS engine compares it, ignoring the
+ * whitespace that surrounds the value.
+ *
+ * @param  {object} declaration  The descriptor declaration node.
+ * @return {string}              The descriptor value without surrounding whitespace.
+ */
+function readDescriptorValue (declaration) {
+  return String(declaration.value ?? '').trim();
+}
+
+/**
+ * Reads a `syntax` descriptor as the syntax it describes, rather than as the
+ * string it is written as, so it can be compared against the universal syntax.
+ *
+ * @param  {string} syntaxValue  The raw `syntax` descriptor value, such as `"<length>"`.
+ * @return {string}              The described syntax, such as `<length>`.
+ */
+function unquoteSyntax (syntaxValue) {
+  // A value wrapped in a matching pair of quotes, capturing the string contents
+  const quotedStringPattern = /^(["'])([\s\S]*)\1$/;
+  const quotedString = syntaxValue.match(quotedStringPattern);
+  if (quotedString) {
+    return quotedString[2].trim();
+  }
+  return syntaxValue;
+}
+
+/**
+ * Collects the descriptors an `@property` rule declares, keyed by descriptor
+ * name and ordered by first appearance. Unknown descriptors are left out
+ * because the CSS engine ignores them, and a descriptor declared more than
+ * once resolves to its final declaration, which is the one the engine keeps.
+ *
+ * @param  {object} rule  The `@property` AST rule node.
+ * @return {Map}          Descriptor names mapped to the declaration that wins.
+ */
+function collectPropertyDescriptors (rule) {
+  const descriptors = new Map();
+  for (const declaration of rule.declarations || []) {
+    const descriptorName = String(declaration.property ?? '').toLowerCase();
+    const isKnownDescriptor = (
+      declaration.type === 'declaration' &&
+      PROPERTY_DESCRIPTORS.has(descriptorName)
+    );
+    if (isKnownDescriptor) {
+      descriptors.set(descriptorName, declaration);
+    }
+  }
+  return descriptors;
+}
+
+/**
+ * Resolves the syntax a set of descriptors registers, falling back to the
+ * universal syntax when the `syntax` descriptor is absent.
+ *
+ * @param  {Map}    descriptors  Descriptor names mapped to their declarations.
+ * @return {string}              The registered syntax.
+ */
+function resolveRegisteredSyntax (descriptors) {
+  const syntaxDeclaration = descriptors.get('syntax');
+  if (!syntaxDeclaration) {
+    return UNIVERSAL_SYNTAX;
+  }
+  return unquoteSyntax(readDescriptorValue(syntaxDeclaration));
+}
+
+/**
+ * Reports whether the CSS engine accepts the registration a set of descriptors
+ * describes. Registering anything narrower than the universal syntax requires
+ * an `initial-value`, since the engine has no valid value to start from
+ * otherwise, and a registration it rejects has no effect on the stylesheet.
+ *
+ * @param  {Map}     descriptors  Descriptor names mapped to their declarations.
+ * @return {boolean}              True when the registration is valid.
+ */
+function isValidRegistration (descriptors) {
+  if (resolveRegisteredSyntax(descriptors) === UNIVERSAL_SYNTAX) {
+    return true;
+  }
+  return descriptors.has('initial-value');
+}
+
+/**
+ * Reports whether a descriptor declares exactly what the CSS engine already
+ * assumes, which makes writing the descriptor out pointless. An
+ * `initial-value` always says something, because the value it defaults to is
+ * the guaranteed-invalid value, which no declaration can spell out.
+ *
+ * @param  {string}  descriptorName  The lowercased descriptor name.
+ * @param  {object}  declaration     The descriptor declaration node.
+ * @return {boolean}                 True when the descriptor restates a default.
+ */
+function isDefaultDescriptor (descriptorName, declaration) {
+  const value = readDescriptorValue(declaration);
+  if (descriptorName === 'syntax') {
+    return unquoteSyntax(value) === UNIVERSAL_SYNTAX;
+  }
+  if (descriptorName === 'inherits') {
+    return value.toLowerCase() === DEFAULT_INHERITS;
+  }
+  return false;
+}
+
+/**
+ * Reduces an `@property` rule to the descriptors worth writing out, meaning
+ * the ones that describe something other than what the CSS engine assumes on
+ * its own. An empty result means the entire rule can be dropped, either
+ * because the engine rejects the registration or because the registration
+ * matches an unregistered custom property in every way.
+ *
+ * @param  {object} rule  The `@property` AST rule node.
+ * @return {Array}        The descriptor declarations to render.
+ */
+function resolvePropertyDescriptors (rule) {
+  const descriptors = collectPropertyDescriptors(rule);
+  if (!isValidRegistration(descriptors)) {
+    return [];
+  }
+  const meaningfulDescriptors = [];
+  for (const [descriptorName, declaration] of descriptors) {
+    if (!isDefaultDescriptor(descriptorName, declaration)) {
+      meaningfulDescriptors.push(declaration);
+    }
+  }
+  return meaningfulDescriptors;
+}
+
+/**
+ * Reports whether an `@property` rule survives minification, which is also
+ * what decides whether the rest of the stylesheet may rely on the custom
+ * property being registered. Rules that describe nothing beyond the defaults
+ * leave the custom property just as unregistered as never mentioning it.
+ *
+ * @param  {object}  rule  The `@property` AST rule node.
+ * @return {boolean}       True when the rule registers the custom property.
+ */
+function registersCustomProperty (rule) {
+  return resolvePropertyDescriptors(rule).length > 0;
+}
+
+export {
+  registersCustomProperty,
+  resolvePropertyDescriptors
+};

package/src/rules/stringify.js

@@ -17,6 +17,7 @@ import {
   unescapeIdent,
   unescapeSelector
 } from './normalize.js';
+import { resolvePropertyDescriptors } from './property.js';
 import {
   flattenNestingParentIsSelector,
   mergeAdjacentWherePseudoClasses,
@@ -518,32 +519,7 @@ function stringifyRule (rule, context) {
   }
 
   if (rule.type === 'property') {
-    const propertyDeclarations = (rule.declarations || []).filter((declaration) => {
-      return declaration.type === 'declaration' && declaration.property;
-    });
-    const hasSyntaxDescriptor = propertyDeclarations.some((declaration) => {
-      return declaration.property === 'syntax';
-    });
-    const hasInheritsDescriptor = propertyDeclarations.some((declaration) => {
-      return declaration.property === 'inherits';
-    });
-    if (!hasSyntaxDescriptor || !hasInheritsDescriptor) {
-      return '';
-    }
-
-    const syntaxDeclaration = propertyDeclarations.find((declaration) => {
-      return declaration.property === 'syntax';
-    });
-    const syntaxValue = (syntaxDeclaration.value || '').replace(/["']/g, '').trim();
-    const isUniversalSyntax = syntaxValue === '*';
-    const hasInitialValue = propertyDeclarations.some((declaration) => {
-      return declaration.property === 'initial-value';
-    });
-    if (!isUniversalSyntax && !hasInitialValue) {
-      return '';
-    }
-
-    let renderedDeclarations = stringifyDeclarations(rule.declarations || []);
+    const renderedDeclarations = stringifyDeclarations(resolvePropertyDescriptors(rule));
     if (!renderedDeclarations) {
       return '';
     }