postcss-minify-gradients 8.0.1 → 8.0.3

package/LICENSE-MIT

@@ -1,4 +1,4 @@
-Copyright (c) Ben Briggs <beneb.info@gmail.com> (http://beneb.info)
+Copyright (c) Ben Briggs <beneb.info@gmail.com> (https://beneb.info)
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

package/README.md

@@ -48,6 +48,6 @@ See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTOR
 
 ## License
 
-MIT © [Ben Briggs](http://beneb.info)
+MIT © [Ben Briggs](https://beneb.info)
 
 [postcss]: https://github.com/postcss/postcss

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "postcss-minify-gradients",
-  "version": "8.0.1",
+  "version": "8.0.3",
   "description": "Minify gradient parameters with PostCSS.",
-  "main": "src/index.js",
-  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./src": "./src/index.js",
+    "./src/*": "./src/*.js",
+    "./src/*.js": "./src/*.js",
+    "./package.json": "./package.json"
+  },
   "files": [
     "LICENSE-MIT",
     "src",
@@ -19,13 +27,16 @@
   "author": {
     "name": "Ben Briggs",
     "email": "beneb.info@gmail.com",
-    "url": "http://beneb.info"
+    "url": "https://beneb.info"
+  },
+  "repository": {
+    "type": "git",
+    "url": "cssnano/cssnano"
   },
-  "repository": "cssnano/cssnano",
   "dependencies": {
-    "@colordx/core": "^5.4.3",
+    "@colordx/core": "^5.5.0",
     "postcss-value-parser": "^4.2.0",
-    "cssnano-utils": "^6.0.1"
+    "cssnano-utils": "^6.0.3"
   },
   "bugs": {
     "url": "https://github.com/cssnano/cssnano/issues"
@@ -34,9 +45,12 @@
     "node": "^22.11.0 || ^24.11.0 || >=26.0"
   },
   "devDependencies": {
-    "postcss": "^8.5.15"
+    "postcss": "^8.5.26"
   },
   "peerDependencies": {
-    "postcss": "^8.5.15"
+    "postcss": "^8.5.26"
+  },
+  "scripts": {
+    "test": "node --test"
   }
 }

package/src/index.js

@@ -3,17 +3,19 @@ const valueParser = require('postcss-value-parser');
 const { getArguments } = require('cssnano-utils');
 const isColorStop = require('./isColorStop.js');
 
-const angles = {
-  top: '0deg',
-  right: '90deg',
-  bottom: '180deg',
-  left: '270deg',
-};
+const directionsToAngles = new Map([
+  ['top', '0deg'],
+  ['right', '90deg'],
+  ['bottom', '180deg'],
+  ['left', '270deg'],
+]);
 
 /**
+ * Returns whether b is less than a.
+ *
  * @param {valueParser.Dimension} a
  * @param {valueParser.Dimension} b
- * @return {boolean}
+ * @returns {boolean}
  */
 function isLessThan(a, b) {
   return (
@@ -21,6 +23,174 @@ function isLessThan(a, b) {
     parseFloat(a.number) >= parseFloat(b.number)
   );
 }
+
+/**
+ * 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);
+  }
+  /** @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;
+    }
+
+    const isFinalStop = index === args.length - 1;
+    const thisStop = valueParser.unit(arg[2].value);
+
+    if (previousStop === undefined) {
+      previousStop = thisStop;
+
+      if (
+        !isFinalStop &&
+        previousStop &&
+        args.length < 4 &&
+        previousStop.number === '0' &&
+        previousStop.unit.toLowerCase() !== 'deg'
+      ) {
+        arg[1].value = arg[2].value = '';
+      }
+
+      continue;
+    }
+
+    if (previousStop && thisStop && isLessThan(previousStop, thisStop)) {
+      arg[2].value = '0';
+    }
+
+    previousStop = thisStop;
+
+    if (isFinalStop && arg[2].value === '100%') {
+      arg[1].value = arg[2].value = '';
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Optimises a radial gradient.
+ *
+ * @param {import('postcss-value-parser').ParsedValue | import('postcss-value-parser').FunctionNode} node
+ * @returns {false}
+ */
+function optimizeRadialGradient(node) {
+  const args = getArguments(node);
+  /** @type {valueParser.Dimension | false | undefined} */
+  let previousStop = undefined;
+
+  const hasAt = args[0].find((n) => n.value.toLowerCase() === 'at');
+
+  for (const [index, arg] of args.entries()) {
+    if (!arg[2] || (!index && hasAt)) {
+      continue;
+    }
+
+    const thisStop = valueParser.unit(arg[2].value);
+
+    if (!previousStop) {
+      previousStop = thisStop;
+
+      continue;
+    }
+
+    if (previousStop && thisStop && isLessThan(previousStop, thisStop)) {
+      arg[2].value = '0';
+    }
+
+    previousStop = thisStop;
+  }
+
+  return false;
+}
+
+/**
+ * Optimises a radial gradient.
+ *
+ * @param {import('postcss-value-parser').ParsedValue | import('postcss-value-parser').FunctionNode} node
+ * @returns {false}
+ */
+function optimizeWebkitRadialGradient(node) {
+  const args = getArguments(node);
+  /** @type {valueParser.Dimension | false | undefined} */
+  let previousStop = undefined;
+
+  for (const arg of args) {
+    let color;
+    let stop;
+
+    if (arg[2] !== undefined) {
+      if (arg[0].type === 'function') {
+        color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`;
+      } else {
+        color = arg[0].value;
+      }
+
+      if (arg[2].type === 'function') {
+        stop = `${arg[2].value}(${valueParser.stringify(arg[2].nodes)})`;
+      } else {
+        stop = arg[2].value;
+      }
+    } else {
+      if (arg[0].type === 'function') {
+        // eslint-disable-next-line no-useless-assignment
+        color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`;
+      }
+
+      color = arg[0].value;
+    }
+
+    color = color.toLowerCase();
+
+    const colorStop =
+      stop !== undefined
+        ? isColorStop(color, stop.toLowerCase())
+        : isColorStop(color);
+
+    if (!colorStop || !arg[2]) {
+      continue;
+    }
+
+    const thisStop = valueParser.unit(arg[2].value);
+
+    if (!previousStop) {
+      previousStop = thisStop;
+
+      continue;
+    }
+
+    if (previousStop && thisStop && isLessThan(previousStop, thisStop)) {
+      arg[2].value = '0';
+    }
+
+    previousStop = thisStop;
+  }
+
+  return false;
+}
+
 /**
  * @param {import('postcss').Declaration} decl
  * @return {void}
@@ -56,165 +226,35 @@ function optimise(decl) {
         lowerCasedValue === '-webkit-linear-gradient' ||
         lowerCasedValue === '-webkit-repeating-linear-gradient'
       ) {
-        let args = getArguments(node);
-
-        if (
-          node.nodes[0].value.toLowerCase() === 'to' &&
-          args[0].length === 3
-        ) {
-          node.nodes = node.nodes.slice(2);
-          node.nodes[0].value =
-            angles[
-              /** @type {'top'|'right'|'bottom'|'left'}*/ (
-                node.nodes[0].value.toLowerCase()
-              )
-            ];
-        }
-
-        /** @type {valueParser.Dimension | false} */
-        let lastStop;
-
-        args.forEach((arg, index) => {
-          if (arg.length !== 3) {
-            return;
-          }
-
-          let isFinalStop = index === args.length - 1;
-          let thisStop = valueParser.unit(arg[2].value);
-
-          if (lastStop === undefined) {
-            lastStop = thisStop;
-
-            if (
-              !isFinalStop &&
-              lastStop &&
-              lastStop.number === '0' &&
-              lastStop.unit.toLowerCase() !== 'deg'
-            ) {
-              arg[1].value = arg[2].value = '';
-            }
-
-            return;
-          }
-
-          if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
-            arg[2].value = '0';
-          }
-
-          lastStop = thisStop;
-
-          if (isFinalStop && arg[2].value === '100%') {
-            arg[1].value = arg[2].value = '';
-          }
-        });
-
-        return false;
+        return optimizeLinearGradient(node);
       }
 
       if (
         lowerCasedValue === 'radial-gradient' ||
         lowerCasedValue === 'repeating-radial-gradient'
       ) {
-        let args = getArguments(node);
-        /** @type {valueParser.Dimension | false} */
-        let lastStop;
-
-        const hasAt = args[0].find((n) => n.value.toLowerCase() === 'at');
-
-        args.forEach((arg, index) => {
-          if (!arg[2] || (!index && hasAt)) {
-            return;
-          }
-
-          let thisStop = valueParser.unit(arg[2].value);
-
-          if (!lastStop) {
-            lastStop = thisStop;
-
-            return;
-          }
-
-          if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
-            arg[2].value = '0';
-          }
-
-          lastStop = thisStop;
-        });
-
-        return false;
+        return optimizeRadialGradient(node);
       }
 
       if (
         lowerCasedValue === '-webkit-radial-gradient' ||
         lowerCasedValue === '-webkit-repeating-radial-gradient'
       ) {
-        let args = getArguments(node);
-        /** @type {valueParser.Dimension | false} */
-        let lastStop;
-
-        args.forEach((arg) => {
-          let color;
-          let stop;
-
-          if (arg[2] !== undefined) {
-            if (arg[0].type === 'function') {
-              color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`;
-            } else {
-              color = arg[0].value;
-            }
-
-            if (arg[2].type === 'function') {
-              stop = `${arg[2].value}(${valueParser.stringify(arg[2].nodes)})`;
-            } else {
-              stop = arg[2].value;
-            }
-          } else {
-            if (arg[0].type === 'function') {
-              // eslint-disable-next-line no-useless-assignment
-              color = `${arg[0].value}(${valueParser.stringify(arg[0].nodes)})`;
-            }
-
-            color = arg[0].value;
-          }
-
-          color = color.toLowerCase();
-
-          const colorStop =
-            stop !== undefined
-              ? isColorStop(color, stop.toLowerCase())
-              : isColorStop(color);
-
-          if (!colorStop || !arg[2]) {
-            return;
-          }
-
-          let thisStop = valueParser.unit(arg[2].value);
-
-          if (!lastStop) {
-            lastStop = thisStop;
-
-            return;
-          }
-
-          if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
-            arg[2].value = '0';
-          }
-
-          lastStop = thisStop;
-        });
-
-        return false;
+        return optimizeWebkitRadialGradient(node);
       }
+      return false;
     })
     .toString();
 }
 /**
- * @type {import('postcss').PluginCreator<void>}
  * @return {import('postcss').Plugin}
  */
 function pluginCreator() {
   return {
     postcssPlugin: 'postcss-minify-gradients',
+    /**
+     * @param {import('postcss').Root} css
+     */
     OnceExit(css) {
       css.walkDecls(optimise);
     },
@@ -222,4 +262,6 @@ function pluginCreator() {
 }
 
 pluginCreator.postcss = true;
-module.exports = pluginCreator;
+module.exports = /** @type {import('postcss').PluginCreator<void>}*/ (
+  pluginCreator
+);

package/src/isColorStop.js

@@ -6,7 +6,7 @@ const namesPlugin = require('@colordx/core/plugins/names');
 
 extend([/** @type {any} */ (hwbPlugin), /** @type {any} */ (namesPlugin)]);
 
-/* Code derived from https://github.com/pigcan/is-color-stop */
+/* Code derived from https://www.npmjs.com/package/is-color-stop Licensed under MIT license */
 
 const lengthUnits = new Set([
   'PX',
@@ -26,6 +26,8 @@ const lengthUnits = new Set([
   '%',
 ]);
 
+const colorStopRegex = /^calc\(\S+\)$/g;
+
 /**
  * @param {string} input
  * @return {boolean}
@@ -39,17 +41,17 @@ function isCSSLengthUnit(input) {
  */
 function isStop(str) {
   if (str) {
-    let stop = false;
+    let isColorStop = false;
     const node = unit(str);
     if (node) {
       const number = Number(node.number);
       if (number === 0 || (!isNaN(number) && isCSSLengthUnit(node.unit))) {
-        stop = true;
+        isColorStop = true;
       }
     } else {
-      stop = /^calc\(\S+\)$/g.test(str);
+      isColorStop = colorStopRegex.test(str);
     }
-    return stop;
+    return isColorStop;
   }
   return true;
 }

package/types/index.d.ts

@@ -1,10 +1,3 @@
-export = pluginCreator;
-/**
- * @type {import('postcss').PluginCreator<void>}
- * @return {import('postcss').Plugin}
- */
-declare function pluginCreator(): import("postcss").Plugin;
-declare namespace pluginCreator {
-    let postcss: true;
-}
+declare const _exports: import("postcss").PluginCreator<void>;
+export = _exports;
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":";AAkNA;;;GAGG;AACH,kCAFY,OAAO,SAAS,EAAE,MAAM,CASnC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}

package/types/isColorStop.d.ts

@@ -1,3 +1,8 @@
-declare function _exports(color: string, stop?: string): boolean;
-export = _exports;
+export = isColorStop;
+/**
+ * @param {string} color
+ * @param {string} [stop]
+ * @return {boolean}
+ */
+declare function isColorStop(color: string, stop?: string): boolean;
 //# sourceMappingURL=isColorStop.d.ts.map

package/types/isColorStop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"isColorStop.d.ts","sourceRoot":"","sources":["../src/isColorStop.js"],"names":[],"mappings":"AA4DiB,iCAJN,MAAM,SACN,MAAM,GACL,OAAO,CAIlB"}
+{"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"}