postcss-minify-gradients 8.0.3 → 8.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-minify-gradients",
-  "version": "8.0.3",
+  "version": "8.0.5",
   "description": "Minify gradient parameters with PostCSS.",
   "exports": {
     ".": {
@@ -31,12 +31,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "cssnano/cssnano"
+    "url": "git+https://github.com/cssnano/cssnano.git"
   },
   "dependencies": {
     "@colordx/core": "^5.5.0",
     "postcss-value-parser": "^4.2.0",
-    "cssnano-utils": "^6.0.3"
+    "cssnano-utils": "^6.0.4"
   },
   "bugs": {
     "url": "https://github.com/cssnano/cssnano/issues"

package/src/index.js

@@ -11,7 +11,7 @@ const directionsToAngles = new Map([
 ]);
 
 /**
- * Returns whether b is less than a.
+ * Returns whether b is less than or equal to a.
  *
  * @param {valueParser.Dimension} a
  * @param {valueParser.Dimension} b
@@ -20,108 +20,217 @@ const directionsToAngles = new Map([
 function isLessThan(a, b) {
   return (
     a.unit.toLowerCase() === b.unit.toLowerCase() &&
-    parseFloat(a.number) >= parseFloat(b.number)
+    Number.parseFloat(a.number) >= Number.parseFloat(b.number)
   );
 }
 
 /**
- * Shortens a direction like `to left top` into an angle.
+ * Compares positions when their ordering is independent of layout.
  *
- * @param {import('postcss-value-parser').FunctionNode} node
- * @returns {void}
+ * @param {valueParser.Dimension} a
+ * @param {valueParser.Dimension} b
+ * @returns {boolean | undefined}
  */
-function shortenDirection(node) {
-  node.nodes = node.nodes.slice(2);
-  node.nodes[0].value = /** @type {string} */ (
-    directionsToAngles.get(node.nodes[0].value.toLowerCase())
-  );
+function isLessThanOrEqual(a, b) {
+  if (a.unit.toLowerCase() === b.unit.toLowerCase()) {
+    return isLessThan(a, b);
+  }
+
+  const aNumber = Number.parseFloat(a.number);
+  const bNumber = Number.parseFloat(b.number);
+
+  if (aNumber === 0) {
+    return bNumber <= 0;
+  }
+
+  if (bNumber === 0) {
+    return aNumber >= 0;
+  }
 }
 
 /**
- * Optimises a linear gradient.
+ * Returns whether a node is a literal color stop position.
  *
- * @param {import('postcss-value-parser').FunctionNode} node
- * @returns {false}
+ * @param {import('postcss-value-parser').Node} node
+ * @returns {boolean}
  */
-function optimizeLinearGradient(node) {
-  const args = getArguments(node);
-  if (node.nodes[0].value.toLowerCase() === 'to' && args[0].length === 3) {
-    shortenDirection(node);
+function isPosition(node) {
+  return node.type === 'word' && valueParser.unit(node.value) !== false;
+}
+
+/**
+ * Returns whether an argument begins a color stop.
+ *
+ * @param {import('postcss-value-parser').Node[]} argument
+ * @returns {boolean}
+ */
+function isColorStopArgument(argument) {
+  const first = argument[0];
+
+  if (!first) {
+    return false;
   }
-  /** @type {valueParser.Dimension | false | undefined} */
-  let previousStop = undefined;
 
-  for (const [index, arg] of args.entries()) {
-    /* Check whether the stop contains a position */
-    if (arg.length !== 3) {
-      continue;
-    }
+  if (first.type === 'function') {
+    return !new Set(['calc', 'clamp', 'max', 'min']).has(
+      first.value.toLowerCase()
+    );
+  }
 
-    const isFinalStop = index === args.length - 1;
-    const thisStop = valueParser.unit(arg[2].value);
+  return first.type === 'word' && isColorStop(first.value);
+}
 
-    if (previousStop === undefined) {
-      previousStop = thisStop;
+/**
+ * Gets the position nodes from a color stop or transition hint.
+ *
+ * @param {import('postcss-value-parser').Node[]} argument
+ * @param {boolean} colorStopArgument
+ * @returns {import('postcss-value-parser').Node[]}
+ */
+function getPositions(argument, colorStopArgument) {
+  return argument.slice(colorStopArgument ? 1 : 0).filter((node) => {
+    return node.type !== 'space' && node.type !== 'comment';
+  });
+}
 
-      if (
-        !isFinalStop &&
-        previousStop &&
-        args.length < 4 &&
-        previousStop.number === '0' &&
-        previousStop.unit.toLowerCase() !== 'deg'
-      ) {
-        arg[1].value = arg[2].value = '';
-      }
+/**
+ * Updates the largest preceding position, replacing a position that will be
+ * fixed up with its shorter equivalent.
+ *
+ * @param {valueParser.Dimension | undefined} largestPosition
+ * @param {import('postcss-value-parser').Node} position
+ * @returns {valueParser.Dimension | undefined}
+ */
+function updateLargestPosition(largestPosition, position) {
+  if (!isPosition(position)) {
+    return undefined;
+  }
 
-      continue;
-    }
+  const currentPosition = valueParser.unit(position.value);
 
-    if (previousStop && thisStop && isLessThan(previousStop, thisStop)) {
-      arg[2].value = '0';
-    }
+  if (!currentPosition) {
+    return undefined;
+  }
 
-    previousStop = thisStop;
+  if (!largestPosition) {
+    return currentPosition;
+  }
 
-    if (isFinalStop && arg[2].value === '100%') {
-      arg[1].value = arg[2].value = '';
-    }
+  const isFixedUp = isLessThanOrEqual(largestPosition, currentPosition);
+
+  if (isFixedUp) {
+    position.value = '0';
+    return largestPosition;
   }
 
-  return false;
+  return isFixedUp === undefined ? undefined : currentPosition;
 }
 
 /**
- * Optimises a radial gradient.
+ * Optimizes a standard gradient color stop list using the color stop fixup
+ * algorithm. A non-literal position prevents later comparisons because its
+ * used value can only be known during layout.
  *
- * @param {import('postcss-value-parser').ParsedValue | import('postcss-value-parser').FunctionNode} node
- * @returns {false}
+ * @param {import('postcss-value-parser').Node[][]} args
+ * @returns {void}
  */
-function optimizeRadialGradient(node) {
-  const args = getArguments(node);
-  /** @type {valueParser.Dimension | false | undefined} */
-  let previousStop = undefined;
+function optimizeColorStops(args) {
+  const firstStopIndex = args.findIndex(isColorStopArgument);
 
-  const hasAt = args[0].find((n) => n.value.toLowerCase() === 'at');
+  if (firstStopIndex === -1) {
+    return;
+  }
 
-  for (const [index, arg] of args.entries()) {
-    if (!arg[2] || (!index && hasAt)) {
-      continue;
-    }
+  const stops = [];
+  let largestPosition = /** @type {valueParser.Dimension | undefined} */ (
+    undefined
+  );
+  let hasSeenStop = false;
 
-    const thisStop = valueParser.unit(arg[2].value);
+  for (const argument of args.slice(firstStopIndex)) {
+    const colorStop = isColorStopArgument(argument);
+    const positions = getPositions(argument, colorStop);
 
-    if (!previousStop) {
-      previousStop = thisStop;
+    if (colorStop) {
+      stops.push({ argument, positions });
+
+      if (!hasSeenStop && positions.length === 0) {
+        largestPosition = /** @type {valueParser.Dimension} */ (
+          valueParser.unit('0%')
+        );
+      }
+
+      hasSeenStop = true;
+    }
 
+    if (positions.length === 0) {
       continue;
     }
 
-    if (previousStop && thisStop && isLessThan(previousStop, thisStop)) {
-      arg[2].value = '0';
+    for (const position of positions) {
+      largestPosition = updateLargestPosition(largestPosition, position);
     }
+  }
 
-    previousStop = thisStop;
+  const firstStop = stops[0];
+  const lastStop = stops.at(-1);
+
+  if (
+    firstStop &&
+    firstStop.positions.length === 1 &&
+    firstStop.argument.length === 3 &&
+    firstStop.positions[0].value === '0%'
+  ) {
+    firstStop.argument[1].value = firstStop.positions[0].value = '';
+  }
+
+  if (
+    lastStop &&
+    lastStop.positions.length === 1 &&
+    lastStop.argument.length === 3 &&
+    lastStop.positions[0].value === '100%'
+  ) {
+    lastStop.argument[1].value = lastStop.positions[0].value = '';
   }
+}
+
+/**
+ * Shortens a direction like `to left top` into an angle.
+ *
+ * @param {import('postcss-value-parser').FunctionNode} node
+ * @returns {void}
+ */
+function shortenDirection(node) {
+  node.nodes = node.nodes.slice(2);
+  node.nodes[0].value = /** @type {string} */ (
+    directionsToAngles.get(node.nodes[0].value.toLowerCase())
+  );
+}
+
+/**
+ * Optimises a linear gradient.
+ *
+ * @param {import('postcss-value-parser').FunctionNode} node
+ * @returns {false}
+ */
+function optimizeLinearGradient(node) {
+  const args = getArguments(node);
+  if (node.nodes[0]?.value.toLowerCase() === 'to' && args[0].length === 3) {
+    shortenDirection(node);
+  }
+  optimizeColorStops(getArguments(node));
+
+  return false;
+}
+
+/**
+ * Optimises a radial gradient.
+ *
+ * @param {import('postcss-value-parser').ParsedValue | import('postcss-value-parser').FunctionNode} node
+ * @returns {false}
+ */
+function optimizeRadialGradient(node) {
+  optimizeColorStops(getArguments(node));
 
   return false;
 }
@@ -242,6 +351,13 @@ function optimise(decl) {
       ) {
         return optimizeWebkitRadialGradient(node);
       }
+
+      if (
+        lowerCasedValue === 'conic-gradient' ||
+        lowerCasedValue === 'repeating-conic-gradient'
+      ) {
+        optimizeColorStops(getArguments(node));
+      }
       return false;
     })
     .toString();

package/src/isColorStop.js

@@ -4,7 +4,14 @@ const { colordx: colord, extend } = require('@colordx/core');
 const hwbPlugin = require('@colordx/core/plugins/hwb');
 const namesPlugin = require('@colordx/core/plugins/names');
 
-extend([/** @type {any} */ (hwbPlugin), /** @type {any} */ (namesPlugin)]);
+extend([
+  /** @type {import('@colordx/core').Plugin} */ (
+    /** @type {unknown} */ (hwbPlugin)
+  ),
+  /** @type {import('@colordx/core').Plugin} */ (
+    /** @type {unknown} */ (namesPlugin)
+  ),
+]);
 
 /* Code derived from https://www.npmjs.com/package/is-color-stop Licensed under MIT license */
 
@@ -45,7 +52,10 @@ function isStop(str) {
     const node = unit(str);
     if (node) {
       const number = Number(node.number);
-      if (number === 0 || (!isNaN(number) && isCSSLengthUnit(node.unit))) {
+      if (
+        number === 0 ||
+        (!Number.isNaN(number) && isCSSLengthUnit(node.unit))
+      ) {
         isColorStop = true;
       }
     } else {

package/types/isColorStop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isColorStop.d.ts","sourceRoot":"","sources":["../src/isColorStop.js"],"names":[],"mappings":";AAyDA;;;;GAIG;6BACmC,KAAK,EAJhC,MAIgC,EAAE,IAAI,AAH9C,CACA,EADQ,MAGsC,GAFrC,OAAO"}
+{"version":3,"file":"isColorStop.d.ts","sourceRoot":"","sources":["../src/isColorStop.js"],"names":[],"mappings":";AAmEA;;;;GAIG;6BACmC,KAAK,EAJhC,MAIgC,EAAE,IAAI,AAH9C,CACA,EADQ,MAGsC,GAFrC,OAAO"}