@thejaredwilcurt/csslop 0.0.24 → 0.0.26

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

@@ -0,0 +1,78 @@
+/**
+ * @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
+ * look a property's declaration up by name.
+ *
+ * @param  {Array} declarations  The declarations of a single rule, in source order.
+ * @return {Map}                 Map of property name to its first declaration.
+ */
+function indexFirstDeclarationByProperty (declarations) {
+  const declarationByProperty = new Map();
+  for (const declaration of declarations) {
+    if (declaration.property && !declarationByProperty.has(declaration.property)) {
+      declarationByProperty.set(declaration.property, declaration);
+    }
+  }
+  return declarationByProperty;
+}
+
+/**
+ * Collects the names of every property a rule declares.
+ *
+ * @param  {Array} declarations  The declarations of a single rule.
+ * @return {Set}                 The declared property names.
+ */
+function collectDeclaredProperties (declarations) {
+  const declaredProperties = new Set();
+  for (const declaration of declarations) {
+    if (declaration.property) {
+      declaredProperties.add(declaration.property);
+    }
+  }
+  return declaredProperties;
+}
+
+export {
+  collectDeclaredProperties,
+  describeDeclaration,
+  indexFirstDeclarationByProperty
+};

package/src/declarations/merge.js

@@ -8,9 +8,10 @@ import {
   BORDER_EDGE_PROPERTIES,
   CSS_WIDE_KEYWORDS,
   EDGE_SHORTHANDS,
-  shorthandMap,
-  shorthandOverrideMap
+  getLonghandsOf,
+  getOverridesOf
 } from './config.js';
+import { indexFirstDeclarationByProperty } from './lookup.js';
 import { buildShorthandValue } from './shorthand-values.js';
 
 /**
@@ -21,67 +22,72 @@ 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.
  *
- * @param  {string}     shorthand     The CSS shorthand property name.
- * @param  {Array}      longhands     The expected longhand property names for this shorthand.
- * @param  {Array}      declarations  The current array of CSS declaration objects.
- * @return {Array|null}               The list of longhand names to merge, or null if merging is not possible.
+ * @param  {string}     shorthand           The CSS shorthand property name.
+ * @param  {Array}      longhands           The expected longhand property names for this shorthand.
+ * @param  {Set}        declaredProperties  The property names the rule currently declares.
+ * @return {Array|null}                     The list of longhand names to merge, or null if merging is not possible.
  */
