[6a3a178] | 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
|
---|