postcss-minify-gradients 5.0.5 → 5.1.1

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "postcss-minify-gradients",
-  "version": "5.0.5",
+  "version": "5.1.1",
   "description": "Minify gradient parameters with PostCSS.",
-  "main": "dist/index.js",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "LICENSE-MIT",
-    "dist"
+    "src",
+    "types"
   ],
   "keywords": [
     "css",
@@ -22,7 +24,7 @@
   "repository": "cssnano/cssnano",
   "dependencies": {
     "colord": "^2.9.1",
-    "cssnano-utils": "^3.0.1",
+    "cssnano-utils": "^3.1.0",
     "postcss-value-parser": "^4.2.0"
   },
   "bugs": {
@@ -37,9 +39,5 @@
   "peerDependencies": {
     "postcss": "^8.2.15"
   },
-  "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "babel src --config-file ../../babel.config.json --out-dir dist --ignore \"**/__tests__/\""
-  },
   "readme": "# [postcss][postcss]-minify-gradients\n\n> Minify gradient parameters with PostCSS.\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-minify-gradients) do:\n\n```\nnpm install postcss-minify-gradients\n```\n\n\n## Example\n\nWhere possible, this module will minify gradient parameters. It can convert\nlinear gradient directional syntax to angles, remove the unnecessary `0%` and\n`100%` start and end values, and minimise color stops that use the same length\nvalues (the browser will adjust the value automatically).\n\n### Input\n\n```css\nh1 {\n    background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%)\n}\n```\n\n### Output\n\n```css\nh1 {\n    background: linear-gradient(180deg, #ffe500, #ffe500 50%, #121 0, #121)\n}\n```\n\n\n## Usage\n\nSee the [PostCSS documentation](https://github.com/postcss/postcss#usage) for\nexamples for your environment.\n\n\n## Contributors\n\nSee [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).\n\n\n## License\n\nMIT © [Ben Briggs](http://beneb.info)\n\n[postcss]: https://github.com/postcss/postcss\n"
 }

package/src/index.js

@@ -0,0 +1,224 @@
+'use strict';
+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',
+};
+
+/**
+ * @param {valueParser.Dimension} a
+ * @param {valueParser.Dimension} b
+ * @return {boolean}
+ */
+function isLessThan(a, b) {
+  return (
+    a.unit.toLowerCase() === b.unit.toLowerCase() &&
+    parseFloat(a.number) >= parseFloat(b.number)
+  );
+}
+/**
+ * @param {import('postcss').Declaration} decl
+ * @return {void}
+ */
+function optimise(decl) {
+  const value = decl.value;
+
+  if (!value) {
+    return;
+  }
+
+  const normalizedValue = value.toLowerCase();
+
+  if (normalizedValue.includes('var(') || normalizedValue.includes('env(')) {
+    return;
+  }
+
+  if (!normalizedValue.includes('gradient')) {
+    return;
+  }
+
+  decl.value = valueParser(value)
+    .walk((node) => {
+      if (node.type !== 'function' || !node.nodes.length) {
+        return false;
+      }
+
+      const lowerCasedValue = node.value.toLowerCase();
+
+      if (
+        lowerCasedValue === 'linear-gradient' ||
+        lowerCasedValue === 'repeating-linear-gradient' ||
+        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;
+      }
+
+      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;
+      }
+
+      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') {
+              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;
+      }
+    })
+    .toString();
+}
+/**
+ * @type {import('postcss').PluginCreator<void>}
+ * @return {import('postcss').Plugin}
+ */
+function pluginCreator() {
+  return {
+    postcssPlugin: 'postcss-minify-gradients',
+    OnceExit(css) {
+      css.walkDecls(optimise);
+    },
+  };
+}
+
+pluginCreator.postcss = true;
+module.exports = pluginCreator;

package/src/isColorStop.js

