postcss-merge-rules 8.0.3 → 8.0.4

package/src/index.js

@@ -10,6 +10,7 @@ const {
   sameVendor,
   noVendor,
 } = require('./lib/ensureCompatibility');
+const { isConflictingProp } = require('./lib/propertyRelations.js');
 /** @import {Declaration, Rule} from 'postcss' */
 /**
  * @param {Declaration} a
@@ -105,10 +106,7 @@ function canMerge(
     return false;
   }
 
-  const parent = sameParent(
-    /** @type {any} */ (ruleA),
-    /** @type {any} */ (ruleB)
-  );
+  const parent = sameParent(ruleA, ruleB);
   if (
     parent &&
     ruleA.parent &&
@@ -200,83 +198,6 @@ function ruleLength(...rules) {
   return rules.map((r) => (r.nodes.length ? String(r) : '')).join('').length;
 }
 
-/**
- * @param {string} prop
- * @return {{prefix: string?, base:string?, rest:string[]}}
- */
-function splitProp(prop) {
-  // Treat vendor prefixed properties as if they were unprefixed;
-  // moving them when combined with non-prefixed properties can
-  // cause issues. e.g. moving -webkit-background-clip when there
-  // is a background shorthand definition.
-
-  const parts = prop.split('-');
-  if (prop[0] !== '-') {
-    return {
-      prefix: '',
-      base: parts[0],
-      rest: parts.slice(1),
-    };
-  }
-  // Don't split css variables
-  if (prop[1] === '-') {
-    return {
-      prefix: null,
-      base: null,
-      rest: [prop],
-    };
-  }
-  // Found prefix
-  return {
-    prefix: parts[1],
-    base: parts[2],
-    rest: parts.slice(3),
-  };
-}
-
-/**
- * @param {string} propA
- * @param {string} propB
- * @return {boolean}
- */
-function isConflictingProp(propA, propB) {
-  if (propA === propB) {
-    // Same specificity
-    return true;
-  }
-  const a = splitProp(propA);
-  const b = splitProp(propB);
-  // Don't resort css variables
-  if (!a.base && !b.base) {
-    return true;
-  }
-
-  // Different base and none is `place`;
-  if (a.base !== b.base && a.base !== 'place' && b.base !== 'place') {
-    return false;
-  }
-
-  // Conflict if rest-count mismatches
-  if (a.rest.length !== b.rest.length) {
-    return true;
-  }
-
-  /* Do not merge conflicting border properties */
-  if (a.base === 'border') {
-    const allRestProps = new Set([...a.rest, ...b.rest]);
-    if (
-      allRestProps.has('image') ||
-      allRestProps.has('width') ||
-      allRestProps.has('color') ||
-      allRestProps.has('style')
-    ) {
-      return true;
-    }
-  }
-  // Conflict if rest parameters are equal (same but unprefixed)
-  return a.rest.every((s, index) => b.rest[index] === s);
-}
-
 /**
  * @param {Rule} first
  * @param {Rule} second
@@ -308,11 +229,12 @@ function getNextRule(second) {
   let nextRule = second.next();
   if (!nextRule) {
     // Grab next cousin
-    /** @type {any} */
     const parentSibling =
-      /** @type {import('postcss').Container<import('postcss').ChildNode>} */ (
-        second.parent
-      ).next();
+      /** @type {import('postcss').Container | undefined} */ (
+        /** @type {import('postcss').Container<import('postcss').ChildNode>} */ (
+          second.parent
+        ).next()
+      );
     nextRule = parentSibling && parentSibling.nodes && parentSibling.nodes[0];
   }
   return nextRule?.type === 'rule' ? nextRule : null;
@@ -365,66 +287,145 @@ function mergeWithNextRule(
 }
 
 /**
- * @param {Declaration[]} intersection
- * @param {Declaration[]} firstDecls
- * @param {Declaration[]} secondDecls
- * @return {Declaration[]}
+ * Returns true if hoisting `candidate` cannot reverse the cascade: every
+ * declaration that might override it is itself being
+ * hoisted, in the same relative order, so declarations move together.
+ *
+ * @param {Declaration} candidate
+ * @param {number} candidateIndex
+ * @param {Declaration[]} hoistCandidates
+ * @param {Declaration[]} earlierRuleDeclarations
+ * @return {boolean}
  */
