postcss-colormin 5.2.3 → 5.3.0

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "postcss-colormin",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "description": "Minify colors in your CSS files with PostCSS.",
-  "main": "dist/index.js",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
   "files": [
-    "dist",
-    "LICENSE-MIT"
+    "src",
+    "LICENSE-MIT",
+    "types"
   ],
   "keywords": [
     "color",
@@ -37,14 +39,11 @@
     "node": "^10 || ^12 || >=14.0"
   },
   "devDependencies": {
+    "@types/caniuse-api": "^3.0.2",
     "postcss": "^8.2.15"
   },
   "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]-colormin\n\n> Minify colors in your CSS files with PostCSS.\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-colormin) do:\n\n```\nnpm install postcss-colormin --save\n```\n\n\n## Example\n\n```js\nvar postcss = require('postcss')\nvar colormin = require('postcss-colormin');\n\nvar css = 'h1 {color: rgba(255, 0, 0, 1)}';\nconsole.log(postcss(colormin()).process(css).css);\n\n// => 'h1 {color:red}'\n```\n\nFor more examples see the [tests](src/__tests__/index.js).\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\n[postcss]:  https://github.com/postcss/postcss\n"
 }

package/src/index.js

@@ -0,0 +1,159 @@
+'use strict';
+const browserslist = require('browserslist');
+const { isSupported } = require('caniuse-api');
+const valueParser = require('postcss-value-parser');
+const minifyColor = require('./minifyColor');
+
+/**
+ * @param {{nodes: valueParser.Node[]}} parent
+ * @param {(node: valueParser.Node, index: number, parent: {nodes: valueParser.Node[]}) => false | undefined} callback
+ * @return {void}
+ */
+function walk(parent, callback) {
+  parent.nodes.forEach((node, index) => {
+    const bubble = callback(node, index, parent);
+
+    if (node.type === 'function' && bubble !== false) {
+      walk(node, callback);
+    }
+  });
+}
+
+/*
+ * IE 8 & 9 do not properly handle clicks on elements
+ * with a `transparent` `background-color`.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
+ */
+const browsersWithTransparentBug = new Set(['ie 8', 'ie 9']);
+const mathFunctions = new Set(['calc', 'min', 'max', 'clamp']);
+
+/**
+ * @param {valueParser.Node} node
+ * @return {boolean}
+ */
+function isMathFunctionNode(node) {
+  if (node.type !== 'function') {
+    return false;
+  }
+  return mathFunctions.has(node.value.toLowerCase());
+}
+
+/**
+ * @param {string} value
+ * @param {Record<string, boolean>} options
+ * @return {string}
+ */
+function transform(value, options) {
+  const parsed = valueParser(value);
+
+  walk(parsed, (node, index, parent) => {
+    if (node.type === 'function') {
+      if (/^(rgb|hsl)a?$/i.test(node.value)) {
+        const { value: originalValue } = node;
+
+        node.value = minifyColor(valueParser.stringify(node), options);
+        /** @type {string} */ (node.type) = 'word';
+
+        const next = parent.nodes[index + 1];
+
+        if (
+          node.value !== originalValue &&
+          next &&
+          (next.type === 'word' || next.type === 'function')
+        ) {
+          parent.nodes.splice(
+            index + 1,
+            0,
+            /** @type {valueParser.SpaceNode} */ ({
+              type: 'space',
+              value: ' ',
+            })
+          );
+        }
+      } else if (isMathFunctionNode(node)) {
+        return false;
+      }
+    } else if (node.type === 'word') {
+      node.value = minifyColor(node.value, options);
+    }
+  });
+
+  return parsed.toString();
+}
+
+/**
+ * @param {Record<string, boolean>} options
+ * @param {string[]} browsers
+ * @return {Record<string, boolean>}
+ */
+function addPluginDefaults(options, browsers) {
+  const defaults = {
+    // Does the browser support 4 & 8 character hex notation
+    transparent:
+      browsers.some((b) => browsersWithTransparentBug.has(b)) === false,
+    // Does the browser support "transparent" value properly
+    alphaHex: isSupported('css-rrggbbaa', browsers),
+    name: true,
+  };
+  return { ...defaults, ...options };
+}
+/**
+ * @type {import('postcss').PluginCreator<Record<string, boolean>>}
+ * @param {Record<string, boolean>} config
+ * @return {import('postcss').Plugin}
+ */
+function pluginCreator(config = {}) {
+  return {
+    postcssPlugin: 'postcss-colormin',
+
+    prepare(result) {
+      /** @type {typeof result.opts & browserslist.Options} */
+      const resultOptions = result.opts || {};
+      const browsers = browserslist(null, {
+        stats: resultOptions.stats,
+        path: __dirname,
+        env: resultOptions.env,
+      });
+
+      const cache = new Map();
+      const options = addPluginDefaults(config, browsers);
+
+      return {
+        OnceExit(css) {
+          css.walkDecls((decl) => {
+            if (
+              /^(composes|font|filter|-webkit-tap-highlight-color)/i.test(
+                decl.prop
+              )
+            ) {
+              return;
+            }
+
+            const value = decl.value;
+
+            if (!value) {
+              return;
+            }
+
+            const cacheKey = JSON.stringify({ value, options, browsers });
+
+            if (cache.has(cacheKey)) {
+              decl.value = cache.get(cacheKey);
+
+              return;
+            }
+
+            const newValue = transform(value, options);
+
+            decl.value = newValue;
+            cache.set(cacheKey, newValue);
+          });
+        },
+      };
+    },
+  };
+}
+
+pluginCreator.postcss = true;
+module.exports = pluginCreator;

