source: frontend/node_modules/cssstyle/lib/parsers.js

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance
  • Property mode set to 100644
File size: 18.9 KB
Line 
1/*********************************************************************
2 * These are commonly used parsers for CSS Values they take a string *
3 * to parse and return a string after it's been converted, if needed *
4 ********************************************************************/
5'use strict';
6
7const namedColors = require('./named_colors.json');
8const { hslToRgb } = require('./utils/colorSpace');
9
10exports.TYPES = {
11 INTEGER: 1,
12 NUMBER: 2,
13 LENGTH: 3,
14 PERCENT: 4,
15 URL: 5,
16 COLOR: 6,
17 STRING: 7,
18 ANGLE: 8,
19 KEYWORD: 9,
20 NULL_OR_EMPTY_STR: 10,
21 CALC: 11,
22};
23
24// rough regular expressions
25var integerRegEx = /^[-+]?[0-9]+$/;
26var numberRegEx = /^[-+]?[0-9]*\.?[0-9]+$/;
27var lengthRegEx = /^(0|[-+]?[0-9]*\.?[0-9]+(in|cm|em|mm|pt|pc|px|ex|rem|vh|vw|ch))$/;
28var percentRegEx = /^[-+]?[0-9]*\.?[0-9]+%$/;
29var urlRegEx = /^url\(\s*([^)]*)\s*\)$/;
30var stringRegEx = /^("[^"]*"|'[^']*')$/;
31var colorRegEx1 = /^#([0-9a-fA-F]{3,4}){1,2}$/;
32var colorRegEx2 = /^rgb\(([^)]*)\)$/;
33var colorRegEx3 = /^rgba\(([^)]*)\)$/;
34var calcRegEx = /^calc\(([^)]*)\)$/;
35var colorRegEx4 = /^hsla?\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*(,\s*(-?\d+|-?\d*.\d+)\s*)?\)/;
36var angleRegEx = /^([-+]?[0-9]*\.?[0-9]+)(deg|grad|rad)$/;
37
38// This will return one of the above types based on the passed in string
39exports.valueType = function valueType(val) {
40 if (val === '' || val === null) {
41 return exports.TYPES.NULL_OR_EMPTY_STR;
42 }
43 if (typeof val === 'number') {
44 val = val.toString();
45 }
46
47 if (typeof val !== 'string') {
48 return undefined;
49 }
50
51 if (integerRegEx.test(val)) {
52 return exports.TYPES.INTEGER;
53 }
54 if (numberRegEx.test(val)) {
55 return exports.TYPES.NUMBER;
56 }
57 if (lengthRegEx.test(val)) {
58 return exports.TYPES.LENGTH;
59 }
60 if (percentRegEx.test(val)) {
61 return exports.TYPES.PERCENT;
62 }
63 if (urlRegEx.test(val)) {
64 return exports.TYPES.URL;
65 }
66 if (calcRegEx.test(val)) {
67 return exports.TYPES.CALC;
68 }
69 if (stringRegEx.test(val)) {
70 return exports.TYPES.STRING;
71 }
72 if (angleRegEx.test(val)) {
73 return exports.TYPES.ANGLE;
74 }
75 if (colorRegEx1.test(val)) {
76 return exports.TYPES.COLOR;
77 }
78
79 var res = colorRegEx2.exec(val);
80 var parts;
81 if (res !== null) {
82 parts = res[1].split(/\s*,\s*/);
83 if (parts.length !== 3) {
84 return undefined;
85 }
86 if (
87 parts.every(percentRegEx.test.bind(percentRegEx)) ||
88 parts.every(integerRegEx.test.bind(integerRegEx))
89 ) {
90 return exports.TYPES.COLOR;
91 }
92 return undefined;
93 }
94 res = colorRegEx3.exec(val);
95 if (res !== null) {
96 parts = res[1].split(/\s*,\s*/);
97 if (parts.length !== 4) {
98 return undefined;
99 }
100 if (
101 parts.slice(0, 3).every(percentRegEx.test.bind(percentRegEx)) ||
102 parts.slice(0, 3).every(integerRegEx.test.bind(integerRegEx))
103 ) {
104 if (numberRegEx.test(parts[3])) {
105 return exports.TYPES.COLOR;
106 }
107 }
108 return undefined;
109 }
110
111 if (colorRegEx4.test(val)) {
112 return exports.TYPES.COLOR;
113 }
114
115 // could still be a color, one of the standard keyword colors
116 val = val.toLowerCase();
117
118 if (namedColors.includes(val)) {
119 return exports.TYPES.COLOR;
120 }
121
122 switch (val) {
123 // the following are deprecated in CSS3
124 case 'activeborder':
125 case 'activecaption':
126 case 'appworkspace':
127 case 'background':
128 case 'buttonface':
129 case 'buttonhighlight':
130 case 'buttonshadow':
131 case 'buttontext':
132 case 'captiontext':
133 case 'graytext':
134 case 'highlight':
135 case 'highlighttext':
136 case 'inactiveborder':
137 case 'inactivecaption':
138 case 'inactivecaptiontext':
139 case 'infobackground':
140 case 'infotext':
141 case 'menu':
142 case 'menutext':
143 case 'scrollbar':
144 case 'threeddarkshadow':
145 case 'threedface':
146 case 'threedhighlight':
147 case 'threedlightshadow':
148 case 'threedshadow':
149 case 'window':
150 case 'windowframe':
151 case 'windowtext':
152 return exports.TYPES.COLOR;
153 default:
154 return exports.TYPES.KEYWORD;
155 }
156};
157
158exports.parseInteger = function parseInteger(val) {
159 var type = exports.valueType(val);
160 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
161 return val;
162 }
163 if (type !== exports.TYPES.INTEGER) {
164 return undefined;
165 }
166 return String(parseInt(val, 10));
167};
168
169exports.parseNumber = function parseNumber(val) {
170 var type = exports.valueType(val);
171 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
172 return val;
173 }
174 if (type !== exports.TYPES.NUMBER && type !== exports.TYPES.INTEGER) {
175 return undefined;
176 }
177 return String(parseFloat(val));
178};
179
180exports.parseLength = function parseLength(val) {
181 if (val === 0 || val === '0') {
182 return '0px';
183 }
184 var type = exports.valueType(val);
185 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
186 return val;
187 }
188 if (type !== exports.TYPES.LENGTH) {
189 return undefined;
190 }
191 return val;
192};
193
194exports.parsePercent = function parsePercent(val) {
195 if (val === 0 || val === '0') {
196 return '0%';
197 }
198 var type = exports.valueType(val);
199 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
200 return val;
201 }
202 if (type !== exports.TYPES.PERCENT) {
203 return undefined;
204 }
205 return val;
206};
207
208// either a length or a percent
209exports.parseMeasurement = function parseMeasurement(val) {
210 var type = exports.valueType(val);
211 if (type === exports.TYPES.CALC) {
212 return val;
213 }
214
215 var length = exports.parseLength(val);
216 if (length !== undefined) {
217 return length;
218 }
219 return exports.parsePercent(val);
220};
221
222exports.parseUrl = function parseUrl(val) {
223 var type = exports.valueType(val);
224 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
225 return val;
226 }
227 var res = urlRegEx.exec(val);
228 // does it match the regex?
229 if (!res) {
230 return undefined;
231 }
232 var str = res[1];
233 // if it starts with single or double quotes, does it end with the same?
234 if ((str[0] === '"' || str[0] === "'") && str[0] !== str[str.length - 1]) {
235 return undefined;
236 }
237 if (str[0] === '"' || str[0] === "'") {
238 str = str.substr(1, str.length - 2);
239 }
240
241 var i;
242 for (i = 0; i < str.length; i++) {
243 switch (str[i]) {
244 case '(':
245 case ')':
246 case ' ':
247 case '\t':
248 case '\n':
249 case "'":
250 case '"':
251 return undefined;
252 case '\\':
253 i++;
254 break;
255 }
256 }
257
258 return 'url(' + str + ')';
259};
260
261exports.parseString = function parseString(val) {
262 var type = exports.valueType(val);
263 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
264 return val;
265 }
266 if (type !== exports.TYPES.STRING) {
267 return undefined;
268 }
269 var i;
270 for (i = 1; i < val.length - 1; i++) {
271 switch (val[i]) {
272 case val[0]:
273 return undefined;
274 case '\\':
275 i++;
276 while (i < val.length - 1 && /[0-9A-Fa-f]/.test(val[i])) {
277 i++;
278 }
279 break;
280 }
281 }
282 if (i >= val.length) {
283 return undefined;
284 }
285 return val;
286};
287
288exports.parseColor = function parseColor(val) {
289 var type = exports.valueType(val);
290 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
291 return val;
292 }
293 var red,
294 green,
295 blue,
296 hue,
297 saturation,
298 lightness,
299 alpha = 1;
300 var parts;
301 var res = colorRegEx1.exec(val);
302 // is it #aaa, #ababab, #aaaa, #abababaa
303 if (res) {
304 var defaultHex = val.substr(1);
305 var hex = val.substr(1);
306 if (hex.length === 3 || hex.length === 4) {
307 hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
308
309 if (defaultHex.length === 4) {
310 hex = hex + defaultHex[3] + defaultHex[3];
311 }
312 }
313 red = parseInt(hex.substr(0, 2), 16);
314 green = parseInt(hex.substr(2, 2), 16);
315 blue = parseInt(hex.substr(4, 2), 16);
316 if (hex.length === 8) {
317 var hexAlpha = hex.substr(6, 2);
318 var hexAlphaToRgbaAlpha = Number((parseInt(hexAlpha, 16) / 255).toFixed(3));
319
320 return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + hexAlphaToRgbaAlpha + ')';
321 }
322 return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
323 }
324
325 res = colorRegEx2.exec(val);
326 if (res) {
327 parts = res[1].split(/\s*,\s*/);
328 if (parts.length !== 3) {
329 return undefined;
330 }
331 if (parts.every(percentRegEx.test.bind(percentRegEx))) {
332 red = Math.floor((parseFloat(parts[0].slice(0, -1)) * 255) / 100);
333 green = Math.floor((parseFloat(parts[1].slice(0, -1)) * 255) / 100);
334 blue = Math.floor((parseFloat(parts[2].slice(0, -1)) * 255) / 100);
335 } else if (parts.every(integerRegEx.test.bind(integerRegEx))) {
336 red = parseInt(parts[0], 10);
337 green = parseInt(parts[1], 10);
338 blue = parseInt(parts[2], 10);
339 } else {
340 return undefined;
341 }
342 red = Math.min(255, Math.max(0, red));
343 green = Math.min(255, Math.max(0, green));
344 blue = Math.min(255, Math.max(0, blue));
345 return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
346 }
347
348 res = colorRegEx3.exec(val);
349 if (res) {
350 parts = res[1].split(/\s*,\s*/);
351 if (parts.length !== 4) {
352 return undefined;
353 }
354 if (parts.slice(0, 3).every(percentRegEx.test.bind(percentRegEx))) {
355 red = Math.floor((parseFloat(parts[0].slice(0, -1)) * 255) / 100);
356 green = Math.floor((parseFloat(parts[1].slice(0, -1)) * 255) / 100);
357 blue = Math.floor((parseFloat(parts[2].slice(0, -1)) * 255) / 100);
358 alpha = parseFloat(parts[3]);
359 } else if (parts.slice(0, 3).every(integerRegEx.test.bind(integerRegEx))) {
360 red = parseInt(parts[0], 10);
361 green = parseInt(parts[1], 10);
362 blue = parseInt(parts[2], 10);
363 alpha = parseFloat(parts[3]);
364 } else {
365 return undefined;
366 }
367 if (isNaN(alpha)) {
368 alpha = 1;
369 }
370 red = Math.min(255, Math.max(0, red));
371 green = Math.min(255, Math.max(0, green));
372 blue = Math.min(255, Math.max(0, blue));
373 alpha = Math.min(1, Math.max(0, alpha));
374 if (alpha === 1) {
375 return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
376 }
377 return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
378 }
379
380 res = colorRegEx4.exec(val);
381 if (res) {
382 const [, _hue, _saturation, _lightness, _alphaString = ''] = res;
383 const _alpha = parseFloat(_alphaString.replace(',', '').trim());
384 if (!_hue || !_saturation || !_lightness) {
385 return undefined;
386 }
387 hue = parseFloat(_hue);
388 saturation = parseInt(_saturation, 10);
389 lightness = parseInt(_lightness, 10);
390 if (_alpha && numberRegEx.test(_alpha)) {
391 alpha = parseFloat(_alpha);
392 }
393
394 const [r, g, b] = hslToRgb(hue, saturation / 100, lightness / 100);
395 if (!_alphaString || alpha === 1) {
396 return 'rgb(' + r + ', ' + g + ', ' + b + ')';
397 }
398 return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
399 }
400
401 if (type === exports.TYPES.COLOR) {
402 return val;
403 }
404 return undefined;
405};
406
407exports.parseAngle = function parseAngle(val) {
408 var type = exports.valueType(val);
409 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
410 return val;
411 }
412 if (type !== exports.TYPES.ANGLE) {
413 return undefined;
414 }
415 var res = angleRegEx.exec(val);
416 var flt = parseFloat(res[1]);
417 if (res[2] === 'rad') {
418 flt *= 180 / Math.PI;
419 } else if (res[2] === 'grad') {
420 flt *= 360 / 400;
421 }
422
423 while (flt < 0) {
424 flt += 360;
425 }
426 while (flt > 360) {
427 flt -= 360;
428 }
429 return flt + 'deg';
430};
431
432exports.parseKeyword = function parseKeyword(val, valid_keywords) {
433 var type = exports.valueType(val);
434 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
435 return val;
436 }
437 if (type !== exports.TYPES.KEYWORD) {
438 return undefined;
439 }
440 val = val.toString().toLowerCase();
441 var i;
442 for (i = 0; i < valid_keywords.length; i++) {
443 if (valid_keywords[i].toLowerCase() === val) {
444 return valid_keywords[i];
445 }
446 }
447 return undefined;
448};
449
450// utility to translate from border-width to borderWidth
451var dashedToCamelCase = function(dashed) {
452 var i;
453 var camel = '';
454 var nextCap = false;
455 for (i = 0; i < dashed.length; i++) {
456 if (dashed[i] !== '-') {
457 camel += nextCap ? dashed[i].toUpperCase() : dashed[i];
458 nextCap = false;
459 } else {
460 nextCap = true;
461 }
462 }
463 return camel;
464};
465exports.dashedToCamelCase = dashedToCamelCase;
466
467var is_space = /\s/;
468var opening_deliminators = ['"', "'", '('];
469var closing_deliminators = ['"', "'", ')'];
470// this splits on whitespace, but keeps quoted and parened parts together
471var getParts = function(str) {
472 var deliminator_stack = [];
473 var length = str.length;
474 var i;
475 var parts = [];
476 var current_part = '';
477 var opening_index;
478 var closing_index;
479 for (i = 0; i < length; i++) {
480 opening_index = opening_deliminators.indexOf(str[i]);
481 closing_index = closing_deliminators.indexOf(str[i]);
482 if (is_space.test(str[i])) {
483 if (deliminator_stack.length === 0) {
484 if (current_part !== '') {
485 parts.push(current_part);
486 }
487 current_part = '';
488 } else {
489 current_part += str[i];
490 }
491 } else {
492 if (str[i] === '\\') {
493 i++;
494 current_part += str[i];
495 } else {
496 current_part += str[i];
497 if (
498 closing_index !== -1 &&
499 closing_index === deliminator_stack[deliminator_stack.length - 1]
500 ) {
501 deliminator_stack.pop();
502 } else if (opening_index !== -1) {
503 deliminator_stack.push(opening_index);
504 }
505 }
506 }
507 }
508 if (current_part !== '') {
509 parts.push(current_part);
510 }
511 return parts;
512};
513
514/*
515 * this either returns undefined meaning that it isn't valid
516 * or returns an object where the keys are dashed short
517 * hand properties and the values are the values to set
518 * on them
519 */
520exports.shorthandParser = function parse(v, shorthand_for) {
521 var obj = {};
522 var type = exports.valueType(v);
523 if (type === exports.TYPES.NULL_OR_EMPTY_STR) {
524 Object.keys(shorthand_for).forEach(function(property) {
525 obj[property] = '';
526 });
527 return obj;
528 }
529
530 if (typeof v === 'number') {
531 v = v.toString();
532 }
533
534 if (typeof v !== 'string') {
535 return undefined;
536 }
537
538 if (v.toLowerCase() === 'inherit') {
539 return {};
540 }
541 var parts = getParts(v);
542 var valid = true;
543 parts.forEach(function(part, i) {
544 var part_valid = false;
545 Object.keys(shorthand_for).forEach(function(property) {
546 if (shorthand_for[property].isValid(part, i)) {
547 part_valid = true;
548 obj[property] = part;
549 }
550 });
551 valid = valid && part_valid;
552 });
553 if (!valid) {
554 return undefined;
555 }
556 return obj;
557};
558
559exports.shorthandSetter = function(property, shorthand_for) {
560 return function(v) {
561 var obj = exports.shorthandParser(v, shorthand_for);
562 if (obj === undefined) {
563 return;
564 }
565 //console.log('shorthandSetter for:', property, 'obj:', obj);
566 Object.keys(obj).forEach(function(subprop) {
567 // in case subprop is an implicit property, this will clear
568 // *its* subpropertiesX
569 var camel = dashedToCamelCase(subprop);
570 this[camel] = obj[subprop];
571 // in case it gets translated into something else (0 -> 0px)
572 obj[subprop] = this[camel];
573 this.removeProperty(subprop);
574 // don't add in empty properties
575 if (obj[subprop] !== '') {
576 this._values[subprop] = obj[subprop];
577 }
578 }, this);
579 Object.keys(shorthand_for).forEach(function(subprop) {
580 if (!obj.hasOwnProperty(subprop)) {
581 this.removeProperty(subprop);
582 delete this._values[subprop];
583 }
584 }, this);
585 // in case the value is something like 'none' that removes all values,
586 // check that the generated one is not empty, first remove the property
587 // if it already exists, then call the shorthandGetter, if it's an empty
588 // string, don't set the property
589 this.removeProperty(property);
590 var calculated = exports.shorthandGetter(property, shorthand_for).call(this);
591 if (calculated !== '') {
592 this._setProperty(property, calculated);
593 }
594 };
595};
596
597exports.shorthandGetter = function(property, shorthand_for) {
598 return function() {
599 if (this._values[property] !== undefined) {
600 return this.getPropertyValue(property);
601 }
602 return Object.keys(shorthand_for)
603 .map(function(subprop) {
604 return this.getPropertyValue(subprop);
605 }, this)
606 .filter(function(value) {
607 return value !== '';
608 })
609 .join(' ');
610 };
611};
612
613// isValid(){1,4} | inherit
614// if one, it applies to all
615// if two, the first applies to the top and bottom, and the second to left and right
616// if three, the first applies to the top, the second to left and right, the third bottom
617// if four, top, right, bottom, left
618exports.implicitSetter = function(property_before, property_after, isValid, parser) {
619 property_after = property_after || '';
620 if (property_after !== '') {
621 property_after = '-' + property_after;
622 }
623 var part_names = ['top', 'right', 'bottom', 'left'];
624
625 return function(v) {
626 if (typeof v === 'number') {
627 v = v.toString();
628 }
629 if (typeof v !== 'string') {
630 return undefined;
631 }
632 var parts;
633 if (v.toLowerCase() === 'inherit' || v === '') {
634 parts = [v];
635 } else {
636 parts = getParts(v);
637 }
638 if (parts.length < 1 || parts.length > 4) {
639 return undefined;
640 }
641
642 if (!parts.every(isValid)) {
643 return undefined;
644 }
645
646 parts = parts.map(function(part) {
647 return parser(part);
648 });
649 this._setProperty(property_before + property_after, parts.join(' '));
650 if (parts.length === 1) {
651 parts[1] = parts[0];
652 }
653 if (parts.length === 2) {
654 parts[2] = parts[0];
655 }
656 if (parts.length === 3) {
657 parts[3] = parts[1];
658 }
659
660 for (var i = 0; i < 4; i++) {
661 var property = property_before + '-' + part_names[i] + property_after;
662 this.removeProperty(property);
663 if (parts[i] !== '') {
664 this._values[property] = parts[i];
665 }
666 }
667 return v;
668 };
669};
670
671//
672// Companion to implicitSetter, but for the individual parts.
673// This sets the individual value, and checks to see if all four
674// sub-parts are set. If so, it sets the shorthand version and removes
675// the individual parts from the cssText.
676//
677exports.subImplicitSetter = function(prefix, part, isValid, parser) {
678 var property = prefix + '-' + part;
679 var subparts = [prefix + '-top', prefix + '-right', prefix + '-bottom', prefix + '-left'];
680
681 return function(v) {
682 if (typeof v === 'number') {
683 v = v.toString();
684 }
685 if (typeof v !== 'string') {
686 return undefined;
687 }
688 if (!isValid(v)) {
689 return undefined;
690 }
691 v = parser(v);
692 this._setProperty(property, v);
693 var parts = [];
694 for (var i = 0; i < 4; i++) {
695 if (this._values[subparts[i]] == null || this._values[subparts[i]] === '') {
696 break;
697 }
698 parts.push(this._values[subparts[i]]);
699 }
700 if (parts.length === 4) {
701 for (i = 0; i < 4; i++) {
702 this.removeProperty(subparts[i]);
703 this._values[subparts[i]] = parts[i];
704 }
705 this._setProperty(prefix, parts.join(' '));
706 }
707 return v;
708 };
709};
710
711var camel_to_dashed = /[A-Z]/g;
712var first_segment = /^\([^-]\)-/;
713var vendor_prefixes = ['o', 'moz', 'ms', 'webkit'];
714exports.camelToDashed = function(camel_case) {
715 var match;
716 var dashed = camel_case.replace(camel_to_dashed, '-$&').toLowerCase();
717 match = dashed.match(first_segment);
718 if (match && vendor_prefixes.indexOf(match[1]) !== -1) {
719 dashed = '-' + dashed;
720 }
721 return dashed;
722};
Note: See TracBrowser for help on using the repository browser.