@@ -0,0 +1,62 @@
+'use strict';
+const { unit } = require('postcss-value-parser');
+const { colord, extend } = require('colord');
+const namesPlugin = require('colord/plugins/names');
+
+extend([/** @type {any} */ (namesPlugin)]);
+
+/* Code derived from https://github.com/pigcan/is-color-stop */
+
+const lengthUnits = new Set([
+  'PX',
+  'IN',
+  'CM',
+  'MM',
+  'EM',
+  'REM',
+  'POINTS',
+  'PC',
+  'EX',
+  'CH',
+  'VW',
+  'VH',
+  'VMIN',
+  'VMAX',
+  '%',
+]);
+
+/**
+ * @param {string} input
+ * @return {boolean}
+ */
+function isCSSLengthUnit(input) {
+  return lengthUnits.has(input.toUpperCase());
+}
+/**
+ * @param {string|undefined} str
+ * @return {boolean}
+ */
+function isStop(str) {
+  if (str) {
+    let stop = false;
+    const node = unit(str);
+    if (node) {
+      const number = Number(node.number);
+      if (number === 0 || (!isNaN(number) && isCSSLengthUnit(node.unit))) {
+        stop = true;
+      }
+    } else {
+      stop = /^calc\(\S+\)$/g.test(str);
+    }
+    return stop;
+  }
+  return true;
+}
+/**
+ * @param {string} color
+ * @param {string} [stop]
+ * @return {boolean}
+ */
+module.exports = function isColorStop(color, stop) {
+  return colord(color).isValid() && isStop(stop);
+};

package/types/index.d.ts

@@ -0,0 +1,9 @@
+export = pluginCreator;
+/**
+ * @type {import('postcss').PluginCreator<void>}
+ * @return {import('postcss').Plugin}
+ */
+declare function pluginCreator(): import('postcss').Plugin;
+declare namespace pluginCreator {
+    const postcss: true;
+}

package/types/isColorStop.d.ts

@@ -0,0 +1,2 @@
+declare function _exports(color: string, stop?: string | undefined): boolean;
+export = _exports;

package/dist/index.js

