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