-function filterIntersections(intersection, firstDecls, secondDecls) {
-  // Filter out intersections with later conflicts in First
-  intersection = intersection.filter((decl, intersectIndex) => {
-    const indexOfDecl = indexOfDeclaration(firstDecls, decl);
-    const nextConflictInFirst = firstDecls
-      .slice(indexOfDecl + 1)
-      .filter((d) => isConflictingProp(d.prop, decl.prop));
-    if (nextConflictInFirst.length === 0) {
-      return true;
-    }
-    const nextConflictInIntersection = intersection
-      .slice(intersectIndex + 1)
-      .filter((d) => isConflictingProp(d.prop, decl.prop));
-    if (nextConflictInFirst.length !== nextConflictInIntersection.length) {
-      return false;
-    }
-    return nextConflictInFirst.every((d, index) =>
-      declarationIsEqual(d, nextConflictInIntersection[index])
-    );
-  });
+function hoistingPreservesOverrideOrder(
+  candidate,
+  candidateIndex,
+  hoistCandidates,
+  earlierRuleDeclarations
+) {
+  const indexInEarlierRule = indexOfDeclaration(
+    earlierRuleDeclarations,
+    candidate
+  );
+  const overridesInEarlierRule = earlierRuleDeclarations
+    .slice(indexInEarlierRule + 1)
+    .filter((d) => isConflictingProp(d.prop, candidate.prop));
+  if (overridesInEarlierRule.length === 0) {
+    return true;
+  }
+  const overridesAmongCandidates = hoistCandidates
+    .slice(candidateIndex + 1)
+    .filter((d) => isConflictingProp(d.prop, candidate.prop));
+  if (overridesInEarlierRule.length !== overridesAmongCandidates.length) {
+    return false;
+  }
+  return overridesInEarlierRule.every((d, index) =>
+    declarationIsEqual(d, overridesAmongCandidates[index])
+  );
+}
+
+/**
+ * True if the later rule has an unclaimed declaration equal to `candidate`.
+ * Records its index in `claimedIndices`, so no other candidate can match the
+ * same declaration. Always false when the later rule contains `all`,
+ * since `all` resets everything except `direction`/`unicode-bidi`.
+ *
+ * @param {Declaration} candidate
+ * @param {Declaration[]} laterDeclarations
+ * @param {Set<number>} claimedIndices
+ * @return {boolean}
+ */
+function claimMatchInLaterRule(candidate, laterDeclarations, claimedIndices) {
+  const matchIndex = laterDeclarations.findIndex(
+    (d, index) =>
+      !claimedIndices.has(index) && isConflictingProp(d.prop, candidate.prop)
+  );
+  if (matchIndex === -1) {
+    return false;
+  }
+  if (!declarationIsEqual(laterDeclarations[matchIndex], candidate)) {
+    return false;
+  }
+  if (
+    candidate.prop.toLowerCase() !== 'direction' &&
+    candidate.prop.toLowerCase() !== 'unicode-bidi' &&
+    laterDeclarations.some(
+      (declaration) => declaration.prop.toLowerCase() === 'all'
+    )
+  ) {
+    return false;
+  }
+  claimedIndices.add(matchIndex);
+  return true;
+}
 
-  // Filter out intersections with previous conflicts in Second
-  return intersection.filter((decl) => {
-    const nextConflictIndex = secondDecls.findIndex((d) =>
-      isConflictingProp(d.prop, decl.prop)
+/**
+ * Narrows the declarations shared by two adjacent rules down to those that can
+ * safely move into a merged rule, along with the indices of the later rule's
+ * declarations they claim.
+ *
+ * The merged rule is emitted after the earlier rule's remaining declarations,
+ * so hoisting a declaration that a later declaration in the earlier rule
+ * overrides would reverse the cascade and make the previously dead value
+ * effective again, unless that overriding declaration is hoisted too, so both
+ * move together and keep their relative order.
+ *
+ * Dropping a candidate can invalidate one that was only admitted because it
+ * travelled with it, so the pass repeats until the surviving set stops
+ * shrinking.
+ *
+ * @param {Declaration[]} hoistCandidates
+ * @param {Declaration[]} earlierRuleDeclarations
+ * @param {Declaration[]} laterRuleDeclarations
+ * @return {{intersection: Declaration[], claimedIndices: Set<number>}}
+ */
+function filterRuleIntersections(
+  hoistCandidates,
+  earlierRuleDeclarations,
+  laterRuleDeclarations
+) {
+  let remainingCandidates = hoistCandidates;
+  for (;;) {
+    // A candidate rejected by the override check never claims a match.
+    const claimedIndices = new Set();
+    const survivors = remainingCandidates.filter(
+      (candidate, candidateIndex) =>
+        hoistingPreservesOverrideOrder(
+          candidate,
+          candidateIndex,
+          remainingCandidates,
+          earlierRuleDeclarations
+        ) &&
+        claimMatchInLaterRule(candidate, laterRuleDeclarations, claimedIndices)
     );
-    if (nextConflictIndex === -1) {
-      return false;
-    }
-    if (!declarationIsEqual(secondDecls[nextConflictIndex], decl)) {
-      return false;
-    }
     if (
-      decl.prop.toLowerCase() !== 'direction' &&
-      decl.prop.toLowerCase() !== 'unicode-bidi' &&
-      secondDecls.some(
-        (declaration) => declaration.prop.toLowerCase() === 'all'
-      )
+      survivors.length === remainingCandidates.length ||
+      survivors.length === 0
     ) {
-      return false;
+      return { intersection: survivors, claimedIndices };
     }
-    secondDecls.splice(nextConflictIndex, 1);
-    return true;
-  });
+    remainingCandidates = survivors;
+  }
 }
 
 /**
  * @param {Rule} first
  * @param {Rule} second
  * @param {Declaration[]} intersection
+ * @param {Set<number>} claimedIndices Positions of the declarations the
+ * intersection claimed in `second`, which the merged rule replaces.
  * @param {WeakSet<Rule>} ruleCache
  * @param {WeakMap<Rule, RuleMeta>} ruleMeta
  * @return {Rule}
  */
-function buildMergedRule(first, second, intersection, ruleCache, ruleMeta) {
+function buildMergedRule(
+  first,
+  second,
+  intersection,
+  claimedIndices,
+  ruleCache,
+  ruleMeta
+) {
   const receivingBlock = second.clone();
   const firstSelectors = getMeta(first, ruleMeta).selectors;
   const secondSelectors = getMeta(second, ruleMeta).selectors;
@@ -462,7 +463,15 @@ function buildMergedRule(first, second, intersection, ruleCache, ruleMeta) {
       }
     )
   );
-  secondClone.walkDecls(moveDecl((decl) => decl.remove()));
+  // Remove exactly the declarations that were claimed: matching by value would
+  // also delete a duplicate that re-asserts the value later in the rule, after
+  // an overriding declaration that stays behind.
+  let laterIndex = 0;
+  secondClone.walkDecls((decl) => {
+    if (claimedIndices.has(laterIndex++)) {
+      decl.remove();
+    }
+  });
 
   // Ensure original rules are flushed for accurate length comparison
   if (ruleMeta) {
@@ -530,23 +539,35 @@ function partialMerge(
     ruleCache,
     ruleMeta
   );
-  first = mergedNext.first;
-  second = mergedNext.second;
+  const mergedFirst = mergedNext.first;
+  const mergedSecond = mergedNext.second;
   intersection = mergedNext.intersection;
 
-  const metaFirstActual = getMeta(first, ruleMeta);
-  const metaSecondActual = getMeta(second, ruleMeta);
-  const firstDecls = [...metaFirstActual.declarations];
-  const secondDecls = [...metaSecondActual.declarations];
+  const metaFirstActual = getMeta(mergedFirst, ruleMeta);
+  const metaSecondActual = getMeta(mergedSecond, ruleMeta);
+  const earlierRuleDeclarations = [...metaFirstActual.declarations];
+  const laterRuleDeclarations = [...metaSecondActual.declarations];
 
-  intersection = filterIntersections(intersection, firstDecls, secondDecls);
+  const filtered = filterRuleIntersections(
+    intersection,
+    earlierRuleDeclarations,
+    laterRuleDeclarations
+  );
+  intersection = filtered.intersection;
 
   if (intersection.length === 0) {
     // Nothing to merge
-    return second;
+    return mergedSecond;
   }
 
-  return buildMergedRule(first, second, intersection, ruleCache, ruleMeta);
+  return buildMergedRule(
+    mergedFirst,
+    mergedSecond,
+    intersection,
+    filtered.claimedIndices,
+    ruleCache,
+    ruleMeta
+  );
 }
 
 /**

package/src/lib/propertyRelations.js

@@ -0,0 +1,171 @@
+'use strict';
+
+const data = require('../data/propertyGroups.json');
+
+const vendorPrefixRegex = /^-\w+-/;
+/**
+ * @param {string} prop
+ * @return {string}
+ */
+function vendorUnprefixed(prop) {
+  return prop.replace(vendorPrefixRegex, '');
+}
+
+// The generated file is JSON, so its maps arrive as plain objects. Property
+// names come from the stylesheet, and `constructor` or `toString` are things a
+// declaration can be called, so never index those objects directly.
+const knownProperties = new Set(data.properties);
+const aliases = new Map(Object.entries(data.aliases));
+const shorthands = new Map(Object.entries(data.shorthands));
+const logicalGroups = new Map(Object.entries(data.logicalGroups));
+const flowRelative = new Set(data.flowRelative);
+
+const ALL = 'all';
+
+/**
+ * An alias target, or the candidate itself if it's a known property outright.
+ *
+ * @param {string} candidate
+ * @return {string|undefined}
+ */
+function lookupProperty(candidate) {
+  const alias = aliases.get(candidate);
+  if (alias !== undefined) {
+    return alias;
+  }
+  return knownProperties.has(candidate) ? candidate : undefined;
+}
+
+/**
+ * Resolves a property to the name the generated data knows it by: vendor
+ * prefixed spellings collapse onto the property they alias, and a prefix we
+ * have no data for is dropped, since moving `-webkit-background-clip` past a
+ * `background` shorthand is as unsafe as moving the unprefixed property. Webref
+ * lists some prefixed spellings, like `-webkit-user-select`, as properties in
+ * their own right with no alias back to the unprefixed one, so the unprefixed
+ * spelling is always tried first, not just when the prefixed one is unknown.
+ *
+ * @param {string} name Lowercased property name.
+ * @return {{name: string, known: boolean}}
+ */
+function resolveProperty(name) {
+  if (name.startsWith('-')) {
+    const resolved = lookupProperty(vendorUnprefixed(name));
+    if (resolved !== undefined) {
+      return { name: resolved, known: true };
+    }
+  }
+  const resolved = lookupProperty(name);
+  return resolved !== undefined
+    ? { name: resolved, known: true }
+    : { name, known: false };
+}
+
+/**
+ * The longhands a property sets. A longhand sets only itself.
+ *
+ * @param {string} name
+ * @return {string[]}
+ */
+function longhandsOf(name) {
+  return shorthands.get(name) ?? [name];
+}
+
+/**
+ * True if two longhands can be the same physical property. Beyond being the
+ * same property, that happens between the flow-relative and the physical
+ * members of a logical property group, since `margin-inline-start` is
+ * `margin-top` under a vertical writing mode. Two physical members, or two
+ * flow-relative ones, always address different sides.
+ *
+ * @param {string} a
+ * @param {string} b
+ * @return {boolean}
+ */
+function isSameLonghand(a, b) {
+  if (a === b) {
+    return true;
+  }
+  const group = logicalGroups.get(a);
+  return (
+    group !== undefined &&
+    group === logicalGroups.get(b) &&
+    flowRelative.has(a) !== flowRelative.has(b)
+  );
+}
+
+/**
+ * The name-based approximation the plugin relied on before it had property
+ * data: two properties interact when they share their leading segment and
+ * their remaining segments either match or differ in number. `place` is
+ * treated as a wildcard leading segment, since `place-content` expands to
+ * `align-content`/`justify-content` and the like. Reached only for vendor
+ * extensions no spec describes, such as `-webkit-box-direction`.
+ *
+ * @param {string} nameA
+ * @param {string} nameB
+ * @return {boolean}
+ */
+function conflictingSegments(nameA, nameB) {
+  const a = vendorUnprefixed(nameA).split('-');
+  const b = vendorUnprefixed(nameB).split('-');
+  if (a[0] !== b[0] && a[0] !== 'place' && b[0] !== 'place') {
+    return false;
+  }
+  if (a.length !== b.length) {
+    return true;
+  }
+  return a.every((segment, index) => b[index] === segment);
+}
+
+/**
+ * True if declarations of `propA` and `propB` can set the same underlying
+ * property, so that reordering them within a rule can change what the rule
+ * computes to. The relation is symmetric: a shorthand setting a longhand and a
+ * longhand overriding part of a shorthand are the same conflict seen from
+ * either end.
+ *
+ * @param {string} propA
+ * @param {string} propB
+ * @return {boolean}
+ */
+function isConflictingProp(propA, propB) {
+  if (propA === propB) {
+    return true;
+  }
+  // Nothing sets a custom property except itself, and custom properties are
+  // case-sensitive, so this must run before the names are lowercased below.
+  if (propA.startsWith('--') || propB.startsWith('--')) {
+    return false;
+  }
+  const nameA = propA.toLowerCase();
+  const nameB = propB.toLowerCase();
+  if (nameA === nameB) {
+    return true;
+  }
+  if (nameA === ALL || nameB === ALL) {
+    const other = nameA === ALL ? nameB : nameA;
+    return other !== 'direction' && other !== 'unicode-bidi';
+  }
+  const a = resolveProperty(nameA);
+  const b = resolveProperty(nameB);
+  if (a.name === b.name) {
+    return true;
+  }
+  if (!a.known || !b.known) {
+    // A vendor extension the data says nothing about. The shorthand relations
+    // that would settle it are exactly what is missing, so fall back to
+    // comparing the names.
+    return conflictingSegments(a.name, b.name);
+  }
+  for (const longhandA of longhandsOf(a.name)) {
+    for (const longhandB of longhandsOf(b.name)) {
+      if (isSameLonghand(longhandA, longhandB)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+module.exports = { isConflictingProp };

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":";;AAII,OAAQ,KAAA,YAAY,MAAM,cAAc,CAAA;AAQxC,OAAQ,KAAA,EAAC,WAAW,EAAO,MAAM,SAAS,CAAA;AAmD3C,YAAkB,QAAQ,GAC1B;;;;IAAqB,SAAS,EAAnB,MAAM,EAAE,CACnB;;;;IAA0B,YAAY,EAA3B,WAAW,EAAE,CACxB;;;;IAAoB,KAAK,EAAd,OAAO,CACpB;CAAA,CAAA;AA0kBE,YAAwD,mBAAmB,GAAjE;IAAE,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,CAAqB;AAC3E,YAAgE,mBAAmB,GAAzE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,CAAqB;AACnF,YAAqD,OAAO,GAAlD,mBAAmB,GAAG,mBAAmB,CAAS"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":";;AAII,OAAQ,KAAA,YAAY,MAAM,cAAc,CAAA;AASxC,OAAQ,KAAA,EAAC,WAAW,EAAO,MAAM,SAAS,CAAA;AAmD3C,YAAkB,QAAQ,GAC1B;;;;IAAqB,SAAS,EAAnB,MAAM,EAAE,CACnB;;;;IAA0B,YAAY,EAA3B,WAAW,EAAE,CACxB;;;;IAAoB,KAAK,EAAd,OAAO,CACpB;CAAA,CAAA;AA8lBE,YAAwD,mBAAmB,GAAjE;IAAE,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,CAAqB;AAC3E,YAAgE,mBAAmB,GAAzE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,CAAqB;AACnF,YAAqD,OAAO,GAAlD,mBAAmB,GAAG,mBAAmB,CAAS"}

package/types/lib/propertyRelations.d.ts

@@ -0,0 +1,17 @@
+declare const _exports: {
+    isConflictingProp: typeof isConflictingProp;
+};
+export = _exports;
+/**
+ * True if declarations of `propA` and `propB` can set the same underlying
+ * property, so that reordering them within a rule can change what the rule
+ * computes to. The relation is symmetric: a shorthand setting a longhand and a
+ * longhand overriding part of a shorthand are the same conflict seen from
+ * either end.
+ *
+ * @param {string} propA
+ * @param {string} propB
+ * @return {boolean}
+ */
+declare function isConflictingProp(propA: string, propB: string): boolean;
+//# sourceMappingURL=propertyRelations.d.ts.map

package/types/lib/propertyRelations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"propertyRelations.d.ts","sourceRoot":"","sources":["../../src/lib/propertyRelations.js"],"names":[],"mappings":";;;;AAwHA;;;;;;;;;;GAUG;AACH,iBAAS,iBAAiB,CAAC,KAAK,EAJrB,MAIqB,EAAE,KAAK,EAH5B,MAG4B,GAF3B,OAAO,CAuClB"}