-function getMergeProps (shorthand, longhands, declarations) {
+function getMergeProps (shorthand, longhands, declaredProperties) {
   const presentLonghands = longhands.filter((longhand) => {
-    return declarations.some((declaration) => {
-      return declaration.property === longhand;
-    });
+    return declaredProperties.has(longhand);
   });
   if (presentLonghands.length === 0) {
     return null;
   }
-  if (shorthand === 'font') {
-    const hasRequiredFontProps = presentLonghands.includes('font-size') && presentLonghands.includes('font-family');
-    if (hasRequiredFontProps) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'background-position') {
-    const hasBothAxes = presentLonghands.includes('background-position-x') && presentLonghands.includes('background-position-y');
-    if (hasBothAxes) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'background') {
-    const hasBackgroundProp = presentLonghands.includes('background-color') || presentLonghands.includes('background-image');
-    if (hasBackgroundProp) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'mask') {
-    if (presentLonghands.includes('mask-image')) {
-      return presentLonghands;
-    }
-    return null;
-  }
-  if (shorthand === 'border-image') {
-    if (presentLonghands.includes('border-image-source')) {
+  const requirementGroups = PARTIAL_MERGE_REQUIREMENTS[shorthand];
+  if (requirementGroups) {
+    if (meetsPartialMergeRequirements(requirementGroups, declaredProperties)) {
       return presentLonghands;
     }
     return null;
   }
   if (shorthand === 'border') {
     const hasAllBorderParts = (
-      presentLonghands.includes('border-width') &&
-      presentLonghands.includes('border-style') &&
-      presentLonghands.includes('border-color')
+      declaredProperties.has('border-width') &&
+      declaredProperties.has('border-style') &&
+      declaredProperties.has('border-color')
     );
     if (hasAllBorderParts) {
       return ['border-width', 'border-style', 'border-color'];
     }
     const hasAllBorderEdges = BORDER_EDGE_PROPERTIES.every((edgeProperty) => {
-      return presentLonghands.includes(edgeProperty);
+      return declaredProperties.has(edgeProperty);
     });
     if (hasAllBorderEdges) {
       return [...BORDER_EDGE_PROPERTIES];
@@ -90,9 +96,9 @@ function getMergeProps (shorthand, longhands, declarations) {
   }
   if (shorthand === 'flex') {
     const hasAllFlexParts = (
-      presentLonghands.includes('flex-grow') &&
-      presentLonghands.includes('flex-shrink') &&
-      presentLonghands.includes('flex-basis')
+      declaredProperties.has('flex-grow') &&
+      declaredProperties.has('flex-shrink') &&
+      declaredProperties.has('flex-basis')
     );
     if (hasAllFlexParts) {
       return ['flex-grow', 'flex-shrink', 'flex-basis'];
@@ -150,13 +156,12 @@ function canMergeVarValue (value, context) {
  * @return {boolean}                True when the shorthand only affects the merged longhands.
  */
 function shorthandAffectsOnlyMergedLonghands (shorthandName, properties) {
-  const overrides = shorthandOverrideMap[shorthandName] || [];
-  if (overrides.length) {
+  if (getOverridesOf(shorthandName).size) {
     return false;
   }
-  const longhands = shorthandMap[shorthandName] || [];
-  return longhands.every((longhand) => {
-    return properties.includes(longhand);
+  const mergedProperties = new Set(properties);
+  return [...getLonghandsOf(shorthandName)].every((longhand) => {
+    return mergedProperties.has(longhand);
   });
 }
 
@@ -196,10 +201,9 @@ function resolveCssWideKeywordMerge (values, shorthandName, properties) {
  * @return {Array|null}               The minified longhand values, or null when one is missing.
  */
 function collectLonghandValues (properties, declarations) {
+  const declarationByProperty = indexFirstDeclarationByProperty(declarations);
   const values = properties.map((property) => {
-    const declaration = declarations.find((candidate) => {
-      return candidate.property === property;
-    });
+    const declaration = declarationByProperty.get(property);
     if (declaration) {
       return minifyValue(declaration);
     }
@@ -318,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) {
@@ -55,20 +68,46 @@ function orderDeclarations (declarations) {
 }
 
 /**
- * Get all longhands that a shorthand would override.
+ * The overridden longhands of each shorthand, computed on first use. The
+ * shorthand tables never change, so the answer for a property name is the same
+ * every time it is asked for.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const overriddenLonghandsByShorthand = new Map();
+
+/**
+ * Collects all longhands that a shorthand would override.
  *
  * @param  {string} shorthandProperty  The CSS shorthand property name.
- * @return {Array}                     A deduplicated array of all longhand property names that the shorthand overrides, including nested longhands.
+ * @return {Set}                       The longhand property names the shorthand overrides, including nested longhands.
  */
-function getOverriddenLonghands (shorthandProperty) {
+function collectOverriddenLonghands (shorthandProperty) {
   const direct = shorthandMap[shorthandProperty] || [];
   const overrides = shorthandOverrideMap[shorthandProperty] || [];
-  const all = [...direct, ...overrides];
+  const all = new Set([...direct, ...overrides]);
   for (const property of direct) {
     const nested = shorthandMap[property] || [];
-    all.push(...nested);
+    for (const nestedProperty of nested) {
+      all.add(nestedProperty);
+    }
+  }
+  return all;
+}
+
+/**
+ * Get all longhands that a shorthand would override.
+ *
+ * @param  {string} shorthandProperty  The CSS shorthand property name.
+ * @return {Set}                       The longhand property names that the shorthand overrides, including nested longhands.
+ */
+function getOverriddenLonghands (shorthandProperty) {
+  let overridden = overriddenLonghandsByShorthand.get(shorthandProperty);
+  if (!overridden) {
+    overridden = collectOverriddenLonghands(shorthandProperty);
+    overriddenLonghandsByShorthand.set(shorthandProperty, overridden);
   }
-  return [...new Set(all)];
+  return overridden;
 }
 
 export {