package/src/minifyColor.js

@@ -0,0 +1,28 @@
+'use strict';
+const { colord, extend } = require('colord');
+const namesPlugin = require('colord/plugins/names');
+const minifierPlugin = require('colord/plugins/minify');
+
+extend(/** @type {any[]} */ ([namesPlugin, minifierPlugin]));
+
+/**
+ * Performs color value minification
+ *
+ * @param {string} input - CSS value
+ * @param {Record<string, boolean>} options  object with colord.minify() options
+ * @return {string}
+ */
+module.exports = function minifyColor(input, options = {}) {
+  const instance = colord(input);
+
+  if (instance.isValid()) {
+    // Try to shorten the string if it is a valid CSS color value
+    const minified = instance.minify(options);
+
+    // Fall back to the original input if it's smaller or has equal length
+    return minified.length < input.length ? minified : input.toLowerCase();
+  } else {
+    // Possibly malformed, so pass through
+    return input;
+  }
+};

package/types/index.d.ts

@@ -0,0 +1,10 @@
+export = pluginCreator;
+/**
+ * @type {import('postcss').PluginCreator<Record<string, boolean>>}
+ * @param {Record<string, boolean>} config
+ * @return {import('postcss').Plugin}
+ */
+declare function pluginCreator(config?: Record<string, boolean>): import('postcss').Plugin;
+declare namespace pluginCreator {
+    const postcss: true;
+}

package/types/minifyColor.d.ts

@@ -0,0 +1,2 @@
+declare function _exports(input: string, options?: Record<string, boolean>): string;
+export = _exports;

package/dist/index.js

