postcss-colormin 5.0.0-rc.2 → 5.2.0

package/dist/index.js

@@ -7,13 +7,15 @@ exports.default = void 0;
 
 var _browserslist = _interopRequireDefault(require("browserslist"));
 
+var _caniuseApi = require("caniuse-api");
+
 var _postcssValueParser = _interopRequireWildcard(require("postcss-value-parser"));
 
-var _colours = _interopRequireDefault(require("./colours"));
+var _minifyColor = _interopRequireDefault(require("./minifyColor"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+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) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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 }; }
 
@@ -46,7 +48,7 @@ function isMathFunctionNode(node) {
   return ['calc', 'min', 'max', 'clamp'].includes(node.value.toLowerCase());
 }
 
-function transform(value, isLegacy, colorminCache) {
+function transform(value, options) {
   const parsed = (0, _postcssValueParser.default)(value);
   walk(parsed, (node, index, parent) => {
     if (node.type === 'function') {
@@ -54,7 +56,7 @@ function transform(value, isLegacy, colorminCache) {
         const {
           value: originalValue
         } = node;
-        node.value = (0, _colours.default)((0, _postcssValueParser.stringify)(node), isLegacy, colorminCache);
+        node.value = (0, _minifyColor.default)((0, _postcssValueParser.stringify)(node), options);
         node.type = 'word';
         const next = parent.nodes[index + 1];
 
@@ -68,7 +70,7 @@ function transform(value, isLegacy, colorminCache) {
         return false;
       }
     } else if (node.type === 'word') {
-      node.value = (0, _colours.default)(node.value, isLegacy, colorminCache);
+      node.value = (0, _minifyColor.default)(node.value, options);
     }
   });
   return parsed.toString();
@@ -85,8 +87,10 @@ function pluginCreator() {
         path: __dirname,
         env: resultOpts.env
       });
-      const isLegacy = browsers.some(hasTransparentBug);
-      const colorminCache = {};
+      const options = {
+        supportsTransparent: browsers.some(hasTransparentBug) === false,
+        supportsAlphaHex: (0, _caniuseApi.isSupported)('css-rrggbbaa', browsers)
+      };
       const cache = {};
       return {
         OnceExit(css) {
@@ -101,14 +105,18 @@ function pluginCreator() {
               return;
             }
 
-            const cacheKey = `${decl.prop}|${decl.value}`;
+            const cacheKey = JSON.stringify({
+              value,
+              options,
+              browsers
+            });
 
             if (cache[cacheKey]) {
               decl.value = cache[cacheKey];
               return;
             }
 
-            const newValue = transform(value, isLegacy, colorminCache);
+            const newValue = transform(value, options);
             decl.value = newValue;
             cache[cacheKey] = newValue;
           });

package/dist/lib/color.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "process", {
+  enumerable: true,
+  get: function () {
+    return _colord.colord;
+  }
+});
+Object.defineProperty(exports, "getFormat", {
+  enumerable: true,
+  get: function () {
+    return _colord.getFormat;
+  }
+});
+
+var _colord = require("colord");
+
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+
+var _getShortestString = _interopRequireDefault(require("./getShortestString"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let minifierPlugin = Colord => {
+  /**
+   * Shortens a color to 3 or 4 digit hexadecimal string if it's possible.
+   * Returns the original (6 or 8 digit) hex if the it can't be shortened.
+   */
+  Colord.prototype.toShortHex = function ({
+    formatAlpha
+  }) {
+    let hex = this.toHex();
+    let [, r1, r2, g1, g2, b1, b2, a1, a2] = hex.split(''); // Check if the string can be shorten
+
+    if (r1 === r2 && g1 === g2 && b1 === b2) {
+      if (this.alpha() === 1) {
+        // Express as 3 digit hexadecimal string if the color doesn't have an alpha channel
+        return '#' + r1 + g1 + b1;
+      } else if (formatAlpha && a1 === a2) {
+        // Format 4 digit hex
+        return '#' + r1 + g1 + b1 + a1;
+      }
+    }
+
+    return hex;
+  };
+  /**
+   * Returns the shortest representation of a color.
+   */
+
+
+  Colord.prototype.toShortString = function ({
+    supportsTransparent,
+    supportsAlphaHex
+  }) {
+    let {
+      r,
+      g,
+      b
+    } = this.toRgb();
+    let a = this.alpha(); // RGB[A] and HSL[A] functional notations
+
+    let options = [this.toRgbString(), // e.g. "rgb(128, 128, 128)" or "rgba(128, 128, 128, 0.5)"
+    this.toHslString() // e.g. "hsl(180, 50%, 50%)" or "hsla(180, 50%, 50%, 0.5)"
+    ]; // Hexadecimal notations
+
+    if (supportsAlphaHex && a < 1) {
+      let alphaHex = this.toShortHex({
+        formatAlpha: true
+      }); // e.g. "#7777" or "#80808080"
+      // Output 4 or 8 digit hex only if the color conversion is lossless
+
+      if ((0, _colord.colord)(alphaHex).alpha() === a) {
+        options.push(alphaHex);
+      }
+    } else if (a === 1) {
+      options.push(this.toShortHex({
+        formatAlpha: false
+      })); // e.g. "#777" or "#808080"
+    } // CSS keyword
+
+
+    if (supportsTransparent && r === 0 && g === 0 && b === 0 && a === 0) {
+      options.push('transparent');
+    } else if (a === 1) {
+      let name = this.toName(); // e.g. "gray"
+
+      if (name) {
+        options.push(name);
+      }
+    } // Find the shortest option available
+
+
+    return (0, _getShortestString.default)(options);
+  };
+};
+
+(0, _colord.extend)([_names.default, minifierPlugin]);

package/dist/lib/getShortestString.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Returns the shortest string in array
+ */
+const getShortestString = strings => {
+  let shortest = null;
+
+  for (let string of strings) {
+    if (shortest === null || string.length < shortest.length) {
+      shortest = string;
+    }
+  }
+
+  return shortest;
+};
+
+var _default = getShortestString;
+exports.default = _default;
+module.exports = exports.default;

package/dist/minifyColor.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = minifyColor;
+
+var _color = require("./lib/color");
+
+var _getShortestString = _interopRequireDefault(require("./lib/getShortestString"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Performs color value minification
+ *
+ * @param {string} input - CSS value
+ * @param {boolean} options.supportsAlphaHex - Does the browser support 4 & 8 character hex notation
+ * @param {boolean} options.supportsTransparent – Does the browser support "transparent" value properly
+ */
+function minifyColor(input, options = {}) {
+  const settings = {
+    supportsAlphaHex: false,
+    supportsTransparent: true,
+    ...options
+  };
+  const instance = (0, _color.process)(input);
+
+  if (instance.isValid()) {
+    // Try to shorten the string if it is a valid CSS color value.
+    // Fall back to the original input if it's smaller or has equal length/
+    return (0, _getShortestString.default)([input.toLowerCase(), instance.toShortString(settings)]);
+  } else {
+    // Possibly malformed, so pass through
+    return input;
+  }
+}
+
+module.exports = exports.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-colormin",
-  "version": "5.0.0-rc.2",
+  "version": "5.2.0",
   "description": "Minify colors in your CSS files with PostCSS.",
   "main": "dist/index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "prebuild": "del-cli dist",
-    "build": "cross-env BABEL_ENV=publish babel src --config-file ../../babel.config.js --out-dir dist --ignore \"**/__tests__/\" && babel-node script/generate",
+    "build": "cross-env BABEL_ENV=publish babel src --config-file ../../babel.config.json --out-dir dist --ignore \"**/__tests__/\"",
     "prepublish": "yarn build"
   },
   "keywords": [
@@ -30,8 +30,9 @@
   },
   "repository": "cssnano/cssnano",
   "dependencies": {
-    "browserslist": "^4.16.0",
-    "color": "^3.1.1",
+    "browserslist": "^4.16.6",
+    "caniuse-api": "^3.0.0",
+    "colord": "^2.0.1",
     "postcss-value-parser": "^4.1.0"
   },
   "bugs": {
@@ -41,10 +42,10 @@
     "node": "^10 || ^12 || >=14.0"
   },
   "devDependencies": {
-    "postcss": "^8.2.1"
+    "postcss": "^8.2.15"
   },
   "peerDependencies": {
-    "postcss": "^8.2.1"
+    "postcss": "^8.2.15"
   },
-  "gitHead": "5ba19ca54892f76ba6b2b698b4d88adcabd4451b"
+  "gitHead": "9b3c54fd94f3e2bdb503d1e21f171d7fe02f33ca"
 }

package/CHANGELOG.md

@@ -1,62 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [5.0.0-rc.2](https://github.com/cssnano/cssnano/compare/postcss-colormin@5.0.0-rc.1...postcss-colormin@5.0.0-rc.2) (2021-03-15)
-
-**Note:** Version bump only for package postcss-colormin
-
-
-
-
-
-# [5.0.0-rc.1](https://github.com/cssnano/cssnano/compare/postcss-colormin@5.0.0-rc.0...postcss-colormin@5.0.0-rc.1) (2021-03-04)
-
-**Note:** Version bump only for package postcss-colormin
-
-
-
-
-
-# 5.0.0-rc.0 (2021-02-19)
-
-
-### Bug Fixes
-
-* **postcss-colormin:** fixed plugin running error ([#856](https://github.com/cssnano/cssnano/issues/856)) ([eb37dd5](https://github.com/cssnano/cssnano/commit/eb37dd570a916ce7d6080a782a24d951082c5497))
-
-
-### chore
-
-* minimum require version of node is 10.13 ([#871](https://github.com/cssnano/cssnano/issues/871)) ([28bda24](https://github.com/cssnano/cssnano/commit/28bda243e32ce3ba89b3c358a5f78727b3732f11))
-
-
-### Features
-
-* migarete to PostCSS 8 ([#975](https://github.com/cssnano/cssnano/issues/975)) ([40b82dc](https://github.com/cssnano/cssnano/commit/40b82dca7f53ac02cd4fe62846dec79b898ccb49))
-
-
-### BREAKING CHANGES
-
-* minimum supported `postcss` version is `8.2.1`
-* minimum require version of node is 10.13
-
-
-
-## 4.1.9 (2019-02-12)
-
-
-### Performance Improvements
-
-* **postcss-colormin:** increase ([#682](https://github.com/cssnano/cssnano/issues/682)) ([73e021e](https://github.com/cssnano/cssnano/commit/73e021e0fd02ab44c8726ae0719c5669a29bc8dc))
-* **postcss-colormin:** increase perf ([#696](https://github.com/cssnano/cssnano/issues/696)) ([88c2f2e](https://github.com/cssnano/cssnano/commit/88c2f2e0c20fcd3f3be20b10501e0cec9e453aeb))
-
-
-
-## 4.1.1 (2018-09-24)
-
-
-### Bug Fixes
-
-* **postcss-merge-longhand:** not mangle border output ([#555](https://github.com/cssnano/cssnano/issues/555)) ([9a70605](https://github.com/cssnano/cssnano/commit/9a706050b621e7795a9bf74eb7110b5c81804ffe)), closes [#553](https://github.com/cssnano/cssnano/issues/553) [#554](https://github.com/cssnano/cssnano/issues/554)

package/dist/colours.js

@@ -1,74 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _color = _interopRequireDefault(require("color"));
-
-var _keywords = _interopRequireDefault(require("./keywords.json"));
-
-var _toShorthand = _interopRequireDefault(require("./lib/toShorthand"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const shorter = (a, b) => (a && a.length < b.length ? a : b).toLowerCase();
-
-var _default = (colour, isLegacy = false, cache = false) => {
-  const key = colour + '|' + isLegacy;
-
-  if (cache && cache[key]) {
-    return cache[key];
-  }
-
-  try {
-    const parsed = (0, _color.default)(colour.toLowerCase());
-    const alpha = parsed.alpha();
-
-    if (alpha === 1) {
-      const toHex = (0, _toShorthand.default)(parsed.hex().toLowerCase());
-      const result = shorter(_keywords.default[toHex], toHex);
-
-      if (cache) {
-        cache[key] = result;
-      }
-
-      return result;
-    } else {
-      const rgb = parsed.rgb();
-
-      if (!isLegacy && !rgb.color[0] && !rgb.color[1] && !rgb.color[2] && !alpha) {
-        const result = 'transparent';
-
-        if (cache) {
-          cache[key] = result;
-        }
-
-        return result;
-      }
-
-      let hsla = parsed.hsl().string();
-      let rgba = rgb.string();
-      let result = hsla.length < rgba.length ? hsla : rgba;
-
-      if (cache) {
-        cache[key] = result;
-      }
-
-      return result;
-    }
-  } catch (e) {
-    // Possibly malformed, so pass through
-    const result = colour;
-
-    if (cache) {
-      cache[key] = result;
-    }
-
-    return result;
-  }
-};
-
-exports.default = _default;
-module.exports = exports.default;

package/dist/keywords.json

@@ -1,33 +0,0 @@
-{
-  "#f0ffff": "azure",
-  "#f5f5dc": "beige",
-  "#ffe4c4": "bisque",
-  "#a52a2a": "brown",
-  "#ff7f50": "coral",
-  "#ffd700": "gold",
-  "#808080": "grey",
-  "#008000": "green",
-  "#4b0082": "indigo",
-  "#fffff0": "ivory",
-  "#f0e68c": "khaki",
-  "#faf0e6": "linen",
-  "#800000": "maroon",
-  "#000080": "navy",
-  "#808000": "olive",
-  "#ffa500": "orange",
-  "#da70d6": "orchid",
-  "#cd853f": "peru",
-  "#ffc0cb": "pink",
-  "#dda0dd": "plum",
-  "#800080": "purple",
-  "#f00": "red",
-  "#fa8072": "salmon",
-  "#a0522d": "sienna",
-  "#c0c0c0": "silver",
-  "#fffafa": "snow",
-  "#d2b48c": "tan",
-  "#008080": "teal",
-  "#ff6347": "tomato",
-  "#ee82ee": "violet",
-  "#f5deb3": "wheat"
-}

package/dist/lib/toShorthand.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _default = hex => {
-  if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
-    return '#' + hex[2] + hex[4] + hex[6];
-  }
-
-  return hex;
-};
-
-exports.default = _default;
-module.exports = exports.default;