1 | 'use strict';
|
---|
2 |
|
---|
3 | function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
---|
4 |
|
---|
5 | var valueParser = _interopDefault(require('postcss-values-parser'));
|
---|
6 | var fs = _interopDefault(require('fs'));
|
---|
7 | var path = _interopDefault(require('path'));
|
---|
8 | var postcss = _interopDefault(require('postcss'));
|
---|
9 | var convertColors = require('@csstools/convert-colors');
|
---|
10 |
|
---|
11 | function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
---|
12 | try {
|
---|
13 | var info = gen[key](arg);
|
---|
14 | var value = info.value;
|
---|
15 | } catch (error) {
|
---|
16 | reject(error);
|
---|
17 | return;
|
---|
18 | }
|
---|
19 |
|
---|
20 | if (info.done) {
|
---|
21 | resolve(value);
|
---|
22 | } else {
|
---|
23 | Promise.resolve(value).then(_next, _throw);
|
---|
24 | }
|
---|
25 | }
|
---|
26 |
|
---|
27 | function _asyncToGenerator(fn) {
|
---|
28 | return function () {
|
---|
29 | var self = this,
|
---|
30 | args = arguments;
|
---|
31 | return new Promise(function (resolve, reject) {
|
---|
32 | var gen = fn.apply(self, args);
|
---|
33 |
|
---|
34 | function _next(value) {
|
---|
35 | asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
---|
36 | }
|
---|
37 |
|
---|
38 | function _throw(err) {
|
---|
39 | asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
---|
40 | }
|
---|
41 |
|
---|
42 | _next(undefined);
|
---|
43 | });
|
---|
44 | };
|
---|
45 | }
|
---|
46 |
|
---|
47 | function _defineProperty(obj, key, value) {
|
---|
48 | if (key in obj) {
|
---|
49 | Object.defineProperty(obj, key, {
|
---|
50 | value: value,
|
---|
51 | enumerable: true,
|
---|
52 | configurable: true,
|
---|
53 | writable: true
|
---|
54 | });
|
---|
55 | } else {
|
---|
56 | obj[key] = value;
|
---|
57 | }
|
---|
58 |
|
---|
59 | return obj;
|
---|
60 | }
|
---|
61 |
|
---|
62 | function _objectSpread(target) {
|
---|
63 | for (var i = 1; i < arguments.length; i++) {
|
---|
64 | var source = arguments[i] != null ? arguments[i] : {};
|
---|
65 | var ownKeys = Object.keys(source);
|
---|
66 |
|
---|
67 | if (typeof Object.getOwnPropertySymbols === 'function') {
|
---|
68 | ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
|
---|
69 | return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
---|
70 | }));
|
---|
71 | }
|
---|
72 |
|
---|
73 | ownKeys.forEach(function (key) {
|
---|
74 | _defineProperty(target, key, source[key]);
|
---|
75 | });
|
---|
76 | }
|
---|
77 |
|
---|
78 | return target;
|
---|
79 | }
|
---|
80 |
|
---|
81 | function _slicedToArray(arr, i) {
|
---|
82 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
|
---|
83 | }
|
---|
84 |
|
---|
85 | function _toArray(arr) {
|
---|
86 | return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
|
---|
87 | }
|
---|
88 |
|
---|
89 | function _arrayWithHoles(arr) {
|
---|
90 | if (Array.isArray(arr)) return arr;
|
---|
91 | }
|
---|
92 |
|
---|
93 | function _iterableToArray(iter) {
|
---|
94 | if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
---|
95 | }
|
---|
96 |
|
---|
97 | function _iterableToArrayLimit(arr, i) {
|
---|
98 | var _arr = [];
|
---|
99 | var _n = true;
|
---|
100 | var _d = false;
|
---|
101 | var _e = undefined;
|
---|
102 |
|
---|
103 | try {
|
---|
104 | for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
---|
105 | _arr.push(_s.value);
|
---|
106 |
|
---|
107 | if (i && _arr.length === i) break;
|
---|
108 | }
|
---|
109 | } catch (err) {
|
---|
110 | _d = true;
|
---|
111 | _e = err;
|
---|
112 | } finally {
|
---|
113 | try {
|
---|
114 | if (!_n && _i["return"] != null) _i["return"]();
|
---|
115 | } finally {
|
---|
116 | if (_d) throw _e;
|
---|
117 | }
|
---|
118 | }
|
---|
119 |
|
---|
120 | return _arr;
|
---|
121 | }
|
---|
122 |
|
---|
123 | function _nonIterableRest() {
|
---|
124 | throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
---|
125 | }
|
---|
126 |
|
---|
127 | function getCustomProperties(root, opts) {
|
---|
128 | // initialize custom selectors
|
---|
129 | const customPropertiesFromHtmlElement = {};
|
---|
130 | const customPropertiesFromRootPsuedo = {}; // for each html or :root rule
|
---|
131 |
|
---|
132 | root.nodes.slice().forEach(rule => {
|
---|
133 | const customPropertiesObject = isHtmlRule(rule) ? customPropertiesFromHtmlElement : isRootRule(rule) ? customPropertiesFromRootPsuedo : null; // for each custom property
|
---|
134 |
|
---|
135 | if (customPropertiesObject) {
|
---|
136 | rule.nodes.slice().forEach(decl => {
|
---|
137 | if (isCustomDecl(decl)) {
|
---|
138 | const prop = decl.prop; // write the parsed value to the custom property
|
---|
139 |
|
---|
140 | customPropertiesObject[prop] = valueParser(decl.value).parse(); // conditionally remove the custom property declaration
|
---|
141 |
|
---|
142 | if (!opts.preserve) {
|
---|
143 | decl.remove();
|
---|
144 | }
|
---|
145 | }
|
---|
146 | }); // conditionally remove the empty html or :root rule
|
---|
147 |
|
---|
148 | if (!opts.preserve && isEmptyParent(rule)) {
|
---|
149 | rule.remove();
|
---|
150 | }
|
---|
151 | }
|
---|
152 | }); // return all custom properties, preferring :root properties over html properties
|
---|
153 |
|
---|
154 | return _objectSpread({}, customPropertiesFromHtmlElement, customPropertiesFromRootPsuedo);
|
---|
155 | } // match html and :root rules
|
---|
156 |
|
---|
157 | const htmlSelectorRegExp = /^html$/i;
|
---|
158 | const rootSelectorRegExp = /^:root$/i;
|
---|
159 | const customPropertyRegExp = /^--[A-z][\w-]*$/; // whether the node is an html or :root rule
|
---|
160 |
|
---|
161 | const isHtmlRule = node => node.type === 'rule' && htmlSelectorRegExp.test(node.selector) && Object(node.nodes).length;
|
---|
162 |
|
---|
163 | const isRootRule = node => node.type === 'rule' && rootSelectorRegExp.test(node.selector) && Object(node.nodes).length; // whether the node is an custom property
|
---|
164 |
|
---|
165 |
|
---|
166 | const isCustomDecl = node => node.type === 'decl' && customPropertyRegExp.test(node.prop); // whether the node is a parent without children
|
---|
167 |
|
---|
168 |
|
---|
169 | const isEmptyParent = node => Object(node.nodes).length === 0;
|
---|
170 |
|
---|
171 | /* Import Custom Properties from CSS AST
|
---|
172 | /* ========================================================================== */
|
---|
173 |
|
---|
174 | function importCustomPropertiesFromCSSAST(root) {
|
---|
175 | return getCustomProperties(root, {
|
---|
176 | preserve: true
|
---|
177 | });
|
---|
178 | }
|
---|
179 | /* Import Custom Properties from CSS File
|
---|
180 | /* ========================================================================== */
|
---|
181 |
|
---|
182 |
|
---|
183 | function importCustomPropertiesFromCSSFile(_x) {
|
---|
184 | return _importCustomPropertiesFromCSSFile.apply(this, arguments);
|
---|
185 | }
|
---|
186 | /* Import Custom Properties from Object
|
---|
187 | /* ========================================================================== */
|
---|
188 |
|
---|
189 |
|
---|
190 | function _importCustomPropertiesFromCSSFile() {
|
---|
191 | _importCustomPropertiesFromCSSFile = _asyncToGenerator(function* (from) {
|
---|
192 | const css = yield readFile(from);
|
---|
193 | const root = postcss.parse(css, {
|
---|
194 | from
|
---|
195 | });
|
---|
196 | return importCustomPropertiesFromCSSAST(root);
|
---|
197 | });
|
---|
198 | return _importCustomPropertiesFromCSSFile.apply(this, arguments);
|
---|
199 | }
|
---|
200 |
|
---|
201 | function importCustomPropertiesFromObject(object) {
|
---|
202 | const customProperties = Object.assign({}, Object(object).customProperties || Object(object)['custom-properties']);
|
---|
203 |
|
---|
204 | for (const prop in customProperties) {
|
---|
205 | customProperties[prop] = valueParser(customProperties[prop]).parse();
|
---|
206 | }
|
---|
207 |
|
---|
208 | return customProperties;
|
---|
209 | }
|
---|
210 | /* Import Custom Properties from JSON file
|
---|
211 | /* ========================================================================== */
|
---|
212 |
|
---|
213 |
|
---|
214 | function importCustomPropertiesFromJSONFile(_x2) {
|
---|
215 | return _importCustomPropertiesFromJSONFile.apply(this, arguments);
|
---|
216 | }
|
---|
217 | /* Import Custom Properties from JS file
|
---|
218 | /* ========================================================================== */
|
---|
219 |
|
---|
220 |
|
---|
221 | function _importCustomPropertiesFromJSONFile() {
|
---|
222 | _importCustomPropertiesFromJSONFile = _asyncToGenerator(function* (from) {
|
---|
223 | const object = yield readJSON(from);
|
---|
224 | return importCustomPropertiesFromObject(object);
|
---|
225 | });
|
---|
226 | return _importCustomPropertiesFromJSONFile.apply(this, arguments);
|
---|
227 | }
|
---|
228 |
|
---|
229 | function importCustomPropertiesFromJSFile(_x3) {
|
---|
230 | return _importCustomPropertiesFromJSFile.apply(this, arguments);
|
---|
231 | }
|
---|
232 | /* Import Custom Properties from Sources
|
---|
233 | /* ========================================================================== */
|
---|
234 |
|
---|
235 |
|
---|
236 | function _importCustomPropertiesFromJSFile() {
|
---|
237 | _importCustomPropertiesFromJSFile = _asyncToGenerator(function* (from) {
|
---|
238 | const object = yield Promise.resolve(require(from));
|
---|
239 | return importCustomPropertiesFromObject(object);
|
---|
240 | });
|
---|
241 | return _importCustomPropertiesFromJSFile.apply(this, arguments);
|
---|
242 | }
|
---|
243 |
|
---|
244 | function importCustomPropertiesFromSources(sources) {
|
---|
245 | return sources.map(source => {
|
---|
246 | if (source instanceof Promise) {
|
---|
247 | return source;
|
---|
248 | } else if (source instanceof Function) {
|
---|
249 | return source();
|
---|
250 | } // read the source as an object
|
---|
251 |
|
---|
252 |
|
---|
253 | const opts = source === Object(source) ? source : {
|
---|
254 | from: String(source)
|
---|
255 | }; // skip objects with Custom Properties
|
---|
256 |
|
---|
257 | if (opts.customProperties || opts['custom-properties']) {
|
---|
258 | return opts;
|
---|
259 | } // source pathname
|
---|
260 |
|
---|
261 |
|
---|
262 | const from = path.resolve(String(opts.from || '')); // type of file being read from
|
---|
263 |
|
---|
264 | const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
|
---|
265 | return {
|
---|
266 | type,
|
---|
267 | from
|
---|
268 | };
|
---|
269 | }).reduce(
|
---|
270 | /*#__PURE__*/
|
---|
271 | function () {
|
---|
272 | var _ref = _asyncToGenerator(function* (customProperties, source) {
|
---|
273 | const _ref2 = yield source,
|
---|
274 | type = _ref2.type,
|
---|
275 | from = _ref2.from;
|
---|
276 |
|
---|
277 | if (type === 'ast') {
|
---|
278 | return Object.assign((yield customProperties), importCustomPropertiesFromCSSAST(from));
|
---|
279 | }
|
---|
280 |
|
---|
281 | if (type === 'css') {
|
---|
282 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromCSSFile(from)));
|
---|
283 | }
|
---|
284 |
|
---|
285 | if (type === 'js') {
|
---|
286 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromJSFile(from)));
|
---|
287 | }
|
---|
288 |
|
---|
289 | if (type === 'json') {
|
---|
290 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromJSONFile(from)));
|
---|
291 | }
|
---|
292 |
|
---|
293 | return Object.assign((yield customProperties), (yield importCustomPropertiesFromObject((yield source))));
|
---|
294 | });
|
---|
295 |
|
---|
296 | return function (_x4, _x5) {
|
---|
297 | return _ref.apply(this, arguments);
|
---|
298 | };
|
---|
299 | }(), {});
|
---|
300 | }
|
---|
301 | /* Helper utilities
|
---|
302 | /* ========================================================================== */
|
---|
303 |
|
---|
304 | const readFile = from => new Promise((resolve, reject) => {
|
---|
305 | fs.readFile(from, 'utf8', (error, result) => {
|
---|
306 | if (error) {
|
---|
307 | reject(error);
|
---|
308 | } else {
|
---|
309 | resolve(result);
|
---|
310 | }
|
---|
311 | });
|
---|
312 | });
|
---|
313 |
|
---|
314 | const readJSON =
|
---|
315 | /*#__PURE__*/
|
---|
316 | function () {
|
---|
317 | var _ref3 = _asyncToGenerator(function* (from) {
|
---|
318 | return JSON.parse((yield readFile(from)));
|
---|
319 | });
|
---|
320 |
|
---|
321 | return function readJSON(_x6) {
|
---|
322 | return _ref3.apply(this, arguments);
|
---|
323 | };
|
---|
324 | }();
|
---|
325 |
|
---|
326 | /* Convert Degree to Hue Degree
|
---|
327 | /* ========================================================================== */
|
---|
328 | function convertDtoD(deg) {
|
---|
329 | return deg % 360;
|
---|
330 | }
|
---|
331 | /* Convert Gradian to Hue Degree
|
---|
332 | /* ========================================================================== */
|
---|
333 |
|
---|
334 | function convertGtoD(grad) {
|
---|
335 | return grad * 0.9 % 360;
|
---|
336 | }
|
---|
337 | /* Convert Radian to Hue Degree
|
---|
338 | /* ========================================================================== */
|
---|
339 |
|
---|
340 | function convertRtoD(rad) {
|
---|
341 | return rad * 180 / Math.PI % 360;
|
---|
342 | }
|
---|
343 | /* Convert Turn to Hue Degree
|
---|
344 | /* ========================================================================== */
|
---|
345 |
|
---|
346 | function convertTtoD(turn) {
|
---|
347 | return turn * 360 % 360;
|
---|
348 | }
|
---|
349 | /* Convert a Name to Red/Green/Blue
|
---|
350 | /* ========================================================================== */
|
---|
351 |
|
---|
352 | function convertNtoRGB(name) {
|
---|
353 | const names = {
|
---|
354 | aliceblue: [240, 248, 255],
|
---|
355 | antiquewhite: [250, 235, 215],
|
---|
356 | aqua: [0, 255, 255],
|
---|
357 | aquamarine: [127, 255, 212],
|
---|
358 | azure: [240, 255, 255],
|
---|
359 | beige: [245, 245, 220],
|
---|
360 | bisque: [255, 228, 196],
|
---|
361 | black: [0, 0, 0],
|
---|
362 | blanchedalmond: [255, 235, 205],
|
---|
363 | blue: [0, 0, 255],
|
---|
364 | blueviolet: [138, 43, 226],
|
---|
365 | brown: [165, 42, 42],
|
---|
366 | burlywood: [222, 184, 135],
|
---|
367 | cadetblue: [95, 158, 160],
|
---|
368 | chartreuse: [127, 255, 0],
|
---|
369 | chocolate: [210, 105, 30],
|
---|
370 | coral: [255, 127, 80],
|
---|
371 | cornflowerblue: [100, 149, 237],
|
---|
372 | cornsilk: [255, 248, 220],
|
---|
373 | crimson: [220, 20, 60],
|
---|
374 | cyan: [0, 255, 255],
|
---|
375 | darkblue: [0, 0, 139],
|
---|
376 | darkcyan: [0, 139, 139],
|
---|
377 | darkgoldenrod: [184, 134, 11],
|
---|
378 | darkgray: [169, 169, 169],
|
---|
379 | darkgreen: [0, 100, 0],
|
---|
380 | darkgrey: [169, 169, 169],
|
---|
381 | darkkhaki: [189, 183, 107],
|
---|
382 | darkmagenta: [139, 0, 139],
|
---|
383 | darkolivegreen: [85, 107, 47],
|
---|
384 | darkorange: [255, 140, 0],
|
---|
385 | darkorchid: [153, 50, 204],
|
---|
386 | darkred: [139, 0, 0],
|
---|
387 | darksalmon: [233, 150, 122],
|
---|
388 | darkseagreen: [143, 188, 143],
|
---|
389 | darkslateblue: [72, 61, 139],
|
---|
390 | darkslategray: [47, 79, 79],
|
---|
391 | darkslategrey: [47, 79, 79],
|
---|
392 | darkturquoise: [0, 206, 209],
|
---|
393 | darkviolet: [148, 0, 211],
|
---|
394 | deeppink: [255, 20, 147],
|
---|
395 | deepskyblue: [0, 191, 255],
|
---|
396 | dimgray: [105, 105, 105],
|
---|
397 | dimgrey: [105, 105, 105],
|
---|
398 | dodgerblue: [30, 144, 255],
|
---|
399 | firebrick: [178, 34, 34],
|
---|
400 | floralwhite: [255, 250, 240],
|
---|
401 | forestgreen: [34, 139, 34],
|
---|
402 | fuchsia: [255, 0, 255],
|
---|
403 | gainsboro: [220, 220, 220],
|
---|
404 | ghostwhite: [248, 248, 255],
|
---|
405 | gold: [255, 215, 0],
|
---|
406 | goldenrod: [218, 165, 32],
|
---|
407 | gray: [128, 128, 128],
|
---|
408 | green: [0, 128, 0],
|
---|
409 | greenyellow: [173, 255, 47],
|
---|
410 | grey: [128, 128, 128],
|
---|
411 | honeydew: [240, 255, 240],
|
---|
412 | hotpink: [255, 105, 180],
|
---|
413 | indianred: [205, 92, 92],
|
---|
414 | indigo: [75, 0, 130],
|
---|
415 | ivory: [255, 255, 240],
|
---|
416 | khaki: [240, 230, 140],
|
---|
417 | lavender: [230, 230, 250],
|
---|
418 | lavenderblush: [255, 240, 245],
|
---|
419 | lawngreen: [124, 252, 0],
|
---|
420 | lemonchiffon: [255, 250, 205],
|
---|
421 | lightblue: [173, 216, 230],
|
---|
422 | lightcoral: [240, 128, 128],
|
---|
423 | lightcyan: [224, 255, 255],
|
---|
424 | lightgoldenrodyellow: [250, 250, 210],
|
---|
425 | lightgray: [211, 211, 211],
|
---|
426 | lightgreen: [144, 238, 144],
|
---|
427 | lightgrey: [211, 211, 211],
|
---|
428 | lightpink: [255, 182, 193],
|
---|
429 | lightsalmon: [255, 160, 122],
|
---|
430 | lightseagreen: [32, 178, 170],
|
---|
431 | lightskyblue: [135, 206, 250],
|
---|
432 | lightslategray: [119, 136, 153],
|
---|
433 | lightslategrey: [119, 136, 153],
|
---|
434 | lightsteelblue: [176, 196, 222],
|
---|
435 | lightyellow: [255, 255, 224],
|
---|
436 | lime: [0, 255, 0],
|
---|
437 | limegreen: [50, 205, 50],
|
---|
438 | linen: [250, 240, 230],
|
---|
439 | magenta: [255, 0, 255],
|
---|
440 | maroon: [128, 0, 0],
|
---|
441 | mediumaquamarine: [102, 205, 170],
|
---|
442 | mediumblue: [0, 0, 205],
|
---|
443 | mediumorchid: [186, 85, 211],
|
---|
444 | mediumpurple: [147, 112, 219],
|
---|
445 | mediumseagreen: [60, 179, 113],
|
---|
446 | mediumslateblue: [123, 104, 238],
|
---|
447 | mediumspringgreen: [0, 250, 154],
|
---|
448 | mediumturquoise: [72, 209, 204],
|
---|
449 | mediumvioletred: [199, 21, 133],
|
---|
450 | midnightblue: [25, 25, 112],
|
---|
451 | mintcream: [245, 255, 250],
|
---|
452 | mistyrose: [255, 228, 225],
|
---|
453 | moccasin: [255, 228, 181],
|
---|
454 | navajowhite: [255, 222, 173],
|
---|
455 | navy: [0, 0, 128],
|
---|
456 | oldlace: [253, 245, 230],
|
---|
457 | olive: [128, 128, 0],
|
---|
458 | olivedrab: [107, 142, 35],
|
---|
459 | orange: [255, 165, 0],
|
---|
460 | orangered: [255, 69, 0],
|
---|
461 | orchid: [218, 112, 214],
|
---|
462 | palegoldenrod: [238, 232, 170],
|
---|
463 | palegreen: [152, 251, 152],
|
---|
464 | paleturquoise: [175, 238, 238],
|
---|
465 | palevioletred: [219, 112, 147],
|
---|
466 | papayawhip: [255, 239, 213],
|
---|
467 | peachpuff: [255, 218, 185],
|
---|
468 | peru: [205, 133, 63],
|
---|
469 | pink: [255, 192, 203],
|
---|
470 | plum: [221, 160, 221],
|
---|
471 | powderblue: [176, 224, 230],
|
---|
472 | purple: [128, 0, 128],
|
---|
473 | rebeccapurple: [102, 51, 153],
|
---|
474 | red: [255, 0, 0],
|
---|
475 | rosybrown: [188, 143, 143],
|
---|
476 | royalblue: [65, 105, 225],
|
---|
477 | saddlebrown: [139, 69, 19],
|
---|
478 | salmon: [250, 128, 114],
|
---|
479 | sandybrown: [244, 164, 96],
|
---|
480 | seagreen: [46, 139, 87],
|
---|
481 | seashell: [255, 245, 238],
|
---|
482 | sienna: [160, 82, 45],
|
---|
483 | silver: [192, 192, 192],
|
---|
484 | skyblue: [135, 206, 235],
|
---|
485 | slateblue: [106, 90, 205],
|
---|
486 | slategray: [112, 128, 144],
|
---|
487 | slategrey: [112, 128, 144],
|
---|
488 | snow: [255, 250, 250],
|
---|
489 | springgreen: [0, 255, 127],
|
---|
490 | steelblue: [70, 130, 180],
|
---|
491 | tan: [210, 180, 140],
|
---|
492 | teal: [0, 128, 128],
|
---|
493 | thistle: [216, 191, 216],
|
---|
494 | tomato: [255, 99, 71],
|
---|
495 | transparent: [0, 0, 0],
|
---|
496 | turquoise: [64, 224, 208],
|
---|
497 | violet: [238, 130, 238],
|
---|
498 | wheat: [245, 222, 179],
|
---|
499 | white: [255, 255, 255],
|
---|
500 | whitesmoke: [245, 245, 245],
|
---|
501 | yellow: [255, 255, 0],
|
---|
502 | yellowgreen: [154, 205, 50]
|
---|
503 | };
|
---|
504 | return names[name] && names[name].map(c => c / 2.55);
|
---|
505 | }
|
---|
506 | /* Convert a Hex to Red/Green/Blue
|
---|
507 | /* ========================================================================== */
|
---|
508 |
|
---|
509 | function convertHtoRGB(hex) {
|
---|
510 | // #<hex-color>{3,4,6,8}
|
---|
511 | const _slice = (hex.match(hexColorMatch) || []).slice(1),
|
---|
512 | _slice2 = _slicedToArray(_slice, 8),
|
---|
513 | r = _slice2[0],
|
---|
514 | g = _slice2[1],
|
---|
515 | b = _slice2[2],
|
---|
516 | a = _slice2[3],
|
---|
517 | rr = _slice2[4],
|
---|
518 | gg = _slice2[5],
|
---|
519 | bb = _slice2[6],
|
---|
520 | aa = _slice2[7];
|
---|
521 |
|
---|
522 | if (rr !== undefined || r !== undefined) {
|
---|
523 | const red = rr !== undefined ? parseInt(rr, 16) : r !== undefined ? parseInt(r + r, 16) : 0;
|
---|
524 | const green = gg !== undefined ? parseInt(gg, 16) : g !== undefined ? parseInt(g + g, 16) : 0;
|
---|
525 | const blue = bb !== undefined ? parseInt(bb, 16) : b !== undefined ? parseInt(b + b, 16) : 0;
|
---|
526 | const alpha = aa !== undefined ? parseInt(aa, 16) : a !== undefined ? parseInt(a + a, 16) : 255;
|
---|
527 | return [red, green, blue, alpha].map(c => c / 2.55);
|
---|
528 | }
|
---|
529 |
|
---|
530 | return undefined;
|
---|
531 | }
|
---|
532 | const hexColorMatch = /^#(?:([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?)$/i;
|
---|
533 |
|
---|
534 | class Color {
|
---|
535 | constructor(color) {
|
---|
536 | this.color = Object(Object(color).color || color);
|
---|
537 | this.color.colorspace = this.color.colorspace ? this.color.colorspace : 'red' in color && 'green' in color && 'blue' in color ? 'rgb' : 'hue' in color && 'saturation' in color && 'lightness' in color ? 'hsl' : 'hue' in color && 'whiteness' in color && 'blackness' in color ? 'hwb' : 'unknown';
|
---|
538 |
|
---|
539 | if (color.colorspace === 'rgb') {
|
---|
540 | this.color.hue = convertColors.rgb2hue(color.red, color.green, color.blue, color.hue || 0);
|
---|
541 | }
|
---|
542 | }
|
---|
543 |
|
---|
544 | alpha(alpha) {
|
---|
545 | const color = this.color;
|
---|
546 | return alpha === undefined ? color.alpha : new Color(assign(color, {
|
---|
547 | alpha
|
---|
548 | }));
|
---|
549 | }
|
---|
550 |
|
---|
551 | blackness(blackness) {
|
---|
552 | const hwb = color2hwb(this.color);
|
---|
553 | return blackness === undefined ? hwb.blackness : new Color(assign(hwb, {
|
---|
554 | blackness
|
---|
555 | }));
|
---|
556 | }
|
---|
557 |
|
---|
558 | blend(color, percentage, colorspace = 'rgb') {
|
---|
559 | const base = this.color;
|
---|
560 | return new Color(blend(base, color, percentage, colorspace));
|
---|
561 | }
|
---|
562 |
|
---|
563 | blenda(color, percentage, colorspace = 'rgb') {
|
---|
564 | const base = this.color;
|
---|
565 | return new Color(blend(base, color, percentage, colorspace, true));
|
---|
566 | }
|
---|
567 |
|
---|
568 | blue(blue) {
|
---|
569 | const rgb = color2rgb(this.color);
|
---|
570 | return blue === undefined ? rgb.blue : new Color(assign(rgb, {
|
---|
571 | blue
|
---|
572 | }));
|
---|
573 | }
|
---|
574 |
|
---|
575 | contrast(percentage) {
|
---|
576 | const base = this.color;
|
---|
577 | return new Color(contrast(base, percentage));
|
---|
578 | }
|
---|
579 |
|
---|
580 | green(green) {
|
---|
581 | const rgb = color2rgb(this.color);
|
---|
582 | return green === undefined ? rgb.green : new Color(assign(rgb, {
|
---|
583 | green
|
---|
584 | }));
|
---|
585 | }
|
---|
586 |
|
---|
587 | hue(hue) {
|
---|
588 | const hsl = color2hsl(this.color);
|
---|
589 | return hue === undefined ? hsl.hue : new Color(assign(hsl, {
|
---|
590 | hue
|
---|
591 | }));
|
---|
592 | }
|
---|
593 |
|
---|
594 | lightness(lightness) {
|
---|
595 | const hsl = color2hsl(this.color);
|
---|
596 | return lightness === undefined ? hsl.lightness : new Color(assign(hsl, {
|
---|
597 | lightness
|
---|
598 | }));
|
---|
599 | }
|
---|
600 |
|
---|
601 | red(red) {
|
---|
602 | const rgb = color2rgb(this.color);
|
---|
603 | return red === undefined ? rgb.red : new Color(assign(rgb, {
|
---|
604 | red
|
---|
605 | }));
|
---|
606 | }
|
---|
607 |
|
---|
608 | rgb(red, green, blue) {
|
---|
609 | const rgb = color2rgb(this.color);
|
---|
610 | return new Color(assign(rgb, {
|
---|
611 | red,
|
---|
612 | green,
|
---|
613 | blue
|
---|
614 | }));
|
---|
615 | }
|
---|
616 |
|
---|
617 | saturation(saturation) {
|
---|
618 | const hsl = color2hsl(this.color);
|
---|
619 | return saturation === undefined ? hsl.saturation : new Color(assign(hsl, {
|
---|
620 | saturation
|
---|
621 | }));
|
---|
622 | }
|
---|
623 |
|
---|
624 | shade(percentage) {
|
---|
625 | const hwb = color2hwb(this.color);
|
---|
626 | const shade = {
|
---|
627 | hue: 0,
|
---|
628 | whiteness: 0,
|
---|
629 | blackness: 100,
|
---|
630 | colorspace: 'hwb'
|
---|
631 | };
|
---|
632 | const colorspace = 'rgb';
|
---|
633 | return percentage === undefined ? hwb.blackness : new Color(blend(hwb, shade, percentage, colorspace));
|
---|
634 | }
|
---|
635 |
|
---|
636 | tint(percentage) {
|
---|
637 | const hwb = color2hwb(this.color);
|
---|
638 | const tint = {
|
---|
639 | hue: 0,
|
---|
640 | whiteness: 100,
|
---|
641 | blackness: 0,
|
---|
642 | colorspace: 'hwb'
|
---|
643 | };
|
---|
644 | const colorspace = 'rgb';
|
---|
645 | return percentage === undefined ? hwb.blackness : new Color(blend(hwb, tint, percentage, colorspace));
|
---|
646 | }
|
---|
647 |
|
---|
648 | whiteness(whiteness) {
|
---|
649 | const hwb = color2hwb(this.color);
|
---|
650 | return whiteness === undefined ? hwb.whiteness : new Color(assign(hwb, {
|
---|
651 | whiteness
|
---|
652 | }));
|
---|
653 | }
|
---|
654 |
|
---|
655 | toHSL() {
|
---|
656 | return color2hslString(this.color);
|
---|
657 | }
|
---|
658 |
|
---|
659 | toHWB() {
|
---|
660 | return color2hwbString(this.color);
|
---|
661 | }
|
---|
662 |
|
---|
663 | toLegacy() {
|
---|
664 | return color2legacyString(this.color);
|
---|
665 | }
|
---|
666 |
|
---|
667 | toRGB() {
|
---|
668 | return color2rgbString(this.color);
|
---|
669 | }
|
---|
670 |
|
---|
671 | toRGBLegacy() {
|
---|
672 | return color2rgbLegacyString(this.color);
|
---|
673 | }
|
---|
674 |
|
---|
675 | toString() {
|
---|
676 | return color2string(this.color);
|
---|
677 | }
|
---|
678 |
|
---|
679 | }
|
---|
680 | /* Blending
|
---|
681 | /* ========================================================================== */
|
---|
682 |
|
---|
683 | function blend(base, color, percentage, colorspace, isBlendingAlpha) {
|
---|
684 | const addition = percentage / 100;
|
---|
685 | const subtraction = 1 - addition;
|
---|
686 |
|
---|
687 | if (colorspace === 'hsl') {
|
---|
688 | const _color2hsl = color2hsl(base),
|
---|
689 | h1 = _color2hsl.hue,
|
---|
690 | s1 = _color2hsl.saturation,
|
---|
691 | l1 = _color2hsl.lightness,
|
---|
692 | a1 = _color2hsl.alpha;
|
---|
693 |
|
---|
694 | const _color2hsl2 = color2hsl(color),
|
---|
695 | h2 = _color2hsl2.hue,
|
---|
696 | s2 = _color2hsl2.saturation,
|
---|
697 | l2 = _color2hsl2.lightness,
|
---|
698 | a2 = _color2hsl2.alpha;
|
---|
699 |
|
---|
700 | const hue = h1 * subtraction + h2 * addition,
|
---|
701 | saturation = s1 * subtraction + s2 * addition,
|
---|
702 | lightness = l1 * subtraction + l2 * addition,
|
---|
703 | alpha = isBlendingAlpha ? a1 * subtraction + a2 * addition : a1;
|
---|
704 | return {
|
---|
705 | hue,
|
---|
706 | saturation,
|
---|
707 | lightness,
|
---|
708 | alpha,
|
---|
709 | colorspace: 'hsl'
|
---|
710 | };
|
---|
711 | } else if (colorspace === 'hwb') {
|
---|
712 | const _color2hwb = color2hwb(base),
|
---|
713 | h1 = _color2hwb.hue,
|
---|
714 | w1 = _color2hwb.whiteness,
|
---|
715 | b1 = _color2hwb.blackness,
|
---|
716 | a1 = _color2hwb.alpha;
|
---|
717 |
|
---|
718 | const _color2hwb2 = color2hwb(color),
|
---|
719 | h2 = _color2hwb2.hue,
|
---|
720 | w2 = _color2hwb2.whiteness,
|
---|
721 | b2 = _color2hwb2.blackness,
|
---|
722 | a2 = _color2hwb2.alpha;
|
---|
723 |
|
---|
724 | const hue = h1 * subtraction + h2 * addition,
|
---|
725 | whiteness = w1 * subtraction + w2 * addition,
|
---|
726 | blackness = b1 * subtraction + b2 * addition,
|
---|
727 | alpha = isBlendingAlpha ? a1 * subtraction + a2 * addition : a1;
|
---|
728 | return {
|
---|
729 | hue,
|
---|
730 | whiteness,
|
---|
731 | blackness,
|
---|
732 | alpha,
|
---|
733 | colorspace: 'hwb'
|
---|
734 | };
|
---|
735 | } else {
|
---|
736 | const _color2rgb = color2rgb(base),
|
---|
737 | r1 = _color2rgb.red,
|
---|
738 | g1 = _color2rgb.green,
|
---|
739 | b1 = _color2rgb.blue,
|
---|
740 | a1 = _color2rgb.alpha;
|
---|
741 |
|
---|
742 | const _color2rgb2 = color2rgb(color),
|
---|
743 | r2 = _color2rgb2.red,
|
---|
744 | g2 = _color2rgb2.green,
|
---|
745 | b2 = _color2rgb2.blue,
|
---|
746 | a2 = _color2rgb2.alpha;
|
---|
747 |
|
---|
748 | const red = r1 * subtraction + r2 * addition,
|
---|
749 | green = g1 * subtraction + g2 * addition,
|
---|
750 | blue = b1 * subtraction + b2 * addition,
|
---|
751 | alpha = isBlendingAlpha ? a1 * subtraction + a2 * addition : a1;
|
---|
752 | return {
|
---|
753 | red,
|
---|
754 | green,
|
---|
755 | blue,
|
---|
756 | alpha,
|
---|
757 | colorspace: 'rgb'
|
---|
758 | };
|
---|
759 | }
|
---|
760 | }
|
---|
761 | /* Assign channels to a new instance of a base color
|
---|
762 | /* ========================================================================== */
|
---|
763 |
|
---|
764 |
|
---|
765 | function assign(base, channels) {
|
---|
766 | const color = Object.assign({}, base);
|
---|
767 | Object.keys(channels).forEach(channel => {
|
---|
768 | // detect channel
|
---|
769 | const isHue = channel === 'hue';
|
---|
770 | const isRGB = !isHue && blueGreenRedMatch.test(channel); // normalized value of the channel
|
---|
771 |
|
---|
772 | const value = normalize(channels[channel], channel); // assign channel to new object
|
---|
773 |
|
---|
774 | color[channel] = value;
|
---|
775 |
|
---|
776 | if (isRGB) {
|
---|
777 | // conditionally preserve the hue
|
---|
778 | color.hue = convertColors.rgb2hue(color.red, color.green, color.blue, base.hue || 0);
|
---|
779 | }
|
---|
780 | });
|
---|
781 | return color;
|
---|
782 | }
|
---|
783 |
|
---|
784 | function normalize(value, channel) {
|
---|
785 | // detect channel
|
---|
786 | const isHue = channel === 'hue'; // value limitations
|
---|
787 |
|
---|
788 | const min = 0;
|
---|
789 | const max = isHue ? 360 : 100;
|
---|
790 | const normalizedValue = Math.min(Math.max(isHue ? value % 360 : value, min), max);
|
---|
791 | return normalizedValue;
|
---|
792 | }
|
---|
793 | /* Convert colors
|
---|
794 | /* ========================================================================== */
|
---|
795 |
|
---|
796 |
|
---|
797 | function color2rgb(color) {
|
---|
798 | const _ref = color.colorspace === 'hsl' ? convertColors.hsl2rgb(color.hue, color.saturation, color.lightness) : color.colorspace === 'hwb' ? convertColors.hwb2rgb(color.hue, color.whiteness, color.blackness) : [color.red, color.green, color.blue],
|
---|
799 | _ref2 = _slicedToArray(_ref, 3),
|
---|
800 | red = _ref2[0],
|
---|
801 | green = _ref2[1],
|
---|
802 | blue = _ref2[2];
|
---|
803 |
|
---|
804 | return {
|
---|
805 | red,
|
---|
806 | green,
|
---|
807 | blue,
|
---|
808 | hue: color.hue,
|
---|
809 | alpha: color.alpha,
|
---|
810 | colorspace: 'rgb'
|
---|
811 | };
|
---|
812 | }
|
---|
813 |
|
---|
814 | function color2hsl(color) {
|
---|
815 | const _ref3 = color.colorspace === 'rgb' ? convertColors.rgb2hsl(color.red, color.green, color.blue, color.hue) : color.colorspace === 'hwb' ? convertColors.hwb2hsl(color.hue, color.whiteness, color.blackness) : [color.hue, color.saturation, color.lightness],
|
---|
816 | _ref4 = _slicedToArray(_ref3, 3),
|
---|
817 | hue = _ref4[0],
|
---|
818 | saturation = _ref4[1],
|
---|
819 | lightness = _ref4[2];
|
---|
820 |
|
---|
821 | return {
|
---|
822 | hue,
|
---|
823 | saturation,
|
---|
824 | lightness,
|
---|
825 | alpha: color.alpha,
|
---|
826 | colorspace: 'hsl'
|
---|
827 | };
|
---|
828 | }
|
---|
829 |
|
---|
830 | function color2hwb(color) {
|
---|
831 | const _ref5 = color.colorspace === 'rgb' ? convertColors.rgb2hwb(color.red, color.green, color.blue, color.hue) : color.colorspace === 'hsl' ? convertColors.hsl2hwb(color.hue, color.saturation, color.lightness) : [color.hue, color.whiteness, color.blackness],
|
---|
832 | _ref6 = _slicedToArray(_ref5, 3),
|
---|
833 | hue = _ref6[0],
|
---|
834 | whiteness = _ref6[1],
|
---|
835 | blackness = _ref6[2];
|
---|
836 |
|
---|
837 | return {
|
---|
838 | hue,
|
---|
839 | whiteness,
|
---|
840 | blackness,
|
---|
841 | alpha: color.alpha,
|
---|
842 | colorspace: 'hwb'
|
---|
843 | };
|
---|
844 | }
|
---|
845 | /* Contrast functions
|
---|
846 | /* ========================================================================== */
|
---|
847 |
|
---|
848 |
|
---|
849 | function contrast(color, percentage) {
|
---|
850 | // https://drafts.csswg.org/css-color/#contrast-adjuster
|
---|
851 | const hwb = color2hwb(color);
|
---|
852 | const rgb = color2rgb(color); // compute the luminance of the color.
|
---|
853 |
|
---|
854 | const luminance = rgb2luminance(rgb.red, rgb.green, rgb.blue); // the maximum-contrast color, if it is less than .5
|
---|
855 |
|
---|
856 | const maxContrastColor = luminance < 0.5 // hwb(X, 100%, 0%), where X is the hue angle of the color
|
---|
857 | ? {
|
---|
858 | hue: hwb.hue,
|
---|
859 | whiteness: 100,
|
---|
860 | blackness: 0,
|
---|
861 | alpha: hwb.alpha,
|
---|
862 | colorspace: 'hwb' // otherwise, hwb(X, 0%, 100%), where X is the hue angle of the color
|
---|
863 |
|
---|
864 | } : {
|
---|
865 | hue: hwb.hue,
|
---|
866 | whiteness: 0,
|
---|
867 | blackness: 100,
|
---|
868 | alpha: hwb.alpha,
|
---|
869 | colorspace: 'hwb'
|
---|
870 | }; // contrast ratio
|
---|
871 |
|
---|
872 | const contrastRatio = colors2contrast(color, maxContrastColor);
|
---|
873 | const minContrastColor = contrastRatio > 4.5 // the color with the smallest contrast ratio with the base color that is greater than 4.5
|
---|
874 | ? colors2contrastRatioColor(hwb, maxContrastColor) // otherwise, the maximum-contrast color
|
---|
875 | : maxContrastColor; // color(maximum-contrast blend(minimum-contrast <percentage> hwb)));
|
---|
876 |
|
---|
877 | return blend(maxContrastColor, minContrastColor, percentage, 'hwb', false);
|
---|
878 | }
|
---|
879 |
|
---|
880 | function colors2contrast(color1, color2) {
|
---|
881 | // https://drafts.csswg.org/css-color/#contrast-ratio
|
---|
882 | const rgb1 = color2rgb(color1);
|
---|
883 | const rgb2 = color2rgb(color2);
|
---|
884 | const l1 = rgb2luminance(rgb1.red, rgb1.green, rgb1.blue);
|
---|
885 | const l2 = rgb2luminance(rgb2.red, rgb2.green, rgb2.blue);
|
---|
886 | return l1 > l2 // if l1 is the relative luminance of the lighter of the colors
|
---|
887 | ? (l1 + 0.05) / (l2 + 0.05) // otherwise, if l2 is the relative luminance of the lighter of the colors
|
---|
888 | : (l2 + 0.05) / (l1 + 0.05);
|
---|
889 | }
|
---|
890 |
|
---|
891 | function rgb2luminance(red, green, blue) {
|
---|
892 | const _ref7 = [channel2luminance(red), channel2luminance(green), channel2luminance(blue)],
|
---|
893 | redLuminance = _ref7[0],
|
---|
894 | greenLuminance = _ref7[1],
|
---|
895 | blueLuminance = _ref7[2]; // https://drafts.csswg.org/css-color/#luminance
|
---|
896 |
|
---|
897 | const luminance = 0.2126 * redLuminance + 0.7152 * greenLuminance + 0.0722 * blueLuminance;
|
---|
898 | return luminance;
|
---|
899 | }
|
---|
900 |
|
---|
901 | function channel2luminance(value) {
|
---|
902 | // https://drafts.csswg.org/css-color/#luminance
|
---|
903 | const luminance = value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
|
---|
904 | return luminance;
|
---|
905 | } // return the smallest contrast ratio from a color and a maximum contrast (credit: @thetalecrafter)
|
---|
906 |
|
---|
907 |
|
---|
908 | function colors2contrastRatioColor(hwb, maxHWB) {
|
---|
909 | const modifiedHWB = Object.assign({}, hwb); // values to be used for linear interpolations in HWB space
|
---|
910 |
|
---|
911 | let minW = hwb.whiteness;
|
---|
912 | let minB = hwb.blackness;
|
---|
913 | let maxW = maxHWB.whiteness;
|
---|
914 | let maxB = maxHWB.blackness; // find the color with the smallest contrast ratio with the base color that is greater than 4.5
|
---|
915 |
|
---|
916 | while (Math.abs(minW - maxW) > 100 || Math.abs(minB - maxB) > 100) {
|
---|
917 | const midW = Math.round((maxW + minW) / 2);
|
---|
918 | const midB = Math.round((maxB + minB) / 2);
|
---|
919 | modifiedHWB.whiteness = midW;
|
---|
920 | modifiedHWB.blackness = midB;
|
---|
921 |
|
---|
922 | if (colors2contrast(modifiedHWB, hwb) > 4.5) {
|
---|
923 | maxW = midW;
|
---|
924 | maxB = midB;
|
---|
925 | } else {
|
---|
926 | minW = midW;
|
---|
927 | minB = midB;
|
---|
928 | }
|
---|
929 | }
|
---|
930 |
|
---|
931 | return modifiedHWB;
|
---|
932 | }
|
---|
933 | /* Match
|
---|
934 | /* ========================================================================== */
|
---|
935 |
|
---|
936 |
|
---|
937 | const blueGreenRedMatch = /^(blue|green|red)$/i;
|
---|
938 | /* Stringifiers
|
---|
939 | /* ========================================================================== */
|
---|
940 |
|
---|
941 | function color2string(color) {
|
---|
942 | return color.colorspace === 'hsl' ? color2hslString(color) : color.colorspace === 'hwb' ? color2hwbString(color) : color2rgbString(color);
|
---|
943 | }
|
---|
944 |
|
---|
945 | function color2hslString(color) {
|
---|
946 | const hsl = color2hsl(color);
|
---|
947 | const isOpaque = hsl.alpha === 100;
|
---|
948 | const hue = hsl.hue;
|
---|
949 | const saturation = Math.round(hsl.saturation * 10000000000) / 10000000000;
|
---|
950 | const lightness = Math.round(hsl.lightness * 10000000000) / 10000000000;
|
---|
951 | const alpha = Math.round(hsl.alpha * 10000000000) / 10000000000;
|
---|
952 | return `hsl(${hue} ${saturation}% ${lightness}%${isOpaque ? '' : ` / ${alpha}%`})`;
|
---|
953 | }
|
---|
954 |
|
---|
955 | function color2hwbString(color) {
|
---|
956 | const hwb = color2hwb(color);
|
---|
957 | const isOpaque = hwb.alpha === 100;
|
---|
958 | const hue = hwb.hue;
|
---|
959 | const whiteness = Math.round(hwb.whiteness * 10000000000) / 10000000000;
|
---|
960 | const blackness = Math.round(hwb.blackness * 10000000000) / 10000000000;
|
---|
961 | const alpha = Math.round(hwb.alpha * 10000000000) / 10000000000;
|
---|
962 | return `hwb(${hue} ${whiteness}% ${blackness}%${isOpaque ? '' : ` / ${alpha}%`})`;
|
---|
963 | }
|
---|
964 |
|
---|
965 | function color2rgbString(color) {
|
---|
966 | const rgb = color2rgb(color);
|
---|
967 | const isOpaque = rgb.alpha === 100;
|
---|
968 | const red = Math.round(rgb.red * 10000000000) / 10000000000;
|
---|
969 | const green = Math.round(rgb.green * 10000000000) / 10000000000;
|
---|
970 | const blue = Math.round(rgb.blue * 10000000000) / 10000000000;
|
---|
971 | const alpha = Math.round(rgb.alpha * 10000000000) / 10000000000;
|
---|
972 | return `rgb(${red}% ${green}% ${blue}%${isOpaque ? '' : ` / ${alpha}%`})`;
|
---|
973 | }
|
---|
974 |
|
---|
975 | function color2legacyString(color) {
|
---|
976 | return color.colorspace === 'hsl' ? color2hslLegacyString(color) : color2rgbLegacyString(color);
|
---|
977 | }
|
---|
978 |
|
---|
979 | function color2rgbLegacyString(color) {
|
---|
980 | const rgb = color2rgb(color);
|
---|
981 | const isOpaque = rgb.alpha === 100;
|
---|
982 | const name = isOpaque ? 'rgb' : 'rgba';
|
---|
983 | const red = Math.round(rgb.red * 255 / 100);
|
---|
984 | const green = Math.round(rgb.green * 255 / 100);
|
---|
985 | const blue = Math.round(rgb.blue * 255 / 100);
|
---|
986 | const alpha = Math.round(rgb.alpha / 100 * 10000000000) / 10000000000;
|
---|
987 | return `${name}(${red}, ${green}, ${blue}${isOpaque ? '' : `, ${alpha}`})`;
|
---|
988 | }
|
---|
989 |
|
---|
990 | function color2hslLegacyString(color) {
|
---|
991 | const hsl = color2hsl(color);
|
---|
992 | const isOpaque = hsl.alpha === 100;
|
---|
993 | const name = isOpaque ? 'hsl' : 'hsla';
|
---|
994 | const hue = hsl.hue;
|
---|
995 | const saturation = Math.round(hsl.saturation * 10000000000) / 10000000000;
|
---|
996 | const lightness = Math.round(hsl.lightness * 10000000000) / 10000000000;
|
---|
997 | const alpha = Math.round(hsl.alpha / 100 * 10000000000) / 10000000000;
|
---|
998 | return `${name}(${hue}, ${saturation}%, ${lightness}%${isOpaque ? '' : `, ${alpha}`})`;
|
---|
999 | }
|
---|
1000 |
|
---|
1001 | function manageUnresolved(node, opts, word, message) {
|
---|
1002 | if ('warn' === opts.unresolved) {
|
---|
1003 | opts.decl.warn(opts.result, message, {
|
---|
1004 | word
|
---|
1005 | });
|
---|
1006 | } else if ('ignore' !== opts.unresolved) {
|
---|
1007 | throw opts.decl.error(message, {
|
---|
1008 | word
|
---|
1009 | });
|
---|
1010 | }
|
---|
1011 | }
|
---|
1012 |
|
---|
1013 | /* Transform AST
|
---|
1014 | /* ========================================================================== */
|
---|
1015 |
|
---|
1016 | function transformAST(node, opts) {
|
---|
1017 | node.nodes.slice(0).forEach(child => {
|
---|
1018 | if (isColorModFunction(child)) {
|
---|
1019 | // transform any variables within the color-mod() function
|
---|
1020 | if (opts.transformVars) {
|
---|
1021 | transformVariables(child, opts);
|
---|
1022 | } // transform any color-mod() functions
|
---|
1023 |
|
---|
1024 |
|
---|
1025 | const color = transformColorModFunction(child, opts);
|
---|
1026 |
|
---|
1027 | if (color) {
|
---|
1028 | // update the color-mod() function with the transformed value
|
---|
1029 | child.replaceWith(valueParser.word({
|
---|
1030 | raws: child.raws,
|
---|
1031 | value: opts.stringifier(color)
|
---|
1032 | }));
|
---|
1033 | }
|
---|
1034 | } else if (child.nodes && Object(child.nodes).length) {
|
---|
1035 | transformAST(child, opts);
|
---|
1036 | }
|
---|
1037 | });
|
---|
1038 | }
|
---|
1039 | /* Transform <var> functions
|
---|
1040 | /* ========================================================================== */
|
---|
1041 |
|
---|
1042 | function transformVariables(node, opts) {
|
---|
1043 | walk(node, child => {
|
---|
1044 | if (isVariable(child)) {
|
---|
1045 | // get the custom property and fallback value from var()
|
---|
1046 | const _transformArgsByParam = transformArgsByParams(child, [// <value> , [ <fallback> ]?
|
---|
1047 | [transformWord, isComma, transformNode]]),
|
---|
1048 | _transformArgsByParam2 = _slicedToArray(_transformArgsByParam, 2),
|
---|
1049 | prop = _transformArgsByParam2[0],
|
---|
1050 | fallbackNode = _transformArgsByParam2[1]; // if the custom property is known
|
---|
1051 |
|
---|
1052 |
|
---|
1053 | if (prop in opts.customProperties) {
|
---|
1054 | let customPropertyValue = opts.customProperties[prop]; // follow custom properties referencing custom properties
|
---|
1055 |
|
---|
1056 | if (looseVarMatch.test(customPropertyValue)) {
|
---|
1057 | const rootChildAST = customPropertyValue.clone();
|
---|
1058 | transformVariables(rootChildAST, opts);
|
---|
1059 | customPropertyValue = rootChildAST;
|
---|
1060 | } // replace var() with the custom property value
|
---|
1061 |
|
---|
1062 |
|
---|
1063 | if (customPropertyValue.nodes.length === 1 && customPropertyValue.nodes[0].nodes.length) {
|
---|
1064 | customPropertyValue.nodes[0].nodes.forEach(customPropertyChild => {
|
---|
1065 | child.parent.insertBefore(child, customPropertyChild);
|
---|
1066 | });
|
---|
1067 | }
|
---|
1068 |
|
---|
1069 | child.remove();
|
---|
1070 | } else if (fallbackNode && fallbackNode.nodes.length === 1 && fallbackNode.nodes[0].nodes.length) {
|
---|
1071 | // otherwise, replace var() with the fallback value
|
---|
1072 | transformVariables(fallbackNode, opts);
|
---|
1073 | child.replaceWith(...fallbackNode.nodes[0].nodes[0]);
|
---|
1074 | }
|
---|
1075 | }
|
---|
1076 | });
|
---|
1077 | }
|
---|
1078 | /* Transform <color> functions
|
---|
1079 | /* ========================================================================== */
|
---|
1080 |
|
---|
1081 |
|
---|
1082 | function transformColor(node, opts) {
|
---|
1083 | if (isRGBFunction(node)) {
|
---|
1084 | return transformRGBFunction(node, opts);
|
---|
1085 | } else if (isHSLFunction(node)) {
|
---|
1086 | return transformHSLFunction(node, opts);
|
---|
1087 | } else if (isHWBFunction(node)) {
|
---|
1088 | return transformHWBFunction(node, opts);
|
---|
1089 | } else if (isColorModFunction(node)) {
|
---|
1090 | return transformColorModFunction(node, opts);
|
---|
1091 | } else if (isHexColor(node)) {
|
---|
1092 | return transformHexColor(node, opts);
|
---|
1093 | } else if (isNamedColor(node)) {
|
---|
1094 | return transformNamedColor(node, opts);
|
---|
1095 | } else {
|
---|
1096 | return manageUnresolved(node, opts, node.value, `Expected a color`);
|
---|
1097 | }
|
---|
1098 | } // return a transformed rgb/rgba color function
|
---|
1099 |
|
---|
1100 |
|
---|
1101 | function transformRGBFunction(node, opts) {
|
---|
1102 | const _transformArgsByParam3 = transformArgsByParams(node, [// <percentage> <percentage> <percentage> [ , <alpha-value> ]?
|
---|
1103 | [transformPercentage, transformPercentage, transformPercentage, isSlash, transformAlpha], // <number> <number> <number> [ , <alpha-value> ]?
|
---|
1104 | [transformRGBNumber, transformRGBNumber, transformRGBNumber, isSlash, transformAlpha], // <percentage> , <percentage> , <percentage> [ , <alpha-value> ]?
|
---|
1105 | [transformPercentage, isComma, transformPercentage, isComma, transformPercentage, isComma, transformAlpha], // <number> , <number> , <number> [ , <alpha-value> ]?
|
---|
1106 | [transformRGBNumber, isComma, transformRGBNumber, isComma, transformRGBNumber, isComma, transformAlpha]]),
|
---|
1107 | _transformArgsByParam4 = _slicedToArray(_transformArgsByParam3, 4),
|
---|
1108 | red = _transformArgsByParam4[0],
|
---|
1109 | green = _transformArgsByParam4[1],
|
---|
1110 | blue = _transformArgsByParam4[2],
|
---|
1111 | _transformArgsByParam5 = _transformArgsByParam4[3],
|
---|
1112 | alpha = _transformArgsByParam5 === void 0 ? 100 : _transformArgsByParam5;
|
---|
1113 |
|
---|
1114 | if (red !== undefined) {
|
---|
1115 | const color = new Color({
|
---|
1116 | red,
|
---|
1117 | green,
|
---|
1118 | blue,
|
---|
1119 | alpha,
|
---|
1120 | colorspace: 'rgb'
|
---|
1121 | });
|
---|
1122 | return color;
|
---|
1123 | } else {
|
---|
1124 | return manageUnresolved(node, opts, node.value, `Expected a valid rgb() function`);
|
---|
1125 | }
|
---|
1126 | } // return a transformed hsl/hsla color function
|
---|
1127 |
|
---|
1128 |
|
---|
1129 | function transformHSLFunction(node, opts) {
|
---|
1130 | const _transformArgsByParam6 = transformArgsByParams(node, [// <hue> <percentage> <percentage> [ / <alpha-value> ]?
|
---|
1131 | [transformHue, transformPercentage, transformPercentage, isSlash, transformAlpha], // <hue> , <percentage> , <percentage> [ , <alpha-value> ]?
|
---|
1132 | [transformHue, isComma, transformPercentage, isComma, transformPercentage, isComma, transformAlpha]]),
|
---|
1133 | _transformArgsByParam7 = _slicedToArray(_transformArgsByParam6, 4),
|
---|
1134 | hue = _transformArgsByParam7[0],
|
---|
1135 | saturation = _transformArgsByParam7[1],
|
---|
1136 | lightness = _transformArgsByParam7[2],
|
---|
1137 | _transformArgsByParam8 = _transformArgsByParam7[3],
|
---|
1138 | alpha = _transformArgsByParam8 === void 0 ? 100 : _transformArgsByParam8;
|
---|
1139 |
|
---|
1140 | if (lightness !== undefined) {
|
---|
1141 | const color = new Color({
|
---|
1142 | hue,
|
---|
1143 | saturation,
|
---|
1144 | lightness,
|
---|
1145 | alpha,
|
---|
1146 | colorspace: 'hsl'
|
---|
1147 | });
|
---|
1148 | return color;
|
---|
1149 | } else {
|
---|
1150 | return manageUnresolved(node, opts, node.value, `Expected a valid hsl() function`);
|
---|
1151 | }
|
---|
1152 | } // return a transformed hwb color function
|
---|
1153 |
|
---|
1154 |
|
---|
1155 | function transformHWBFunction(node, opts) {
|
---|
1156 | const _transformArgsByParam9 = transformArgsByParams(node, [// <hue> <percentage> <percentage> [ / <alpha-value> ]?
|
---|
1157 | [transformHue, transformPercentage, transformPercentage, isSlash, transformAlpha]]),
|
---|
1158 | _transformArgsByParam10 = _slicedToArray(_transformArgsByParam9, 4),
|
---|
1159 | hue = _transformArgsByParam10[0],
|
---|
1160 | whiteness = _transformArgsByParam10[1],
|
---|
1161 | blackness = _transformArgsByParam10[2],
|
---|
1162 | _transformArgsByParam11 = _transformArgsByParam10[3],
|
---|
1163 | alpha = _transformArgsByParam11 === void 0 ? 100 : _transformArgsByParam11;
|
---|
1164 |
|
---|
1165 | if (blackness !== undefined) {
|
---|
1166 | const color = new Color({
|
---|
1167 | hue,
|
---|
1168 | whiteness,
|
---|
1169 | blackness,
|
---|
1170 | alpha,
|
---|
1171 | colorspace: 'hwb'
|
---|
1172 | });
|
---|
1173 | return color;
|
---|
1174 | } else {
|
---|
1175 | return manageUnresolved(node, opts, node.value, `Expected a valid hwb() function`);
|
---|
1176 | }
|
---|
1177 | } // return a transformed color-mod color function
|
---|
1178 |
|
---|
1179 |
|
---|
1180 | function transformColorModFunction(node, opts) {
|
---|
1181 | // [ <color> | <hue> ] <color-adjuster>*
|
---|
1182 | const _ref = (node.nodes || []).slice(1, -1) || [],
|
---|
1183 | _ref2 = _toArray(_ref),
|
---|
1184 | colorOrHueNode = _ref2[0],
|
---|
1185 | adjusterNodes = _ref2.slice(1);
|
---|
1186 |
|
---|
1187 | if (colorOrHueNode !== undefined) {
|
---|
1188 | const color = isHue(colorOrHueNode) ? new Color({
|
---|
1189 | hue: transformHue(colorOrHueNode, opts),
|
---|
1190 | saturation: 100,
|
---|
1191 | lightness: 50,
|
---|
1192 | alpha: 100,
|
---|
1193 | colorspace: 'hsl'
|
---|
1194 | }) : transformColor(colorOrHueNode, opts);
|
---|
1195 |
|
---|
1196 | if (color) {
|
---|
1197 | const adjustedColor = transformColorByAdjusters(color, adjusterNodes, opts);
|
---|
1198 | return adjustedColor;
|
---|
1199 | } else {
|
---|
1200 | return manageUnresolved(node, opts, node.value, `Expected a valid color`);
|
---|
1201 | }
|
---|
1202 | } else {
|
---|
1203 | return manageUnresolved(node, opts, node.value, `Expected a valid color-mod() function`);
|
---|
1204 | }
|
---|
1205 | } // return a transformed hex color
|
---|
1206 |
|
---|
1207 |
|
---|
1208 | function transformHexColor(node, opts) {
|
---|
1209 | if (hexColorMatch$1.test(node.value)) {
|
---|
1210 | // #<hex-color>{3,4,6,8}
|
---|
1211 | const _convertHtoRGB = convertHtoRGB(node.value),
|
---|
1212 | _convertHtoRGB2 = _slicedToArray(_convertHtoRGB, 4),
|
---|
1213 | red = _convertHtoRGB2[0],
|
---|
1214 | green = _convertHtoRGB2[1],
|
---|
1215 | blue = _convertHtoRGB2[2],
|
---|
1216 | alpha = _convertHtoRGB2[3];
|
---|
1217 |
|
---|
1218 | const color = new Color({
|
---|
1219 | red,
|
---|
1220 | green,
|
---|
1221 | blue,
|
---|
1222 | alpha
|
---|
1223 | });
|
---|
1224 | return color;
|
---|
1225 | } else {
|
---|
1226 | return manageUnresolved(node, opts, node.value, `Expected a valid hex color`);
|
---|
1227 | }
|
---|
1228 | } // return a transformed named-color
|
---|
1229 |
|
---|
1230 |
|
---|
1231 | function transformNamedColor(node, opts) {
|
---|
1232 | if (isNamedColor(node)) {
|
---|
1233 | // <named-color>
|
---|
1234 | const _convertNtoRGB = convertNtoRGB(node.value),
|
---|
1235 | _convertNtoRGB2 = _slicedToArray(_convertNtoRGB, 3),
|
---|
1236 | red = _convertNtoRGB2[0],
|
---|
1237 | green = _convertNtoRGB2[1],
|
---|
1238 | blue = _convertNtoRGB2[2];
|
---|
1239 |
|
---|
1240 | const color = new Color({
|
---|
1241 | red,
|
---|
1242 | green,
|
---|
1243 | blue,
|
---|
1244 | alpha: 100,
|
---|
1245 | colorspace: 'rgb'
|
---|
1246 | });
|
---|
1247 | return color;
|
---|
1248 | } else {
|
---|
1249 | return manageUnresolved(node, opts, node.value, `Expected a valid named-color`);
|
---|
1250 | }
|
---|
1251 | }
|
---|
1252 | /* Transform <color-adjuster> functions
|
---|
1253 | /* ========================================================================== */
|
---|
1254 | // return a transformed color using adjustments
|
---|
1255 |
|
---|
1256 |
|
---|
1257 | function transformColorByAdjusters(color, adjusterNodes, opts) {
|
---|
1258 | const adjustedColor = adjusterNodes.reduce((base, node) => {
|
---|
1259 | if (isAlphaBlueGreenRedAdjuster(node)) {
|
---|
1260 | return transformAlphaBlueGreenRedAdjuster(base, node, opts);
|
---|
1261 | } else if (isRGBAdjuster(node)) {
|
---|
1262 | return transformRGBAdjuster(base, node, opts);
|
---|
1263 | } else if (isHueAdjuster(node)) {
|
---|
1264 | return transformHueAdjuster(base, node, opts);
|
---|
1265 | } else if (isBlacknessLightnessSaturationWhitenessAdjuster(node)) {
|
---|
1266 | return transformBlacknessLightnessSaturationWhitenessAdjuster(base, node, opts);
|
---|
1267 | } else if (isShadeTintAdjuster(node)) {
|
---|
1268 | return transformShadeTintAdjuster(base, node, opts);
|
---|
1269 | } else if (isBlendAdjuster(node)) {
|
---|
1270 | return transformBlendAdjuster(base, node, node.value === 'blenda', opts);
|
---|
1271 | } else if (isContrastAdjuster(node)) {
|
---|
1272 | return transformContrastAdjuster(base, node, opts);
|
---|
1273 | } else {
|
---|
1274 | manageUnresolved(node, opts, node.value, `Expected a valid color adjuster`);
|
---|
1275 | return base;
|
---|
1276 | }
|
---|
1277 | }, color);
|
---|
1278 | return adjustedColor;
|
---|
1279 | } // return a transformed color using a/alpha/blue/green/red adjustments
|
---|
1280 |
|
---|
1281 |
|
---|
1282 | function transformAlphaBlueGreenRedAdjuster(base, node, opts) {
|
---|
1283 | const _transformArgsByParam12 = transformArgsByParams(node, alphaMatch.test(node.value) // a/alpha adjustments
|
---|
1284 | ? [// [ + | - ] <alpha-value>
|
---|
1285 | [transformMinusPlusOperator, transformAlpha], // * <percentage>
|
---|
1286 | [transformTimesOperator, transformPercentage], // <alpha-value>
|
---|
1287 | [transformAlpha]] // blue/green/red adjustments
|
---|
1288 | : [// [ + | - ] <percentage>
|
---|
1289 | [transformMinusPlusOperator, transformPercentage], // [ + | - ] <number>
|
---|
1290 | [transformMinusPlusOperator, transformRGBNumber], // * <percentage>
|
---|
1291 | [transformTimesOperator, transformPercentage], // <percentage>
|
---|
1292 | [transformPercentage], // <number>
|
---|
1293 | [transformRGBNumber]]),
|
---|
1294 | _transformArgsByParam13 = _slicedToArray(_transformArgsByParam12, 2),
|
---|
1295 | operatorOrValue = _transformArgsByParam13[0],
|
---|
1296 | adjustment = _transformArgsByParam13[1];
|
---|
1297 |
|
---|
1298 | if (operatorOrValue !== undefined) {
|
---|
1299 | // normalized channel name
|
---|
1300 | const channel = node.value.toLowerCase().replace(alphaMatch, 'alpha');
|
---|
1301 | const existingValue = base[channel]();
|
---|
1302 | const modifiedValue = adjustment !== undefined ? operatorOrValue === '+' ? existingValue + Number(adjustment) : operatorOrValue === '-' ? existingValue - Number(adjustment) : operatorOrValue === '*' ? existingValue * Number(adjustment) : Number(adjustment) : Number(operatorOrValue);
|
---|
1303 | const modifiedColor = base[channel](modifiedValue);
|
---|
1304 | return modifiedColor;
|
---|
1305 | } else {
|
---|
1306 | return manageUnresolved(node, opts, node.value, `Expected a valid modifier()`);
|
---|
1307 | }
|
---|
1308 | } // return a transformed color using an rgb adjustment
|
---|
1309 |
|
---|
1310 |
|
---|
1311 | function transformRGBAdjuster(base, node, opts) {
|
---|
1312 | const _transformArgsByParam14 = transformArgsByParams(node, [// [ + | - ] <percentage> <percentage> <percentage>
|
---|
1313 | [transformMinusPlusOperator, transformPercentage, transformPercentage, transformPercentage], // [ + | - ] <number> <number> <number>
|
---|
1314 | [transformMinusPlusOperator, transformRGBNumber, transformRGBNumber, transformRGBNumber], // [ + | - ] <hash-token>
|
---|
1315 | [transformMinusPlusOperator, transformHexColor], // [ * ] <percentage>
|
---|
1316 | [transformTimesOperator, transformPercentage]]),
|
---|
1317 | _transformArgsByParam15 = _slicedToArray(_transformArgsByParam14, 4),
|
---|
1318 | arg1 = _transformArgsByParam15[0],
|
---|
1319 | arg2 = _transformArgsByParam15[1],
|
---|
1320 | arg3 = _transformArgsByParam15[2],
|
---|
1321 | arg4 = _transformArgsByParam15[3];
|
---|
1322 |
|
---|
1323 | if (arg2 !== undefined && arg2.color) {
|
---|
1324 | const modifiedColor = base.rgb(arg1 === '+' ? base.red() + arg2.red() : base.red() - arg2.red(), arg1 === '+' ? base.green() + arg2.green() : base.green() - arg2.green(), arg1 === '+' ? base.blue() + arg2.blue() : base.blue() - arg2.blue());
|
---|
1325 | return modifiedColor;
|
---|
1326 | } else if (arg1 !== undefined && minusPlusMatch.test(arg1)) {
|
---|
1327 | const modifiedColor = base.rgb(arg1 === '+' ? base.red() + arg2 : base.red() - arg2, arg1 === '+' ? base.green() + arg3 : base.green() - arg3, arg1 === '+' ? base.blue() + arg4 : base.blue() - arg4);
|
---|
1328 | return modifiedColor;
|
---|
1329 | } else if (arg1 !== undefined && arg2 !== undefined) {
|
---|
1330 | const modifiedColor = base.rgb(base.red() * arg2, base.green() * arg2, base.blue() * arg2);
|
---|
1331 | return modifiedColor;
|
---|
1332 | } else {
|
---|
1333 | return manageUnresolved(node, opts, node.value, `Expected a valid rgb() adjuster`);
|
---|
1334 | }
|
---|
1335 | } // return a transformed color using a blend/blenda adjustment
|
---|
1336 |
|
---|
1337 |
|
---|
1338 | function transformBlendAdjuster(base, node, isAlphaBlend, opts) {
|
---|
1339 | const _transformArgsByParam16 = transformArgsByParams(node, [[transformColor, transformPercentage, transformColorSpace]]),
|
---|
1340 | _transformArgsByParam17 = _slicedToArray(_transformArgsByParam16, 3),
|
---|
1341 | color = _transformArgsByParam17[0],
|
---|
1342 | percentage = _transformArgsByParam17[1],
|
---|
1343 | _transformArgsByParam18 = _transformArgsByParam17[2],
|
---|
1344 | colorspace = _transformArgsByParam18 === void 0 ? 'rgb' : _transformArgsByParam18;
|
---|
1345 |
|
---|
1346 | if (percentage !== undefined) {
|
---|
1347 | const modifiedColor = isAlphaBlend ? base.blenda(color.color, percentage, colorspace) : base.blend(color.color, percentage, colorspace);
|
---|
1348 | return modifiedColor;
|
---|
1349 | } else {
|
---|
1350 | return manageUnresolved(node, opts, node.value, `Expected a valid blend() adjuster)`);
|
---|
1351 | }
|
---|
1352 | } // return a transformed color using a contrast adjustment
|
---|
1353 |
|
---|
1354 |
|
---|
1355 | function transformContrastAdjuster(base, node, opts) {
|
---|
1356 | const _transformArgsByParam19 = transformArgsByParams(node, [// <percentage>
|
---|
1357 | [transformPercentage]]),
|
---|
1358 | _transformArgsByParam20 = _slicedToArray(_transformArgsByParam19, 1),
|
---|
1359 | percentage = _transformArgsByParam20[0];
|
---|
1360 |
|
---|
1361 | if (percentage !== undefined) {
|
---|
1362 | const modifiedColor = base.contrast(percentage);
|
---|
1363 | return modifiedColor;
|
---|
1364 | } else {
|
---|
1365 | return manageUnresolved(node, opts, node.value, `Expected a valid contrast() adjuster)`);
|
---|
1366 | }
|
---|
1367 | } // return a transformed color using a hue adjustment
|
---|
1368 |
|
---|
1369 |
|
---|
1370 | function transformHueAdjuster(base, node, opts) {
|
---|
1371 | const _transformArgsByParam21 = transformArgsByParams(node, [// [ + | - | * ] <angle>
|
---|
1372 | [transformMinusPlusTimesOperator, transformHue], // <angle>
|
---|
1373 | [transformHue]]),
|
---|
1374 | _transformArgsByParam22 = _slicedToArray(_transformArgsByParam21, 2),
|
---|
1375 | operatorOrHue = _transformArgsByParam22[0],
|
---|
1376 | adjustment = _transformArgsByParam22[1];
|
---|
1377 |
|
---|
1378 | if (operatorOrHue !== undefined) {
|
---|
1379 | const existingHue = base.hue();
|
---|
1380 | const modifiedValue = adjustment !== undefined ? operatorOrHue === '+' ? existingHue + Number(adjustment) : operatorOrHue === '-' ? existingHue - Number(adjustment) : operatorOrHue === '*' ? existingHue * Number(adjustment) : Number(adjustment) : Number(operatorOrHue);
|
---|
1381 | return base.hue(modifiedValue);
|
---|
1382 | } else {
|
---|
1383 | return manageUnresolved(node, opts, node.value, `Expected a valid hue() function)`);
|
---|
1384 | }
|
---|
1385 | } // [ b | blackness | l | lightness | s | saturation | w | whiteness ]( [ + | - | * ]? <percentage> )
|
---|
1386 |
|
---|
1387 |
|
---|
1388 | function transformBlacknessLightnessSaturationWhitenessAdjuster(base, node, opts) {
|
---|
1389 | const channel = node.value.toLowerCase().replace(/^b$/, 'blackness').replace(/^l$/, 'lightness').replace(/^s$/, 'saturation').replace(/^w$/, 'whiteness');
|
---|
1390 |
|
---|
1391 | const _transformArgsByParam23 = transformArgsByParams(node, [[transformMinusPlusTimesOperator, transformPercentage], [transformPercentage]]),
|
---|
1392 | _transformArgsByParam24 = _slicedToArray(_transformArgsByParam23, 2),
|
---|
1393 | operatorOrValue = _transformArgsByParam24[0],
|
---|
1394 | adjustment = _transformArgsByParam24[1];
|
---|
1395 |
|
---|
1396 | if (operatorOrValue !== undefined) {
|
---|
1397 | const existingValue = base[channel]();
|
---|
1398 | const modifiedValue = adjustment !== undefined ? operatorOrValue === '+' ? existingValue + Number(adjustment) : operatorOrValue === '-' ? existingValue - Number(adjustment) : operatorOrValue === '*' ? existingValue * Number(adjustment) : Number(adjustment) : Number(operatorOrValue);
|
---|
1399 | return base[channel](modifiedValue);
|
---|
1400 | } else {
|
---|
1401 | return manageUnresolved(node, opts, node.value, `Expected a valid ${channel}() function)`);
|
---|
1402 | }
|
---|
1403 | } // return a transformed color using shade/tint adjustments
|
---|
1404 |
|
---|
1405 |
|
---|
1406 | function transformShadeTintAdjuster(base, node, opts) {
|
---|
1407 | const channel = node.value.toLowerCase();
|
---|
1408 |
|
---|
1409 | const _transformArgsByParam25 = transformArgsByParams(node, [// [ shade | tint ]( <percentage> )
|
---|
1410 | [transformPercentage]]),
|
---|
1411 | _transformArgsByParam26 = _slicedToArray(_transformArgsByParam25, 1),
|
---|
1412 | percentage = _transformArgsByParam26[0];
|
---|
1413 |
|
---|
1414 | if (percentage !== undefined) {
|
---|
1415 | const modifiedValue = Number(percentage);
|
---|
1416 | return base[channel](modifiedValue);
|
---|
1417 | } else {
|
---|
1418 | return manageUnresolved(node, opts, node.value, `Expected valid ${channel}() arguments`);
|
---|
1419 | }
|
---|
1420 | }
|
---|
1421 | /* Argument Transforms
|
---|
1422 | /* ========================================================================== */
|
---|
1423 | // return a transformed color space
|
---|
1424 |
|
---|
1425 |
|
---|
1426 | function transformColorSpace(node, opts) {
|
---|
1427 | if (isColorSpace(node)) {
|
---|
1428 | // [ hsl | hwb | rgb ]
|
---|
1429 | return node.value;
|
---|
1430 | } else {
|
---|
1431 | return manageUnresolved(node, opts, node.value, `Expected a valid color space)`);
|
---|
1432 | }
|
---|
1433 | } // return a transformed alpha value
|
---|
1434 |
|
---|
1435 |
|
---|
1436 | function transformAlpha(node, opts) {
|
---|
1437 | if (isNumber(node)) {
|
---|
1438 | // <number>
|
---|
1439 | return node.value * 100;
|
---|
1440 | } else if (isPercentage(node)) {
|
---|
1441 | // <percentage>
|
---|
1442 | return transformPercentage(node, opts);
|
---|
1443 | } else {
|
---|
1444 | return manageUnresolved(node, opts, node.value, `Expected a valid alpha value)`);
|
---|
1445 | }
|
---|
1446 | } // return a transformed rgb number
|
---|
1447 |
|
---|
1448 |
|
---|
1449 | function transformRGBNumber(node, opts) {
|
---|
1450 | if (isNumber(node)) {
|
---|
1451 | // <number>
|
---|
1452 | return node.value / 2.55;
|
---|
1453 | } else {
|
---|
1454 | return manageUnresolved(node, opts, node.value, `Expected a valid RGB value)`);
|
---|
1455 | }
|
---|
1456 | } // return a transformed hue
|
---|
1457 |
|
---|
1458 |
|
---|
1459 | function transformHue(node, opts) {
|
---|
1460 | if (isHue(node)) {
|
---|
1461 | // <hue> = <number> | <angle>
|
---|
1462 | const unit = node.unit.toLowerCase();
|
---|
1463 |
|
---|
1464 | if (unit === 'grad') {
|
---|
1465 | // if <angle> = <gradian> (400 per circle)
|
---|
1466 | return convertGtoD(node.value);
|
---|
1467 | } else if (unit === 'rad') {
|
---|
1468 | // if <angle> = <radian> (2π per circle)
|
---|
1469 | return convertRtoD(node.value);
|
---|
1470 | } else if (unit === 'turn') {
|
---|
1471 | // if <angle> = <turn> (1 per circle)
|
---|
1472 | return convertTtoD(node.value);
|
---|
1473 | } else {
|
---|
1474 | // if <angle> = [ <degree> | <number> ] (360 per circle)
|
---|
1475 | return convertDtoD(node.value);
|
---|
1476 | }
|
---|
1477 | } else {
|
---|
1478 | return manageUnresolved(node, opts, node.value, `Expected a valid hue`);
|
---|
1479 | }
|
---|
1480 | } // return a transformed percentage
|
---|
1481 |
|
---|
1482 |
|
---|
1483 | function transformPercentage(node, opts) {
|
---|
1484 | if (isPercentage(node)) {
|
---|
1485 | // <percentage>
|
---|
1486 | return Number(node.value);
|
---|
1487 | } else {
|
---|
1488 | return manageUnresolved(node, opts, node.value, `Expected a valid hue`);
|
---|
1489 | }
|
---|
1490 | } // return a transformed minus-plus operator
|
---|
1491 |
|
---|
1492 |
|
---|
1493 | function transformMinusPlusOperator(node, opts) {
|
---|
1494 | if (isMinusPlusOperator(node)) {
|
---|
1495 | // [ - | + ]
|
---|
1496 | return node.value;
|
---|
1497 | } else {
|
---|
1498 | return manageUnresolved(node, opts, node.value, `Expected a plus or minus operator`);
|
---|
1499 | }
|
---|
1500 | } // return a transformed times operator
|
---|
1501 |
|
---|
1502 |
|
---|
1503 | function transformTimesOperator(node, opts) {
|
---|
1504 | if (isTimesOperator(node)) {
|
---|
1505 | // [ * ]
|
---|
1506 | return node.value;
|
---|
1507 | } else {
|
---|
1508 | return manageUnresolved(node, opts, node.value, `Expected a times operator`);
|
---|
1509 | }
|
---|
1510 | } // return a transformed minus-plus-times operator
|
---|
1511 |
|
---|
1512 |
|
---|
1513 | function transformMinusPlusTimesOperator(node, opts) {
|
---|
1514 | if (isMinusPlusTimesOperator(node)) {
|
---|
1515 | // [ - | + | * ]
|
---|
1516 | return node.value;
|
---|
1517 | } else {
|
---|
1518 | return manageUnresolved(node, opts, node.value, `Expected a plus, minus, or times operator`);
|
---|
1519 | }
|
---|
1520 | }
|
---|
1521 | /* Additional transforms
|
---|
1522 | /* ========================================================================== */
|
---|
1523 |
|
---|
1524 |
|
---|
1525 | function transformWord(node, opts) {
|
---|
1526 | if (isWord(node)) {
|
---|
1527 | return node.value;
|
---|
1528 | } else {
|
---|
1529 | return manageUnresolved(node, opts, node.value, `Expected a valid word`);
|
---|
1530 | }
|
---|
1531 | }
|
---|
1532 |
|
---|
1533 | function transformNode(node) {
|
---|
1534 | return Object(node);
|
---|
1535 | }
|
---|
1536 | /* Transform helper
|
---|
1537 | /* ========================================================================== */
|
---|
1538 | // return the first set of transformed arguments allowable by the parameters
|
---|
1539 |
|
---|
1540 |
|
---|
1541 | function transformArgsByParams(node, params) {
|
---|
1542 | const nodes = (node.nodes || []).slice(1, -1);
|
---|
1543 | const opts = {
|
---|
1544 | unresolved: 'ignore'
|
---|
1545 | };
|
---|
1546 | return params.map(param => nodes.map((childNode, index) => typeof param[index] === 'function' ? param[index](childNode, opts) : undefined).filter(child => typeof child !== 'boolean')).filter(param => param.every(result => result !== undefined))[0] || [];
|
---|
1547 | }
|
---|
1548 | /* Walk helper (required because the default walker is affected by mutations)
|
---|
1549 | /* ========================================================================== */
|
---|
1550 | // run a function over each node and hen walk each child node of that node
|
---|
1551 |
|
---|
1552 |
|
---|
1553 | function walk(node, fn) {
|
---|
1554 | fn(node);
|
---|
1555 |
|
---|
1556 | if (Object(node.nodes).length) {
|
---|
1557 | node.nodes.slice().forEach(childNode => {
|
---|
1558 | walk(childNode, fn);
|
---|
1559 | });
|
---|
1560 | }
|
---|
1561 | }
|
---|
1562 | /* Variable validators
|
---|
1563 | /* ========================================================================== */
|
---|
1564 | // return whether the node is a var function
|
---|
1565 |
|
---|
1566 |
|
---|
1567 | function isVariable(node) {
|
---|
1568 | // var()
|
---|
1569 | return Object(node).type === 'func' && varMatch.test(node.value);
|
---|
1570 | }
|
---|
1571 | /* Adjustment validators
|
---|
1572 | /* ========================================================================== */
|
---|
1573 | // return whether the node is an a/alpha/blue/green/red adjuster
|
---|
1574 |
|
---|
1575 |
|
---|
1576 | function isAlphaBlueGreenRedAdjuster(node) {
|
---|
1577 | // [ a(), alpha(), blue(), green(), red() ]
|
---|
1578 | return Object(node).type === 'func' && alphaBlueGreenRedMatch.test(node.value);
|
---|
1579 | } // return whether the node is an rgb adjuster
|
---|
1580 |
|
---|
1581 |
|
---|
1582 | function isRGBAdjuster(node) {
|
---|
1583 | return Object(node).type === 'func' && rgbMatch.test(node.value);
|
---|
1584 | } // return whether the node is a hue adjuster
|
---|
1585 |
|
---|
1586 |
|
---|
1587 | function isHueAdjuster(node) {
|
---|
1588 | // [ h() | hue() ]
|
---|
1589 | return Object(node).type === 'func' && hueMatch.test(node.value);
|
---|
1590 | } // return whether the node is a blackness/lightness/saturation/whiteness adjuster
|
---|
1591 |
|
---|
1592 |
|
---|
1593 | function isBlacknessLightnessSaturationWhitenessAdjuster(node) {
|
---|
1594 | // [ b() | blackness() | l() | lightness() | s() | saturation() | w() | whiteness() ]
|
---|
1595 | return Object(node).type === 'func' && blacknessLightnessSaturationWhitenessMatch.test(node.value);
|
---|
1596 | } // return whether the node is a shade/tint adjuster
|
---|
1597 |
|
---|
1598 |
|
---|
1599 | function isShadeTintAdjuster(node) {
|
---|
1600 | // [ shade() | tint() ]
|
---|
1601 | return Object(node).type === 'func' && shadeTintMatch.test(node.value);
|
---|
1602 | } // return whether the node is a blend adjuster
|
---|
1603 |
|
---|
1604 |
|
---|
1605 | function isBlendAdjuster(node) {
|
---|
1606 | // [ blend(), blenda() ]
|
---|
1607 | return Object(node).type === 'func' && blendMatch.test(node.value);
|
---|
1608 | } // return whether the node is a contrast adjuster
|
---|
1609 |
|
---|
1610 |
|
---|
1611 | function isContrastAdjuster(node) {
|
---|
1612 | // [ contrast() ]
|
---|
1613 | return Object(node).type === 'func' && contrastMatch.test(node.value);
|
---|
1614 | }
|
---|
1615 | /* Color validators
|
---|
1616 | /* ========================================================================== */
|
---|
1617 | // return whether the node is an rgb/rgba color function
|
---|
1618 |
|
---|
1619 |
|
---|
1620 | function isRGBFunction(node) {
|
---|
1621 | // [ rgb(), rgba() ]
|
---|
1622 | return Object(node).type === 'func' && rgbaMatch.test(node.value);
|
---|
1623 | } // return whether the node is an hsl color function
|
---|
1624 |
|
---|
1625 |
|
---|
1626 | function isHSLFunction(node) {
|
---|
1627 | // [ hsl(), hsla() ]
|
---|
1628 | return Object(node).type === 'func' && hslaMatch.test(node.value);
|
---|
1629 | } // return whether the node is an hwb color function
|
---|
1630 |
|
---|
1631 |
|
---|
1632 | function isHWBFunction(node) {
|
---|
1633 | // hwb()
|
---|
1634 | return Object(node).type === 'func' && hwbMatch.test(node.value);
|
---|
1635 | } // return whether the node is a color-mod function
|
---|
1636 |
|
---|
1637 |
|
---|
1638 | function isColorModFunction(node) {
|
---|
1639 | // color-mod()
|
---|
1640 | return Object(node).type === 'func' && colorModMatch.test(node.value);
|
---|
1641 | } // return whether the node is a valid named-color
|
---|
1642 |
|
---|
1643 |
|
---|
1644 | function isNamedColor(node) {
|
---|
1645 | return Object(node).type === 'word' && Boolean(convertNtoRGB(node.value));
|
---|
1646 | } // return whether the node is a valid hex color
|
---|
1647 |
|
---|
1648 |
|
---|
1649 | function isHexColor(node) {
|
---|
1650 | // #<hex-color>{3,4,6,8}
|
---|
1651 | return Object(node).type === 'word' && hexColorMatch$1.test(node.value);
|
---|
1652 | } // return whether the node is a valid color space
|
---|
1653 |
|
---|
1654 |
|
---|
1655 | function isColorSpace(node) {
|
---|
1656 | // [ hsl | hwb | rgb ]
|
---|
1657 | return Object(node).type === 'word' && colorSpaceMatch.test(node.value);
|
---|
1658 | }
|
---|
1659 | /* Additional validators
|
---|
1660 | /* ========================================================================== */
|
---|
1661 | // return whether the hue value is valid
|
---|
1662 |
|
---|
1663 |
|
---|
1664 | function isHue(node) {
|
---|
1665 | return Object(node).type === 'number' && hueUnitMatch.test(node.unit);
|
---|
1666 | } // return whether the comma is valid
|
---|
1667 |
|
---|
1668 |
|
---|
1669 | function isComma(node) {
|
---|
1670 | return Object(node).type === 'comma';
|
---|
1671 | } // return whether the slash operator is valid
|
---|
1672 |
|
---|
1673 |
|
---|
1674 | function isSlash(node) {
|
---|
1675 | return Object(node).type === 'operator' && node.value === '/';
|
---|
1676 | } // return whether the number is valid
|
---|
1677 |
|
---|
1678 |
|
---|
1679 | function isNumber(node) {
|
---|
1680 | return Object(node).type === 'number' && node.unit === '';
|
---|
1681 | } // return whether the mind-plus operator is valid
|
---|
1682 |
|
---|
1683 |
|
---|
1684 | function isMinusPlusOperator(node) {
|
---|
1685 | return Object(node).type === 'operator' && minusPlusMatch.test(node.value);
|
---|
1686 | } // return whether the minus-plus-times operator is valid
|
---|
1687 |
|
---|
1688 |
|
---|
1689 | function isMinusPlusTimesOperator(node) {
|
---|
1690 | return Object(node).type === 'operator' && minusPlusTimesMatch.test(node.value);
|
---|
1691 | } // return whether the times operator is valid
|
---|
1692 |
|
---|
1693 |
|
---|
1694 | function isTimesOperator(node) {
|
---|
1695 | return Object(node).type === 'operator' && timesMatch.test(node.value);
|
---|
1696 | } // return whether the percentage is valid
|
---|
1697 |
|
---|
1698 |
|
---|
1699 | function isPercentage(node) {
|
---|
1700 | return Object(node).type === 'number' && (node.unit === '%' || node.value === '0');
|
---|
1701 | } // return whether the node is a word
|
---|
1702 |
|
---|
1703 |
|
---|
1704 | function isWord(node) {
|
---|
1705 | // <word>
|
---|
1706 | return Object(node).type === 'word';
|
---|
1707 | }
|
---|
1708 | /* Matchers
|
---|
1709 | /* ========================================================================== */
|
---|
1710 |
|
---|
1711 |
|
---|
1712 | const alphaMatch = /^a(lpha)?$/i;
|
---|
1713 | const alphaBlueGreenRedMatch = /^(a(lpha)?|blue|green|red)$/i;
|
---|
1714 | const blacknessLightnessSaturationWhitenessMatch = /^(b(lackness)?|l(ightness)?|s(aturation)?|w(hiteness)?)$/i;
|
---|
1715 | const blendMatch = /^blenda?$/i;
|
---|
1716 | const colorModMatch = /^color-mod$/i;
|
---|
1717 | const colorSpaceMatch = /^(hsl|hwb|rgb)$/i;
|
---|
1718 | const contrastMatch = /^contrast$/i;
|
---|
1719 | const hexColorMatch$1 = /^#(?:([a-f0-9])([a-f0-9])([a-f0-9])([a-f0-9])?|([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})?)$/i;
|
---|
1720 | const hslaMatch = /^hsla?$/i;
|
---|
1721 | const hueUnitMatch = /^(deg|grad|rad|turn)?$/i;
|
---|
1722 | const hueMatch = /^h(ue)?$/i;
|
---|
1723 | const hwbMatch = /^hwb$/i;
|
---|
1724 | const minusPlusMatch = /^[+-]$/;
|
---|
1725 | const minusPlusTimesMatch = /^[*+-]$/;
|
---|
1726 | const rgbMatch = /^rgb$/i;
|
---|
1727 | const rgbaMatch = /^rgba?$/i;
|
---|
1728 | const shadeTintMatch = /^(shade|tint)$/i;
|
---|
1729 | const varMatch = /^var$/i;
|
---|
1730 | const looseVarMatch = /(^|[^\w-])var\(/i;
|
---|
1731 | const timesMatch = /^[*]$/;
|
---|
1732 |
|
---|
1733 | var index = postcss.plugin('postcss-color-mod-function', opts => {
|
---|
1734 | // how unresolved functions and arguments should be handled (default: "throw")
|
---|
1735 | const unresolvedOpt = String(Object(opts).unresolved || 'throw').toLowerCase(); // how transformed colors will be produced in CSS
|
---|
1736 |
|
---|
1737 | const stringifierOpt = Object(opts).stringifier || (color => color.toLegacy()); // sources to import custom selectors from
|
---|
1738 |
|
---|
1739 |
|
---|
1740 | const importFrom = [].concat(Object(opts).importFrom || []); // whether var() within color-mod() should use Custom Properties or var() fallback
|
---|
1741 |
|
---|
1742 | const transformVarsOpt = 'transformVars' in Object(opts) ? opts.transformVars : true; // promise any custom selectors are imported
|
---|
1743 |
|
---|
1744 | const customPropertiesPromise = importCustomPropertiesFromSources(importFrom);
|
---|
1745 | return (
|
---|
1746 | /*#__PURE__*/
|
---|
1747 | function () {
|
---|
1748 | var _ref = _asyncToGenerator(function* (root, result) {
|
---|
1749 | const customProperties = Object.assign((yield customPropertiesPromise), getCustomProperties(root, {
|
---|
1750 | preserve: true
|
---|
1751 | }));
|
---|
1752 | root.walkDecls(decl => {
|
---|
1753 | const originalValue = decl.value;
|
---|
1754 |
|
---|
1755 | if (colorModFunctionMatch.test(originalValue)) {
|
---|
1756 | const ast = valueParser(originalValue, {
|
---|
1757 | loose: true
|
---|
1758 | }).parse();
|
---|
1759 | transformAST(ast, {
|
---|
1760 | unresolved: unresolvedOpt,
|
---|
1761 | stringifier: stringifierOpt,
|
---|
1762 | transformVars: transformVarsOpt,
|
---|
1763 | decl,
|
---|
1764 | result,
|
---|
1765 | customProperties
|
---|
1766 | });
|
---|
1767 | const modifiedValue = ast.toString();
|
---|
1768 |
|
---|
1769 | if (originalValue !== modifiedValue) {
|
---|
1770 | decl.value = modifiedValue;
|
---|
1771 | }
|
---|
1772 | }
|
---|
1773 | });
|
---|
1774 | });
|
---|
1775 |
|
---|
1776 | return function (_x, _x2) {
|
---|
1777 | return _ref.apply(this, arguments);
|
---|
1778 | };
|
---|
1779 | }()
|
---|
1780 | );
|
---|
1781 | });
|
---|
1782 | const colorModFunctionMatch = /(^|[^\w-])color-mod\(/i;
|
---|
1783 |
|
---|
1784 | module.exports = index;
|
---|
1785 | //# sourceMappingURL=index.cjs.js.map
|
---|