postcss-colormin 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.js +16 -7
  2. package/dist/lib/color.js +101 -0
  3. package/dist/lib/getShortestString.js +25 -0
  4. package/dist/minifyColor.js +39 -0
  5. package/package.json +5 -4
  6. package/CHANGELOG.md +0 -89
  7. package/dist/colours.js +0 -60
  8. package/dist/lib/toShorthand.js +0 -17
package/dist/index.js CHANGED
@@ -7,9 +7,11 @@ exports.default = void 0;
7
7
 
8
8
  var _browserslist = _interopRequireDefault(require("browserslist"));
9
9
 
10
+ var _caniuseApi = require("caniuse-api");
11
+
10
12
  var _postcssValueParser = _interopRequireWildcard(require("postcss-value-parser"));
11
13
 
12
- var _colours = _interopRequireDefault(require("./colours"));
14
+ var _minifyColor = _interopRequireDefault(require("./minifyColor"));
13
15
 
14
16
  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); }
15
17
 
@@ -46,7 +48,7 @@ function isMathFunctionNode(node) {
46
48
  return ['calc', 'min', 'max', 'clamp'].includes(node.value.toLowerCase());
47
49
  }
48
50
 
49
- function transform(value, isLegacy) {
51
+ function transform(value, options) {
50
52
  const parsed = (0, _postcssValueParser.default)(value);
51
53
  walk(parsed, (node, index, parent) => {
52
54
  if (node.type === 'function') {
@@ -54,7 +56,7 @@ function transform(value, isLegacy) {
54
56
  const {
55
57
  value: originalValue
56
58
  } = node;
57
- node.value = (0, _colours.default)((0, _postcssValueParser.stringify)(node), isLegacy);
59
+ node.value = (0, _minifyColor.default)((0, _postcssValueParser.stringify)(node), options);
58
60
  node.type = 'word';
59
61
  const next = parent.nodes[index + 1];
60
62
 
@@ -68,7 +70,7 @@ function transform(value, isLegacy) {
68
70
  return false;
69
71
  }
70
72
  } else if (node.type === 'word') {
71
- node.value = (0, _colours.default)(node.value, isLegacy);
73
+ node.value = (0, _minifyColor.default)(node.value, options);
72
74
  }
73
75
  });
74
76
  return parsed.toString();
@@ -85,7 +87,10 @@ function pluginCreator() {
85
87
  path: __dirname,
86
88
  env: resultOpts.env
87
89
  });
88
- const isLegacy = browsers.some(hasTransparentBug);
90
+ const options = {
91
+ supportsTransparent: browsers.some(hasTransparentBug) === false,
92
+ supportsAlphaHex: (0, _caniuseApi.isSupported)('css-rrggbbaa', browsers)
93
+ };
89
94
  const cache = {};
90
95
  return {
91
96
  OnceExit(css) {
@@ -100,14 +105,18 @@ function pluginCreator() {
100
105
  return;
101
106
  }
102
107
 
103
- const cacheKey = value + '|' + isLegacy;
108
+ const cacheKey = JSON.stringify({
109
+ value,
110
+ options,
111
+ browsers
112
+ });
104
113
 
105
114
  if (cache[cacheKey]) {
106
115
  decl.value = cache[cacheKey];
107
116
  return;
108
117
  }
109
118
 
110
- const newValue = transform(value, isLegacy);
119
+ const newValue = transform(value, options);
111
120
  decl.value = newValue;
112
121
  cache[cacheKey] = newValue;
113
122
  });
package/dist/lib/color.js ADDED
@@ -0,0 +1,101 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "process", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _colord.colord;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "getFormat", {
13
+ enumerable: true,
14
+ get: function () {
15
+ return _colord.getFormat;
16
+ }
17
+ });
18
+
19
+ var _colord = require("colord");
20
+
21
+ var _names = _interopRequireDefault(require("colord/plugins/names"));
22
+
23
+ var _getShortestString = _interopRequireDefault(require("./getShortestString"));
24
+
25
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
+
27
+ let minifierPlugin = Colord => {
28
+ /**
29
+ * Shortens a color to 3 or 4 digit hexadecimal string if it's possible.
30
+ * Returns the original (6 or 8 digit) hex if the it can't be shortened.
31
+ */
32
+ Colord.prototype.toShortHex = function ({
33
+ formatAlpha
34
+ }) {
35
+ let hex = this.toHex();
36
+ let [, r1, r2, g1, g2, b1, b2, a1, a2] = hex.split(''); // Check if the string can be shorten
37
+
38
+ if (r1 === r2 && g1 === g2 && b1 === b2) {
39
+ if (this.alpha() === 1) {
40
+ // Express as 3 digit hexadecimal string if the color doesn't have an alpha channel
41
+ return '#' + r1 + g1 + b1;
42
+ } else if (formatAlpha && a1 === a2) {
43
+ // Format 4 digit hex
44
+ return '#' + r1 + g1 + b1 + a1;
45
+ }
46
+ }
47
+
48
+ return hex;
49
+ };
50
+ /**
51
+ * Returns the shortest representation of a color.
52
+ */
53
+
54
+
55
+ Colord.prototype.toShortString = function ({
56
+ supportsTransparent,
57
+ supportsAlphaHex
58
+ }) {
59
+ let {
60
+ r,
61
+ g,
62
+ b
63
+ } = this.toRgb();
64
+ let a = this.alpha(); // RGB[A] and HSL[A] functional notations
65
+
66
+ let options = [this.toRgbString(), // e.g. "rgb(128, 128, 128)" or "rgba(128, 128, 128, 0.5)"
67
+ this.toHslString() // e.g. "hsl(180, 50%, 50%)" or "hsla(180, 50%, 50%, 0.5)"
68
+ ]; // Hexadecimal notations
69
+
70
+ if (supportsAlphaHex && a < 1) {
71
+ let alphaHex = this.toShortHex({
72
+ formatAlpha: true
73
+ }); // e.g. "#7777" or "#80808080"
74
+ // Output 4 or 8 digit hex only if the color conversion is lossless
75
+
76
+ if ((0, _colord.colord)(alphaHex).alpha() === a) {
77
+ options.push(alphaHex);
78
+ }
79
+ } else if (a === 1) {
80
+ options.push(this.toShortHex({
81
+ formatAlpha: false
82
+ })); // e.g. "#777" or "#808080"
83
+ } // CSS keyword
84
+
85
+
86
+ if (supportsTransparent && r === 0 && g === 0 && b === 0 && a === 0) {
87
+ options.push('transparent');
88
+ } else if (a === 1) {
89
+ let name = this.toName(); // e.g. "gray"
90
+
91
+ if (name) {
92
+ options.push(name);
93
+ }
94
+ } // Find the shortest option available
95
+
96
+
97
+ return (0, _getShortestString.default)(options);
98
+ };
99
+ };
100
+
101
+ (0, _colord.extend)([_names.default, minifierPlugin]);
package/dist/lib/getShortestString.js ADDED
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ /**
9
+ * Returns the shortest string in array
10
+ */
11
+ const getShortestString = strings => {
12
+ let shortest = null;
13
+
14
+ for (let string of strings) {
15
+ if (shortest === null || string.length < shortest.length) {
16
+ shortest = string;
17
+ }
18
+ }
19
+
20
+ return shortest;
21
+ };
22
+
23
+ var _default = getShortestString;
24
+ exports.default = _default;
25
+ module.exports = exports.default;
package/dist/minifyColor.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = minifyColor;
7
+
8
+ var _color = require("./lib/color");
9
+
10
+ var _getShortestString = _interopRequireDefault(require("./lib/getShortestString"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ /**
15
+ * Performs color value minification
16
+ *
17
+ * @param {string} input - CSS value
18
+ * @param {boolean} options.supportsAlphaHex - Does the browser support 4 & 8 character hex notation
19
+ * @param {boolean} options.supportsTransparent – Does the browser support "transparent" value properly
20
+ */
21
+ function minifyColor(input, options = {}) {
22
+ const settings = {
23
+ supportsAlphaHex: false,
24
+ supportsTransparent: true,
25
+ ...options
26
+ };
27
+ const instance = (0, _color.process)(input);
28
+
29
+ if (instance.isValid()) {
30
+ // Try to shorten the string if it is a valid CSS color value.
31
+ // Fall back to the original input if it's smaller or has equal length/
32
+ return (0, _getShortestString.default)([input.toLowerCase(), instance.toShortString(settings)]);
33
+ } else {
34
+ // Possibly malformed, so pass through
35
+ return input;
36
+ }
37
+ }
38
+
39
+ module.exports = exports.default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "postcss-colormin",
3
- "version": "5.1.1",
3
+ "version": "5.2.0",
4
4
  "description": "Minify colors in your CSS files with PostCSS.",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -30,8 +30,9 @@
30
30
  },
31
31
  "repository": "cssnano/cssnano",
32
32
  "dependencies": {
33
- "browserslist": "^4.16.0",
34
- "colord": "^2.0.0",
33
+ "browserslist": "^4.16.6",
34
+ "caniuse-api": "^3.0.0",
35
+ "colord": "^2.0.1",
35
36
  "postcss-value-parser": "^4.1.0"
36
37
  },
37
38
  "bugs": {
@@ -46,5 +47,5 @@
46
47
  "peerDependencies": {
47
48
  "postcss": "^8.2.15"
48
49
  },
49
- "gitHead": "08ec284f116d1ce2605deb55dfe17ffe2835b38a"
50
+ "gitHead": "9b3c54fd94f3e2bdb503d1e21f171d7fe02f33ca"
50
51
  }
package/CHANGELOG.md DELETED
@@ -1,89 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
-
6
- # [5.1.1] (2021-05-21)
7
-
8
-
9
- ### Bug Fixes
10
-
11
- * **postcss-colormin:** Strict color parsing ([#1122](https://github.com/cssnano/cssnano/issues/1122)) ([32771da](https://github.com/cssnano/cssnano/commit/32771da46ee94f07a6907ec47701189f90ad2ec0))
12
- * **postcss-colormin:** fix ERR_PACKAGE_PATH_NOT_EXPORTED ([#1110](https://github.com/cssnano/cssnano/issues/1110)) ([8a31ca38796](https://github.com/cssnano/cssnano/commit/8a31ca38796e12e6fe52620cf8a545cb058fe295))
13
-
14
- # [5.1.0](https://github.com/cssnano/cssnano/compare/postcss-colormin@5.0.0...postcss-colormin@5.1.0) (2021-05-19)
15
-
16
-
17
- ### Features
18
-
19
- * **postcss-colormin:** switch to colord and solve multiple issues ([#1107](https://github.com/cssnano/cssnano/issues/1107)) ([a7f0be4](https://github.com/cssnano/cssnano/commit/a7f0be4acc640aab89cace53a720b3d59b6f7b4f)), closes [#819](https://github.com/cssnano/cssnano/issues/819) [#1042](https://github.com/cssnano/cssnano/issues/1042) [#819](https://github.com/cssnano/cssnano/issues/819) [#771](https://github.com/cssnano/cssnano/issues/771)
20
-
21
-
22
-
23
-
24
-
25
- # [5.0.0](https://github.com/cssnano/cssnano/compare/postcss-colormin@5.0.0-rc.2...postcss-colormin@5.0.0) (2021-04-06)
26
-
27
- **Note:** Version bump only for package postcss-colormin
28
-
29
-
30
-
31
-
32
-
33
- # [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)
34
-
35
- **Note:** Version bump only for package postcss-colormin
36
-
37
-
38
-
39
-
40
-
41
- # [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)
42
-
43
- **Note:** Version bump only for package postcss-colormin
44
-
45
-
46
-
47
-
48
-
49
- # 5.0.0-rc.0 (2021-02-19)
50
-
51
-
52
- ### Bug Fixes
53
-
54
- * **postcss-colormin:** fixed plugin running error ([#856](https://github.com/cssnano/cssnano/issues/856)) ([eb37dd5](https://github.com/cssnano/cssnano/commit/eb37dd570a916ce7d6080a782a24d951082c5497))
55
-
56
-
57
- ### chore
58
-
59
- * minimum require version of node is 10.13 ([#871](https://github.com/cssnano/cssnano/issues/871)) ([28bda24](https://github.com/cssnano/cssnano/commit/28bda243e32ce3ba89b3c358a5f78727b3732f11))
60
-
61
-
62
- ### Features
63
-
64
- * migarete to PostCSS 8 ([#975](https://github.com/cssnano/cssnano/issues/975)) ([40b82dc](https://github.com/cssnano/cssnano/commit/40b82dca7f53ac02cd4fe62846dec79b898ccb49))
65
-
66
-
67
- ### BREAKING CHANGES
68
-
69
- * minimum supported `postcss` version is `8.2.1`
70
- * minimum require version of node is 10.13
71
-
72
-
73
-
74
- ## 4.1.9 (2019-02-12)
75
-
76
-
77
- ### Performance Improvements
78
-
79
- * **postcss-colormin:** increase ([#682](https://github.com/cssnano/cssnano/issues/682)) ([73e021e](https://github.com/cssnano/cssnano/commit/73e021e0fd02ab44c8726ae0719c5669a29bc8dc))
80
- * **postcss-colormin:** increase perf ([#696](https://github.com/cssnano/cssnano/issues/696)) ([88c2f2e](https://github.com/cssnano/cssnano/commit/88c2f2e0c20fcd3f3be20b10501e0cec9e453aeb))
81
-
82
-
83
-
84
- ## 4.1.1 (2018-09-24)
85
-
86
-
87
- ### Bug Fixes
88
-
89
- * **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 DELETED
@@ -1,60 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _colord = require("colord");
9
-
10
- var _names = _interopRequireDefault(require("colord/plugins/names"));
11
-
12
- var _toShorthand = _interopRequireDefault(require("./lib/toShorthand"));
13
-
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
- (0, _colord.extend)([_names.default]);
17
-
18
- var _default = (colour, isLegacy = false) => {
19
- const parsed = (0, _colord.colord)(colour);
20
-
21
- if (parsed.isValid()) {
22
- const alpha = parsed.alpha();
23
-
24
- if (alpha === 1) {
25
- const toHex = (0, _toShorthand.default)(parsed.toHex());
26
- const toName = parsed.toName();
27
-
28
- if (toName && toName.length < toHex.length) {
29
- return toName;
30
- } else {
31
- return toHex;
32
- }
33
- } else {
34
- const rgb = parsed.toRgb();
35
-
36
- if (!isLegacy && !rgb.r && !rgb.g && !rgb.b && !alpha) {
37
- return 'transparent';
38
- }
39
-
40
- let hsla = parsed.toHslString();
41
- let rgba = parsed.toRgbString();
42
- const shortestConversion = hsla.length < rgba.length ? hsla : rgba;
43
- let result;
44
-
45
- if (colour.length < shortestConversion.length) {
46
- result = colour;
47
- } else {
48
- result = shortestConversion;
49
- }
50
-
51
- return result;
52
- }
53
- } else {
54
- // Possibly malformed, so pass through
55
- return colour;
56
- }
57
- };
58
-
59
- exports.default = _default;
60
- module.exports = exports.default;
package/dist/lib/toShorthand.js DELETED
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var _default = hex => {
9
- if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
10
- return '#' + hex[2] + hex[4] + hex[6];
11
- }
12
-
13
- return hex;
14
- };
15
-
16
- exports.default = _default;
17
- module.exports = exports.default;