@@ -1,186 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _postcssValueParser = _interopRequireWildcard(require("postcss-value-parser"));
-
-var _cssnanoUtils = require("cssnano-utils");
-
-var _isColorStop = _interopRequireDefault(require("./isColorStop.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const angles = {
-  top: '0deg',
-  right: '90deg',
-  bottom: '180deg',
-  left: '270deg'
-};
-
-function isLessThan(a, b) {
-  return a.unit.toLowerCase() === b.unit.toLowerCase() && parseFloat(a.number) >= parseFloat(b.number);
-}
-
-function optimise(decl) {
-  const value = decl.value;
-
-  if (!value) {
-    return;
-  }
-
-  const normalizedValue = value.toLowerCase();
-
-  if (normalizedValue.includes('var(') || normalizedValue.includes('env(')) {
-    return;
-  }
-
-  if (!normalizedValue.includes('gradient')) {
-    return;
-  }
-
-  decl.value = (0, _postcssValueParser.default)(value).walk(node => {
-    if (node.type !== 'function' || !node.nodes.length) {
-      return false;
-    }
-
-    const lowerCasedValue = node.value.toLowerCase();
-
-    if (lowerCasedValue === 'linear-gradient' || lowerCasedValue === 'repeating-linear-gradient' || lowerCasedValue === '-webkit-linear-gradient' || lowerCasedValue === '-webkit-repeating-linear-gradient') {
-      let args = (0, _cssnanoUtils.getArguments)(node);
-
-      if (node.nodes[0].value.toLowerCase() === 'to' && args[0].length === 3) {
-        node.nodes = node.nodes.slice(2);
-        node.nodes[0].value = angles[node.nodes[0].value.toLowerCase()];
-      }
-
-      let lastStop = null;
-      args.forEach((arg, index) => {
-        if (arg.length !== 3) {
-          return;
-        }
-
-        let isFinalStop = index === args.length - 1;
-        let thisStop = (0, _postcssValueParser.unit)(arg[2].value);
-
-        if (lastStop === null) {
-          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;
-    }
-
-    if (lowerCasedValue === 'radial-gradient' || lowerCasedValue === 'repeating-radial-gradient') {
-      let args = (0, _cssnanoUtils.getArguments)(node);
-      let lastStop;
-      const hasAt = args[0].find(n => n.value.toLowerCase() === 'at');
-      args.forEach((arg, index) => {
-        if (!arg[2] || !index && hasAt) {
-          return;
-        }
-
-        let thisStop = (0, _postcssValueParser.unit)(arg[2].value);
-
-        if (!lastStop) {
-          lastStop = thisStop;
-          return;
-        }
-
-        if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
-          arg[2].value = 0;
-        }
-
-        lastStop = thisStop;
-      });
-      return false;
-    }
-
-    if (lowerCasedValue === '-webkit-radial-gradient' || lowerCasedValue === '-webkit-repeating-radial-gradient') {
-      let args = (0, _cssnanoUtils.getArguments)(node);
-      let lastStop;
-      args.forEach(arg => {
-        let color;
-        let stop;
-
-        if (arg[2] !== undefined) {
-          if (arg[0].type === 'function') {
-            color = `${arg[0].value}(${(0, _postcssValueParser.stringify)(arg[0].nodes)})`;
-          } else {
-            color = arg[0].value;
-          }
-
-          if (arg[2].type === 'function') {
-            stop = `${arg[2].value}(${(0, _postcssValueParser.stringify)(arg[2].nodes)})`;
-          } else {
-            stop = arg[2].value;
-          }
-        } else {
-          if (arg[0].type === 'function') {
-            color = `${arg[0].value}(${(0, _postcssValueParser.stringify)(arg[0].nodes)})`;
-          }
-
-          color = arg[0].value;
-        }
-
-        color = color.toLowerCase();
-        const colorStop = stop || stop === 0 ? (0, _isColorStop.default)(color, stop.toLowerCase()) : (0, _isColorStop.default)(color);
-
-        if (!colorStop || !arg[2]) {
-          return;
-        }
-
-        let thisStop = (0, _postcssValueParser.unit)(arg[2].value);
-
-        if (!lastStop) {
-          lastStop = thisStop;
-          return;
-        }
-
-        if (lastStop && thisStop && isLessThan(lastStop, thisStop)) {
-          arg[2].value = 0;
-        }
-
-        lastStop = thisStop;
-      });
-      return false;
-    }
-  }).toString();
-}
-
-function pluginCreator() {
-  return {
-    postcssPlugin: 'postcss-minify-gradients',
-
-    OnceExit(css) {
-      css.walkDecls(optimise);
-    }
-
-  };
-}
-
-pluginCreator.postcss = true;
-var _default = pluginCreator;
-exports.default = _default;
-module.exports = exports.default;

package/dist/isColorStop.js

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = isColorStop;
-
-var _postcssValueParser = require("postcss-value-parser");
-
-var _colord = require("colord");
-
-var _names = _interopRequireDefault(require("colord/plugins/names"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _colord.extend)([_names.default]);
-/* Code derived from https://github.com/pigcan/is-color-stop */
-
-const lengthUnits = new Set(['PX', 'IN', 'CM', 'MM', 'EM', 'REM', 'POINTS', 'PC', 'EX', 'CH', 'VW', 'VH', 'VMIN', 'VMAX', '%']);
-
-function isCSSLengthUnit(input) {
-  return lengthUnits.has(input.toUpperCase());
-}
-
-function isStop(str) {
-  let stop = !str;
-
-  if (!stop) {
-    const node = (0, _postcssValueParser.unit)(str);
-
-    if (node) {
-      if (node.number === 0 || !isNaN(node.number) && isCSSLengthUnit(node.unit)) {
-        stop = true;
-      }
-    } else {
-      stop = /^calc\(\S+\)$/g.test(str);
-    }
-  }
-
-  return stop;
-}
-
-function isColorStop(color, stop) {
-  return (0, _colord.colord)(color).isValid() && isStop(stop);
-}
-
-module.exports = exports.default;