@@ -1,144 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _browserslist = _interopRequireDefault(require("browserslist"));
-
-var _caniuseApi = require("caniuse-api");
-
-var _postcssValueParser = _interopRequireWildcard(require("postcss-value-parser"));
-
-var _minifyColor = _interopRequireDefault(require("./minifyColor"));
-
-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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function walk(parent, callback) {
-  parent.nodes.forEach((node, index) => {
-    const bubble = callback(node, index, parent);
-
-    if (node.nodes && bubble !== false) {
-      walk(node, callback);
-    }
-  });
-}
-/*
- * IE 8 & 9 do not properly handle clicks on elements
- * with a `transparent` `background-color`.
- *
- * https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
- */
-
-
-function hasTransparentBug(browser) {
-  return ~['ie 8', 'ie 9'].indexOf(browser);
-}
-
-function isMathFunctionNode(node) {
-  if (node.type !== 'function') {
-    return false;
-  }
-
-  return ['calc', 'min', 'max', 'clamp'].includes(node.value.toLowerCase());
-}
-
-function transform(value, options) {
-  const parsed = (0, _postcssValueParser.default)(value);
-  walk(parsed, (node, index, parent) => {
-    if (node.type === 'function') {
-      if (/^(rgb|hsl)a?$/i.test(node.value)) {
-        const {
-          value: originalValue
-        } = node;
-        node.value = (0, _minifyColor.default)((0, _postcssValueParser.stringify)(node), options);
-        node.type = 'word';
-        const next = parent.nodes[index + 1];
-
-        if (node.value !== originalValue && next && (next.type === 'word' || next.type === 'function')) {
-          parent.nodes.splice(index + 1, 0, {
-            type: 'space',
-            value: ' '
-          });
-        }
-      } else if (isMathFunctionNode(node)) {
-        return false;
-      }
-    } else if (node.type === 'word') {
-      node.value = (0, _minifyColor.default)(node.value, options);
-    }
-  });
-  return parsed.toString();
-}
-
-function addPluginDefaults(options, browsers) {
-  const defaults = {
-    transparent: browsers.some(hasTransparentBug) === false,
-    // Does the browser support 4 & 8 character hex notation
-    alphaHex: (0, _caniuseApi.isSupported)('css-rrggbbaa', browsers),
-    // Does the browser support "transparent" value properly
-    name: true
-  };
-  return { ...defaults,
-    ...options
-  };
-}
-
-function pluginCreator(config = {}) {
-  return {
-    postcssPlugin: 'postcss-colormin',
-
-    prepare(result) {
-      const resultOptions = result.opts || {};
-      const browsers = (0, _browserslist.default)(null, {
-        stats: resultOptions.stats,
-        path: __dirname,
-        env: resultOptions.env
-      });
-      const cache = new Map();
-      const options = addPluginDefaults(config, browsers);
-      return {
-        OnceExit(css) {
-          css.walkDecls(decl => {
-            if (/^(composes|font|filter|-webkit-tap-highlight-color)/i.test(decl.prop)) {
-              return;
-            }
-
-            const value = decl.value;
-
-            if (!value) {
-              return;
-            }
-
-            const cacheKey = JSON.stringify({
-              value,
-              options,
-              browsers
-            });
-
-            if (cache.has(cacheKey)) {
-              decl.value = cache.get(cacheKey);
-              return;
-            }
-
-            const newValue = transform(value, options);
-            decl.value = newValue;
-            cache.set(cacheKey, newValue);
-          });
-        }
-
-      };
-    }
-
-  };
-}
-
-pluginCreator.postcss = true;
-var _default = pluginCreator;
-exports.default = _default;
-module.exports = exports.default;

package/dist/minifyColor.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = minifyColor;
-
-var _colord = require("colord");
-
-var _names = _interopRequireDefault(require("colord/plugins/names"));
-
-var _minify = _interopRequireDefault(require("colord/plugins/minify"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _colord.extend)([_names.default, _minify.default]);
-/**
- * Performs color value minification
- *
- * @param {string} input - CSS value
- * @param {boolean} options - object with colord.minify() options
- */
-
-function minifyColor(input, options = {}) {
-  const instance = (0, _colord.colord)(input);
-
-  if (instance.isValid()) {
-    // Try to shorten the string if it is a valid CSS color value
-    const minified = instance.minify(options); // Fall back to the original input if it's smaller or has equal length
-
-    return minified.length < input.length ? minified : input.toLowerCase();
-  } else {
-    // Possibly malformed, so pass through
-    return input;
-  }
-}
-
-module.exports = exports.default;