postcss-colormin 5.2.1 → 5.2.5
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.
- package/package.json +6 -11
- package/src/index.js +131 -0
- package/src/minifyColor.js +27 -0
- package/dist/index.js +0 -134
- package/dist/minifyColor.js +0 -48
package/package.json
CHANGED
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "postcss-colormin",
|
|
3
|
-
"version": "5.2.
|
|
3
|
+
"version": "5.2.5",
|
|
4
4
|
"description": "Minify colors in your CSS files with PostCSS.",
|
|
5
|
-
"main": "
|
|
5
|
+
"main": "src/index.js",
|
|
6
6
|
"files": [
|
|
7
|
-
"
|
|
7
|
+
"src",
|
|
8
8
|
"LICENSE-MIT"
|
|
9
9
|
],
|
|
10
|
-
"scripts": {
|
|
11
|
-
"prebuild": "rimraf dist",
|
|
12
|
-
"build": "cross-env BABEL_ENV=publish babel src --config-file ../../babel.config.json --out-dir dist --ignore \"**/__tests__/\"",
|
|
13
|
-
"prepare": "yarn build"
|
|
14
|
-
},
|
|
15
10
|
"keywords": [
|
|
16
11
|
"color",
|
|
17
12
|
"colors",
|
|
@@ -33,7 +28,7 @@
|
|
|
33
28
|
"browserslist": "^4.16.6",
|
|
34
29
|
"caniuse-api": "^3.0.0",
|
|
35
30
|
"colord": "^2.9.1",
|
|
36
|
-
"postcss-value-parser": "^4.
|
|
31
|
+
"postcss-value-parser": "^4.2.0"
|
|
37
32
|
},
|
|
38
33
|
"bugs": {
|
|
39
34
|
"url": "https://github.com/cssnano/cssnano/issues"
|
|
@@ -47,5 +42,5 @@
|
|
|
47
42
|
"peerDependencies": {
|
|
48
43
|
"postcss": "^8.2.15"
|
|
49
44
|
},
|
|
50
|
-
"
|
|
51
|
-
}
|
|
45
|
+
"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"
|
|
46
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
const browserslist = require('browserslist');
|
|
3
|
+
const { isSupported } = require('caniuse-api');
|
|
4
|
+
const valueParser = require('postcss-value-parser');
|
|
5
|
+
const minifyColor = require('./minifyColor');
|
|
6
|
+
|
|
7
|
+
function walk(parent, callback) {
|
|
8
|
+
parent.nodes.forEach((node, index) => {
|
|
9
|
+
const bubble = callback(node, index, parent);
|
|
10
|
+
|
|
11
|
+
if (node.nodes && bubble !== false) {
|
|
12
|
+
walk(node, callback);
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/*
|
|
18
|
+
* IE 8 & 9 do not properly handle clicks on elements
|
|
19
|
+
* with a `transparent` `background-color`.
|
|
20
|
+
*
|
|
21
|
+
* https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
|
|
22
|
+
*/
|
|
23
|
+
const browsersWithTransparentBug = new Set(['ie 8', 'ie 9']);
|
|
24
|
+
const mathFunctions = new Set(['calc', 'min', 'max', 'clamp']);
|
|
25
|
+
|
|
26
|
+
function isMathFunctionNode(node) {
|
|
27
|
+
if (node.type !== 'function') {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
return mathFunctions.has(node.value.toLowerCase());
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
function transform(value, options) {
|
|
34
|
+
const parsed = valueParser(value);
|
|
35
|
+
|
|
36
|
+
walk(parsed, (node, index, parent) => {
|
|
37
|
+
if (node.type === 'function') {
|
|
38
|
+
if (/^(rgb|hsl)a?$/i.test(node.value)) {
|
|
39
|
+
const { value: originalValue } = node;
|
|
40
|
+
|
|
41
|
+
node.value = minifyColor(valueParser.stringify(node), options);
|
|
42
|
+
node.type = 'word';
|
|
43
|
+
|
|
44
|
+
const next = parent.nodes[index + 1];
|
|
45
|
+
|
|
46
|
+
if (
|
|
47
|
+
node.value !== originalValue &&
|
|
48
|
+
next &&
|
|
49
|
+
(next.type === 'word' || next.type === 'function')
|
|
50
|
+
) {
|
|
51
|
+
parent.nodes.splice(index + 1, 0, {
|
|
52
|
+
type: 'space',
|
|
53
|
+
value: ' ',
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
} else if (isMathFunctionNode(node)) {
|
|
57
|
+
return false;
|
|
58
|
+
}
|
|
59
|
+
} else if (node.type === 'word') {
|
|
60
|
+
node.value = minifyColor(node.value, options);
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
return parsed.toString();
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
function addPluginDefaults(options, browsers) {
|
|
68
|
+
const defaults = {
|
|
69
|
+
// Does the browser support 4 & 8 character hex notation
|
|
70
|
+
transparent:
|
|
71
|
+
browsers.some((b) => browsersWithTransparentBug.has(b)) === false,
|
|
72
|
+
// Does the browser support "transparent" value properly
|
|
73
|
+
alphaHex: isSupported('css-rrggbbaa', browsers),
|
|
74
|
+
name: true,
|
|
75
|
+
};
|
|
76
|
+
return { ...defaults, ...options };
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
function pluginCreator(config = {}) {
|
|
80
|
+
return {
|
|
81
|
+
postcssPlugin: 'postcss-colormin',
|
|
82
|
+
|
|
83
|
+
prepare(result) {
|
|
84
|
+
const resultOptions = result.opts || {};
|
|
85
|
+
const browsers = browserslist(null, {
|
|
86
|
+
stats: resultOptions.stats,
|
|
87
|
+
path: __dirname,
|
|
88
|
+
env: resultOptions.env,
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
const cache = new Map();
|
|
92
|
+
const options = addPluginDefaults(config, browsers);
|
|
93
|
+
|
|
94
|
+
return {
|
|
95
|
+
OnceExit(css) {
|
|
96
|
+
css.walkDecls((decl) => {
|
|
97
|
+
if (
|
|
98
|
+
/^(composes|font|filter|-webkit-tap-highlight-color)/i.test(
|
|
99
|
+
decl.prop
|
|
100
|
+
)
|
|
101
|
+
) {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
const value = decl.value;
|
|
106
|
+
|
|
107
|
+
if (!value) {
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const cacheKey = JSON.stringify({ value, options, browsers });
|
|
112
|
+
|
|
113
|
+
if (cache.has(cacheKey)) {
|
|
114
|
+
decl.value = cache.get(cacheKey);
|
|
115
|
+
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
const newValue = transform(value, options);
|
|
120
|
+
|
|
121
|
+
decl.value = newValue;
|
|
122
|
+
cache.set(cacheKey, newValue);
|
|
123
|
+
});
|
|
124
|
+
},
|
|
125
|
+
};
|
|
126
|
+
},
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
pluginCreator.postcss = true;
|
|
131
|
+
module.exports = pluginCreator;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
const { colord, extend } = require('colord');
|
|
3
|
+
const namesPlugin = require('colord/plugins/names');
|
|
4
|
+
const minifierPlugin = require('colord/plugins/minify');
|
|
5
|
+
|
|
6
|
+
extend([namesPlugin, minifierPlugin]);
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Performs color value minification
|
|
10
|
+
*
|
|
11
|
+
* @param {string} input - CSS value
|
|
12
|
+
* @param {boolean} options - object with colord.minify() options
|
|
13
|
+
*/
|
|
14
|
+
module.exports = function minifyColor(input, options = {}) {
|
|
15
|
+
const instance = colord(input);
|
|
16
|
+
|
|
17
|
+
if (instance.isValid()) {
|
|
18
|
+
// Try to shorten the string if it is a valid CSS color value
|
|
19
|
+
const minified = instance.minify(options);
|
|
20
|
+
|
|
21
|
+
// Fall back to the original input if it's smaller or has equal length
|
|
22
|
+
return minified.length < input.length ? minified : input.toLowerCase();
|
|
23
|
+
} else {
|
|
24
|
+
// Possibly malformed, so pass through
|
|
25
|
+
return input;
|
|
26
|
+
}
|
|
27
|
+
};
|
package/dist/index.js
DELETED
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _browserslist = _interopRequireDefault(require("browserslist"));
|
|
9
|
-
|
|
10
|
-
var _caniuseApi = require("caniuse-api");
|
|
11
|
-
|
|
12
|
-
var _postcssValueParser = _interopRequireWildcard(require("postcss-value-parser"));
|
|
13
|
-
|
|
14
|
-
var _minifyColor = _interopRequireDefault(require("./minifyColor"));
|
|
15
|
-
|
|
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); }
|
|
17
|
-
|
|
18
|
-
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; }
|
|
19
|
-
|
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
|
-
function walk(parent, callback) {
|
|
23
|
-
parent.nodes.forEach((node, index) => {
|
|
24
|
-
const bubble = callback(node, index, parent);
|
|
25
|
-
|
|
26
|
-
if (node.nodes && bubble !== false) {
|
|
27
|
-
walk(node, callback);
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
/*
|
|
32
|
-
* IE 8 & 9 do not properly handle clicks on elements
|
|
33
|
-
* with a `transparent` `background-color`.
|
|
34
|
-
*
|
|
35
|
-
* https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
function hasTransparentBug(browser) {
|
|
40
|
-
return ~['ie 8', 'ie 9'].indexOf(browser);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
function isMathFunctionNode(node) {
|
|
44
|
-
if (node.type !== 'function') {
|
|
45
|
-
return false;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return ['calc', 'min', 'max', 'clamp'].includes(node.value.toLowerCase());
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function transform(value, options) {
|
|
52
|
-
const parsed = (0, _postcssValueParser.default)(value);
|
|
53
|
-
walk(parsed, (node, index, parent) => {
|
|
54
|
-
if (node.type === 'function') {
|
|
55
|
-
if (/^(rgb|hsl)a?$/i.test(node.value)) {
|
|
56
|
-
const {
|
|
57
|
-
value: originalValue
|
|
58
|
-
} = node;
|
|
59
|
-
node.value = (0, _minifyColor.default)((0, _postcssValueParser.stringify)(node), options);
|
|
60
|
-
node.type = 'word';
|
|
61
|
-
const next = parent.nodes[index + 1];
|
|
62
|
-
|
|
63
|
-
if (node.value !== originalValue && next && (next.type === 'word' || next.type === 'function')) {
|
|
64
|
-
parent.nodes.splice(index + 1, 0, {
|
|
65
|
-
type: 'space',
|
|
66
|
-
value: ' '
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
} else if (isMathFunctionNode(node)) {
|
|
70
|
-
return false;
|
|
71
|
-
}
|
|
72
|
-
} else if (node.type === 'word') {
|
|
73
|
-
node.value = (0, _minifyColor.default)(node.value, options);
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
return parsed.toString();
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
function pluginCreator() {
|
|
80
|
-
return {
|
|
81
|
-
postcssPlugin: 'postcss-colormin',
|
|
82
|
-
|
|
83
|
-
prepare(result) {
|
|
84
|
-
const resultOpts = result.opts || {};
|
|
85
|
-
const browsers = (0, _browserslist.default)(null, {
|
|
86
|
-
stats: resultOpts.stats,
|
|
87
|
-
path: __dirname,
|
|
88
|
-
env: resultOpts.env
|
|
89
|
-
});
|
|
90
|
-
const options = {
|
|
91
|
-
supportsTransparent: browsers.some(hasTransparentBug) === false,
|
|
92
|
-
supportsAlphaHex: (0, _caniuseApi.isSupported)('css-rrggbbaa', browsers)
|
|
93
|
-
};
|
|
94
|
-
const cache = {};
|
|
95
|
-
return {
|
|
96
|
-
OnceExit(css) {
|
|
97
|
-
css.walkDecls(decl => {
|
|
98
|
-
if (/^(composes|font|filter|-webkit-tap-highlight-color)/i.test(decl.prop)) {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
const value = decl.value;
|
|
103
|
-
|
|
104
|
-
if (!value) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const cacheKey = JSON.stringify({
|
|
109
|
-
value,
|
|
110
|
-
options,
|
|
111
|
-
browsers
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
if (cache[cacheKey]) {
|
|
115
|
-
decl.value = cache[cacheKey];
|
|
116
|
-
return;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
const newValue = transform(value, options);
|
|
120
|
-
decl.value = newValue;
|
|
121
|
-
cache[cacheKey] = newValue;
|
|
122
|
-
});
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
pluginCreator.postcss = true;
|
|
132
|
-
var _default = pluginCreator;
|
|
133
|
-
exports.default = _default;
|
|
134
|
-
module.exports = exports.default;
|
package/dist/minifyColor.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = minifyColor;
|
|
7
|
-
|
|
8
|
-
var _colord = require("colord");
|
|
9
|
-
|
|
10
|
-
var _names = _interopRequireDefault(require("colord/plugins/names"));
|
|
11
|
-
|
|
12
|
-
var _minify = _interopRequireDefault(require("colord/plugins/minify"));
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
(0, _colord.extend)([_names.default, _minify.default]);
|
|
17
|
-
/**
|
|
18
|
-
* Performs color value minification
|
|
19
|
-
*
|
|
20
|
-
* @param {string} input - CSS value
|
|
21
|
-
* @param {boolean} options.supportsAlphaHex - Does the browser support 4 & 8 character hex notation
|
|
22
|
-
* @param {boolean} options.supportsTransparent – Does the browser support "transparent" value properly
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
function minifyColor(input, options = {}) {
|
|
26
|
-
const settings = {
|
|
27
|
-
supportsAlphaHex: false,
|
|
28
|
-
supportsTransparent: true,
|
|
29
|
-
...options
|
|
30
|
-
};
|
|
31
|
-
const instance = (0, _colord.colord)(input);
|
|
32
|
-
|
|
33
|
-
if (instance.isValid()) {
|
|
34
|
-
// Try to shorten the string if it is a valid CSS color value
|
|
35
|
-
const minified = instance.minify({
|
|
36
|
-
alphaHex: settings.supportsAlphaHex,
|
|
37
|
-
transparent: settings.supportsTransparent,
|
|
38
|
-
name: true
|
|
39
|
-
}); // Fall back to the original input if it's smaller or has equal length
|
|
40
|
-
|
|
41
|
-
return minified.length < input.length ? minified : input.toLowerCase();
|
|
42
|
-
} else {
|
|
43
|
-
// Possibly malformed, so pass through
|
|
44
|
-
return input;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
module.exports = exports.default;
|