@react-pdf/stylesheet 4.1.2 → 4.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/index.cjs.js +47 -125
- package/lib/index.es.js +47 -125
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @react-pdf/stylesheet
|
|
2
2
|
|
|
3
|
+
## 4.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#2205](https://github.com/diegomura/react-pdf/pull/2205) [`9a5e0be`](https://github.com/diegomura/react-pdf/commit/9a5e0befb89756db07ce053192a136df9d4ba905) Thanks [@jeetiss](https://github.com/jeetiss)! - update babel
|
|
8
|
+
|
|
3
9
|
## 4.1.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/lib/index.cjs.js
CHANGED
|
@@ -20,20 +20,18 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
|
20
20
|
var matchMedia__default = /*#__PURE__*/_interopDefaultLegacy(matchMedia);
|
|
21
21
|
|
|
22
22
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
|
|
23
|
+
|
|
23
24
|
// TODO: change flex defaults to [0, 1, 'auto'] as in spec in next major release
|
|
24
25
|
var flexDefaults = [1, 1, 0];
|
|
25
26
|
var flexAuto = [1, 1, 'auto'];
|
|
26
|
-
|
|
27
27
|
var expandFlex = function expandFlex(key, value) {
|
|
28
28
|
var defaults = flexDefaults;
|
|
29
29
|
var matches = [];
|
|
30
|
-
|
|
31
30
|
if (value === 'auto') {
|
|
32
31
|
defaults = flexAuto;
|
|
33
32
|
} else {
|
|
34
33
|
matches = ("" + value).split(' ');
|
|
35
34
|
}
|
|
36
|
-
|
|
37
35
|
var flexGrow = matches[0] || defaults[0];
|
|
38
36
|
var flexShrink = matches[1] || defaults[1];
|
|
39
37
|
var flexBasis = matches[2] || defaults[2];
|
|
@@ -46,40 +44,36 @@ var expandFlex = function expandFlex(key, value) {
|
|
|
46
44
|
|
|
47
45
|
/* eslint-disable no-plusplus */
|
|
48
46
|
var BOX_MODEL_UNITS = 'px,in,mm,cm,pt,%,vw,vh';
|
|
49
|
-
|
|
50
47
|
var logError = function logError(style, value) {
|
|
51
48
|
console.error("\n @react-pdf/stylesheet parsing error:\n\n " + style + ": " + value + ",\n " + ' '.repeat(style.length + 2) + "^\n Unsupported " + style + " value format\n ");
|
|
52
49
|
};
|
|
53
|
-
|
|
54
50
|
var expandBoxModel = function expandBoxModel(_temp) {
|
|
55
51
|
var _ref = _temp === void 0 ? {} : _temp,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
52
|
+
expandsTo = _ref.expandsTo,
|
|
53
|
+
_ref$maxValues = _ref.maxValues,
|
|
54
|
+
maxValues = _ref$maxValues === void 0 ? 1 : _ref$maxValues,
|
|
55
|
+
_ref$autoSupported = _ref.autoSupported,
|
|
56
|
+
autoSupported = _ref$autoSupported === void 0 ? false : _ref$autoSupported;
|
|
62
57
|
return function (model, value) {
|
|
63
58
|
var _ref2;
|
|
64
|
-
|
|
65
59
|
var nodes = parse__default["default"]("" + value);
|
|
66
60
|
var parts = [];
|
|
67
|
-
|
|
68
61
|
for (var i = 0; i < nodes.length; i++) {
|
|
69
|
-
var node = nodes[i];
|
|
70
|
-
// `,`, `/` or strings that unsupported by margin and padding
|
|
62
|
+
var node = nodes[i];
|
|
71
63
|
|
|
64
|
+
// value contains `calc`, `url` or other css function
|
|
65
|
+
// `,`, `/` or strings that unsupported by margin and padding
|
|
72
66
|
if (node.type === 'function' || node.type === 'string' || node.type === 'div') {
|
|
73
67
|
logError(model, value);
|
|
74
68
|
return {};
|
|
75
69
|
}
|
|
76
|
-
|
|
77
70
|
if (node.type === 'word') {
|
|
78
71
|
if (node.value === 'auto' && autoSupported) {
|
|
79
72
|
parts.push(node.value);
|
|
80
73
|
} else {
|
|
81
|
-
var result = parseUnit__default["default"](node.value);
|
|
74
|
+
var result = parseUnit__default["default"](node.value);
|
|
82
75
|
|
|
76
|
+
// when unit isn't specified this condition is true
|
|
83
77
|
if (result && BOX_MODEL_UNITS.includes(result.unit)) {
|
|
84
78
|
parts.push(node.value);
|
|
85
79
|
} else {
|
|
@@ -88,16 +82,14 @@ var expandBoxModel = function expandBoxModel(_temp) {
|
|
|
88
82
|
}
|
|
89
83
|
}
|
|
90
84
|
}
|
|
91
|
-
}
|
|
92
|
-
|
|
85
|
+
}
|
|
93
86
|
|
|
87
|
+
// checks that we have enough parsed values
|
|
94
88
|
if (parts.length > maxValues) {
|
|
95
89
|
logError(model, value);
|
|
96
90
|
return {};
|
|
97
91
|
}
|
|
98
|
-
|
|
99
92
|
var first = parts[0];
|
|
100
|
-
|
|
101
93
|
if (expandsTo) {
|
|
102
94
|
var second = parts[1] || parts[0];
|
|
103
95
|
var third = parts[2] || parts[0];
|
|
@@ -109,7 +101,6 @@ var expandBoxModel = function expandBoxModel(_temp) {
|
|
|
109
101
|
fourth: fourth
|
|
110
102
|
});
|
|
111
103
|
}
|
|
112
|
-
|
|
113
104
|
return _ref2 = {}, _ref2[model] = first, _ref2;
|
|
114
105
|
};
|
|
115
106
|
};
|
|
@@ -117,9 +108,9 @@ var expandBoxModel = function expandBoxModel(_temp) {
|
|
|
117
108
|
var processMargin = expandBoxModel({
|
|
118
109
|
expandsTo: function expandsTo(_ref) {
|
|
119
110
|
var first = _ref.first,
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
111
|
+
second = _ref.second,
|
|
112
|
+
third = _ref.third,
|
|
113
|
+
fourth = _ref.fourth;
|
|
123
114
|
return {
|
|
124
115
|
marginTop: first,
|
|
125
116
|
marginRight: second,
|
|
@@ -133,7 +124,7 @@ var processMargin = expandBoxModel({
|
|
|
133
124
|
var processMarginVertical = expandBoxModel({
|
|
134
125
|
expandsTo: function expandsTo(_ref2) {
|
|
135
126
|
var first = _ref2.first,
|
|
136
|
-
|
|
127
|
+
second = _ref2.second;
|
|
137
128
|
return {
|
|
138
129
|
marginTop: first,
|
|
139
130
|
marginBottom: second
|
|
@@ -145,7 +136,7 @@ var processMarginVertical = expandBoxModel({
|
|
|
145
136
|
var processMarginHorizontal = expandBoxModel({
|
|
146
137
|
expandsTo: function expandsTo(_ref3) {
|
|
147
138
|
var first = _ref3.first,
|
|
148
|
-
|
|
139
|
+
second = _ref3.second;
|
|
149
140
|
return {
|
|
150
141
|
marginRight: first,
|
|
151
142
|
marginLeft: second
|
|
@@ -159,25 +150,19 @@ var processMarginSingle = expandBoxModel({
|
|
|
159
150
|
});
|
|
160
151
|
|
|
161
152
|
var BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
|
|
162
|
-
|
|
163
153
|
var matchBorderShorthand = function matchBorderShorthand(value) {
|
|
164
154
|
return value.match(BORDER_SHORTHAND_REGEX) || [];
|
|
165
155
|
};
|
|
166
|
-
|
|
167
156
|
var expandBorders = function expandBorders(key, value) {
|
|
168
157
|
var match = matchBorderShorthand("" + value);
|
|
169
|
-
|
|
170
158
|
if (match) {
|
|
171
159
|
var color = match[5] || value;
|
|
172
160
|
var style = match[4] || value;
|
|
173
161
|
var width = match[1] || value;
|
|
174
|
-
|
|
175
162
|
if (key.match(/(Top|Right|Bottom|Left)$/)) {
|
|
176
163
|
var _ref;
|
|
177
|
-
|
|
178
164
|
return _ref = {}, _ref[key + "Color"] = color, _ref[key + "Style"] = style, _ref[key + "Width"] = width, _ref;
|
|
179
165
|
}
|
|
180
|
-
|
|
181
166
|
if (key.match(/Color$/)) {
|
|
182
167
|
return {
|
|
183
168
|
borderTopColor: color,
|
|
@@ -186,7 +171,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
186
171
|
borderLeftColor: color
|
|
187
172
|
};
|
|
188
173
|
}
|
|
189
|
-
|
|
190
174
|
if (key.match(/Style$/)) {
|
|
191
175
|
return {
|
|
192
176
|
borderTopStyle: style,
|
|
@@ -195,7 +179,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
195
179
|
borderLeftStyle: style
|
|
196
180
|
};
|
|
197
181
|
}
|
|
198
|
-
|
|
199
182
|
if (key.match(/Width$/)) {
|
|
200
183
|
return {
|
|
201
184
|
borderTopWidth: width,
|
|
@@ -204,7 +187,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
204
187
|
borderLeftWidth: width
|
|
205
188
|
};
|
|
206
189
|
}
|
|
207
|
-
|
|
208
190
|
if (key.match(/Radius$/)) {
|
|
209
191
|
return {
|
|
210
192
|
borderTopLeftRadius: value,
|
|
@@ -213,7 +195,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
213
195
|
borderBottomLeftRadius: value
|
|
214
196
|
};
|
|
215
197
|
}
|
|
216
|
-
|
|
217
198
|
return {
|
|
218
199
|
borderTopColor: color,
|
|
219
200
|
borderTopStyle: style,
|
|
@@ -229,16 +210,15 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
229
210
|
borderLeftWidth: width
|
|
230
211
|
};
|
|
231
212
|
}
|
|
232
|
-
|
|
233
213
|
return value;
|
|
234
214
|
};
|
|
235
215
|
|
|
236
216
|
var processPadding = expandBoxModel({
|
|
237
217
|
expandsTo: function expandsTo(_ref) {
|
|
238
218
|
var first = _ref.first,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
219
|
+
second = _ref.second,
|
|
220
|
+
third = _ref.third,
|
|
221
|
+
fourth = _ref.fourth;
|
|
242
222
|
return {
|
|
243
223
|
paddingTop: first,
|
|
244
224
|
paddingRight: second,
|
|
@@ -251,7 +231,7 @@ var processPadding = expandBoxModel({
|
|
|
251
231
|
var processPaddingVertical = expandBoxModel({
|
|
252
232
|
expandsTo: function expandsTo(_ref2) {
|
|
253
233
|
var first = _ref2.first,
|
|
254
|
-
|
|
234
|
+
second = _ref2.second;
|
|
255
235
|
return {
|
|
256
236
|
paddingTop: first,
|
|
257
237
|
paddingBottom: second
|
|
@@ -262,7 +242,7 @@ var processPaddingVertical = expandBoxModel({
|
|
|
262
242
|
var processPaddingHorizontal = expandBoxModel({
|
|
263
243
|
expandsTo: function expandsTo(_ref3) {
|
|
264
244
|
var first = _ref3.first,
|
|
265
|
-
|
|
245
|
+
second = _ref3.second;
|
|
266
246
|
return {
|
|
267
247
|
paddingRight: first,
|
|
268
248
|
paddingLeft: second
|
|
@@ -284,20 +264,18 @@ var Y_AXIS_SHORTHANDS = {
|
|
|
284
264
|
top: true,
|
|
285
265
|
bottom: true
|
|
286
266
|
};
|
|
287
|
-
|
|
288
267
|
var sortTransformOriginPair = function sortTransformOriginPair(a, b) {
|
|
289
268
|
if (Y_AXIS_SHORTHANDS[a]) return 1;
|
|
290
269
|
if (Y_AXIS_SHORTHANDS[b]) return -1;
|
|
291
270
|
return 0;
|
|
292
271
|
};
|
|
293
|
-
|
|
294
272
|
var getTransformOriginPair = function getTransformOriginPair(values) {
|
|
295
273
|
if (!values || values.length === 0) return ['center', 'center'];
|
|
296
274
|
var pair = values.length === 1 ? [values[0], 'center'] : values;
|
|
297
275
|
return pair.sort(sortTransformOriginPair);
|
|
298
|
-
};
|
|
299
|
-
|
|
276
|
+
};
|
|
300
277
|
|
|
278
|
+
// Transforms shorthand transformOrigin values
|
|
301
279
|
var expandTransformOrigin = function expandTransformOrigin(key, value) {
|
|
302
280
|
var match = ("" + value).split(' ');
|
|
303
281
|
var pair = getTransformOriginPair(match);
|
|
@@ -344,6 +322,7 @@ var shorthands = {
|
|
|
344
322
|
objectPosition: expandObjectPosition,
|
|
345
323
|
transformOrigin: expandTransformOrigin
|
|
346
324
|
};
|
|
325
|
+
|
|
347
326
|
/**
|
|
348
327
|
* Transforms style key-value
|
|
349
328
|
*
|
|
@@ -351,38 +330,32 @@ var shorthands = {
|
|
|
351
330
|
* @param {String} value style value
|
|
352
331
|
* @returns {String | Number} transformed style values
|
|
353
332
|
*/
|
|
354
|
-
|
|
355
333
|
var expandStyle = function expandStyle(key, value) {
|
|
356
334
|
var _ref;
|
|
357
|
-
|
|
358
335
|
return shorthands[key] ? shorthands[key](key, value) : (_ref = {}, _ref[key] = value, _ref);
|
|
359
336
|
};
|
|
337
|
+
|
|
360
338
|
/**
|
|
361
339
|
* Expand the shorthand properties.
|
|
362
340
|
*
|
|
363
341
|
* @param { Object } style object
|
|
364
342
|
* @returns { Object } expanded style object
|
|
365
343
|
*/
|
|
366
|
-
|
|
367
|
-
|
|
368
344
|
var expand = function expand(style) {
|
|
369
345
|
if (!style) return style;
|
|
370
346
|
var propsArray = Object.keys(style);
|
|
371
347
|
var resolvedStyle = {};
|
|
372
|
-
|
|
373
348
|
for (var i = 0; i < propsArray.length; i += 1) {
|
|
374
349
|
var key = propsArray[i];
|
|
375
350
|
var value = style[key];
|
|
376
351
|
var extended = expandStyle(key, value);
|
|
377
352
|
var keys = Object.keys(extended);
|
|
378
|
-
|
|
379
353
|
for (var j = 0; j < keys.length; j += 1) {
|
|
380
354
|
var propName = keys[j];
|
|
381
355
|
var propValue = extended[propName];
|
|
382
356
|
resolvedStyle[propName] = propValue;
|
|
383
357
|
}
|
|
384
358
|
}
|
|
385
|
-
|
|
386
359
|
return resolvedStyle;
|
|
387
360
|
};
|
|
388
361
|
|
|
@@ -392,18 +365,16 @@ var expand = function expand(style) {
|
|
|
392
365
|
* @param {Array} array
|
|
393
366
|
* @returns {Array} array without nils
|
|
394
367
|
*/
|
|
395
|
-
|
|
396
368
|
var compact = function compact(array) {
|
|
397
369
|
return array.filter(Boolean);
|
|
398
370
|
};
|
|
371
|
+
|
|
399
372
|
/**
|
|
400
373
|
* Merges style objects array
|
|
401
374
|
*
|
|
402
375
|
* @param {Array} style objects array
|
|
403
376
|
* @returns {Object} merged style object
|
|
404
377
|
*/
|
|
405
|
-
|
|
406
|
-
|
|
407
378
|
var mergeStyles = function mergeStyles(styles) {
|
|
408
379
|
return styles.reduce(function (acc, style) {
|
|
409
380
|
var s = Array.isArray(style) ? flatten(style) : style;
|
|
@@ -415,14 +386,13 @@ var mergeStyles = function mergeStyles(styles) {
|
|
|
415
386
|
return acc;
|
|
416
387
|
}, {});
|
|
417
388
|
};
|
|
389
|
+
|
|
418
390
|
/**
|
|
419
391
|
* Flattens an array of style objects, into one aggregated style object.
|
|
420
392
|
*
|
|
421
393
|
* @param {Array} style objects array
|
|
422
394
|
* @returns {Object} flatted style object
|
|
423
395
|
*/
|
|
424
|
-
|
|
425
|
-
|
|
426
396
|
var flatten = fns.compose(mergeStyles, compact, fns.castArray);
|
|
427
397
|
|
|
428
398
|
/**
|
|
@@ -441,6 +411,7 @@ var parseValue = function parseValue(value) {
|
|
|
441
411
|
unit: undefined
|
|
442
412
|
};
|
|
443
413
|
};
|
|
414
|
+
|
|
444
415
|
/**
|
|
445
416
|
* Transform given scalar value
|
|
446
417
|
*
|
|
@@ -448,30 +419,22 @@ var parseValue = function parseValue(value) {
|
|
|
448
419
|
* @param {String} styles value
|
|
449
420
|
* @returns {Object} transformed value
|
|
450
421
|
*/
|
|
451
|
-
|
|
452
|
-
|
|
453
422
|
var transformUnit = function transformUnit(container, value) {
|
|
454
423
|
var scalar = parseValue(value);
|
|
455
424
|
var dpi = container.dpi || 72;
|
|
456
425
|
var mmFactor = 1 / 25.4 * dpi;
|
|
457
426
|
var cmFactor = 1 / 2.54 * dpi;
|
|
458
|
-
|
|
459
427
|
switch (scalar.unit) {
|
|
460
428
|
case 'in':
|
|
461
429
|
return scalar.value * dpi;
|
|
462
|
-
|
|
463
430
|
case 'mm':
|
|
464
431
|
return scalar.value * mmFactor;
|
|
465
|
-
|
|
466
432
|
case 'cm':
|
|
467
433
|
return scalar.value * cmFactor;
|
|
468
|
-
|
|
469
434
|
case 'vh':
|
|
470
435
|
return scalar.value * (container.height / 100);
|
|
471
|
-
|
|
472
436
|
case 'vw':
|
|
473
437
|
return scalar.value * (container.width / 100);
|
|
474
|
-
|
|
475
438
|
default:
|
|
476
439
|
return scalar.value;
|
|
477
440
|
}
|
|
@@ -480,43 +443,39 @@ var transformUnit = function transformUnit(container, value) {
|
|
|
480
443
|
var isRgb = function isRgb(value) {
|
|
481
444
|
return /rgba?/g.test(value);
|
|
482
445
|
};
|
|
483
|
-
|
|
484
446
|
var isHsl = function isHsl(value) {
|
|
485
447
|
return /hsla?/g.test(value);
|
|
486
448
|
};
|
|
449
|
+
|
|
487
450
|
/**
|
|
488
451
|
* Transform rgb color to hexa
|
|
489
452
|
*
|
|
490
453
|
* @param {String} styles value
|
|
491
454
|
* @returns {Object} transformed value
|
|
492
455
|
*/
|
|
493
|
-
|
|
494
|
-
|
|
495
456
|
var parseRgb = function parseRgb(value) {
|
|
496
457
|
var rgb = colorString__default["default"].get.rgb(value);
|
|
497
458
|
return colorString__default["default"].to.hex(rgb);
|
|
498
459
|
};
|
|
460
|
+
|
|
499
461
|
/**
|
|
500
462
|
* Transform Hsl color to hexa
|
|
501
463
|
*
|
|
502
464
|
* @param {String} styles value
|
|
503
465
|
* @returns {Object} transformed value
|
|
504
466
|
*/
|
|
505
|
-
|
|
506
|
-
|
|
507
467
|
var parseHsl = function parseHsl(value) {
|
|
508
468
|
var hsl = colorString__default["default"].get.hsl(value).map(Math.round);
|
|
509
469
|
var hex = hlsToHex__default["default"].apply(void 0, hsl);
|
|
510
470
|
return hex.toUpperCase();
|
|
511
471
|
};
|
|
472
|
+
|
|
512
473
|
/**
|
|
513
474
|
* Transform given color to hexa
|
|
514
475
|
*
|
|
515
476
|
* @param {String} styles value
|
|
516
477
|
* @returns {Object} transformed value
|
|
517
478
|
*/
|
|
518
|
-
|
|
519
|
-
|
|
520
479
|
var transformColor = function transformColor(value) {
|
|
521
480
|
if (isRgb(value)) return parseRgb(value);
|
|
522
481
|
if (isHsl(value)) return parseHsl(value);
|
|
@@ -524,22 +483,19 @@ var transformColor = function transformColor(value) {
|
|
|
524
483
|
};
|
|
525
484
|
|
|
526
485
|
var parse = function parse(transformString) {
|
|
527
|
-
var transforms = transformString.trim().split(/\) |\)/);
|
|
486
|
+
var transforms = transformString.trim().split(/\) |\)/);
|
|
528
487
|
|
|
488
|
+
// Handle "initial", "inherit", "unset".
|
|
529
489
|
if (transforms.length === 1) {
|
|
530
490
|
return [[transforms[0], true]];
|
|
531
491
|
}
|
|
532
|
-
|
|
533
492
|
var parsed = [];
|
|
534
|
-
|
|
535
493
|
for (var i = 0; i < transforms.length; i += 1) {
|
|
536
494
|
var transform = transforms[i];
|
|
537
|
-
|
|
538
495
|
if (transform) {
|
|
539
496
|
var _transform$split = transform.split('('),
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
497
|
+
name = _transform$split[0],
|
|
498
|
+
rawValue = _transform$split[1];
|
|
543
499
|
var splitChar = rawValue.indexOf(',') >= 0 ? ',' : ' ';
|
|
544
500
|
var value = rawValue.split(splitChar).map(function (val) {
|
|
545
501
|
return val.trim();
|
|
@@ -550,41 +506,33 @@ var parse = function parse(transformString) {
|
|
|
550
506
|
});
|
|
551
507
|
}
|
|
552
508
|
}
|
|
553
|
-
|
|
554
509
|
return parsed;
|
|
555
510
|
};
|
|
556
|
-
|
|
557
511
|
var parseAngle = function parseAngle(value) {
|
|
558
512
|
var unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
|
|
559
|
-
|
|
560
513
|
var _unitsRegexp$exec = unitsRegexp.exec(value),
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
514
|
+
angle = _unitsRegexp$exec[1],
|
|
515
|
+
unit = _unitsRegexp$exec[2];
|
|
564
516
|
var number = Number.parseFloat(angle);
|
|
565
517
|
return unit === 'rad' ? number * 180 / Math.PI : number;
|
|
566
518
|
};
|
|
567
|
-
|
|
568
519
|
var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
569
520
|
var operation = _ref.operation,
|
|
570
|
-
|
|
571
|
-
|
|
521
|
+
value = _ref.value;
|
|
572
522
|
switch (operation) {
|
|
573
523
|
case 'scale':
|
|
574
524
|
{
|
|
575
525
|
var _value$map = value.map(function (num) {
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
526
|
+
return Number.parseFloat(num);
|
|
527
|
+
}),
|
|
528
|
+
scaleX = _value$map[0],
|
|
529
|
+
_value$map$ = _value$map[1],
|
|
530
|
+
scaleY = _value$map$ === void 0 ? scaleX : _value$map$;
|
|
582
531
|
return {
|
|
583
532
|
operation: 'scale',
|
|
584
533
|
value: [scaleX, scaleY]
|
|
585
534
|
};
|
|
586
535
|
}
|
|
587
|
-
|
|
588
536
|
case 'scaleX':
|
|
589
537
|
{
|
|
590
538
|
return {
|
|
@@ -592,7 +540,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
592
540
|
value: [Number.parseFloat(value), 1]
|
|
593
541
|
};
|
|
594
542
|
}
|
|
595
|
-
|
|
596
543
|
case 'scaleY':
|
|
597
544
|
{
|
|
598
545
|
return {
|
|
@@ -600,7 +547,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
600
547
|
value: [1, Number.parseFloat(value)]
|
|
601
548
|
};
|
|
602
549
|
}
|
|
603
|
-
|
|
604
550
|
case 'rotate':
|
|
605
551
|
{
|
|
606
552
|
return {
|
|
@@ -608,7 +554,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
608
554
|
value: [parseAngle(value)]
|
|
609
555
|
};
|
|
610
556
|
}
|
|
611
|
-
|
|
612
557
|
case 'translate':
|
|
613
558
|
{
|
|
614
559
|
return {
|
|
@@ -618,7 +563,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
618
563
|
})
|
|
619
564
|
};
|
|
620
565
|
}
|
|
621
|
-
|
|
622
566
|
case 'translateX':
|
|
623
567
|
{
|
|
624
568
|
return {
|
|
@@ -626,7 +570,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
626
570
|
value: [Number.parseFloat(value), 0]
|
|
627
571
|
};
|
|
628
572
|
}
|
|
629
|
-
|
|
630
573
|
case 'translateY':
|
|
631
574
|
{
|
|
632
575
|
return {
|
|
@@ -634,7 +577,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
634
577
|
value: [0, Number.parseFloat(value)]
|
|
635
578
|
};
|
|
636
579
|
}
|
|
637
|
-
|
|
638
580
|
case 'skew':
|
|
639
581
|
{
|
|
640
582
|
return {
|
|
@@ -642,7 +584,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
642
584
|
value: value.map(parseAngle)
|
|
643
585
|
};
|
|
644
586
|
}
|
|
645
|
-
|
|
646
587
|
case 'skewX':
|
|
647
588
|
{
|
|
648
589
|
return {
|
|
@@ -650,7 +591,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
650
591
|
value: [parseAngle(value), 0]
|
|
651
592
|
};
|
|
652
593
|
}
|
|
653
|
-
|
|
654
594
|
case 'skewY':
|
|
655
595
|
{
|
|
656
596
|
return {
|
|
@@ -658,7 +598,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
658
598
|
value: [0, parseAngle(value)]
|
|
659
599
|
};
|
|
660
600
|
}
|
|
661
|
-
|
|
662
601
|
default:
|
|
663
602
|
{
|
|
664
603
|
return {
|
|
@@ -670,13 +609,11 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
670
609
|
}
|
|
671
610
|
}
|
|
672
611
|
};
|
|
673
|
-
|
|
674
612
|
var normalize = function normalize(operations) {
|
|
675
613
|
return operations.map(function (operation) {
|
|
676
614
|
return normalizeTransformOperation(operation);
|
|
677
615
|
});
|
|
678
616
|
};
|
|
679
|
-
|
|
680
617
|
var processTransform = function processTransform(value) {
|
|
681
618
|
if (typeof value !== 'string') return value;
|
|
682
619
|
return normalize(parse(value));
|
|
@@ -698,7 +635,6 @@ var FONT_WEIGHTS = {
|
|
|
698
635
|
heavy: 900,
|
|
699
636
|
black: 900
|
|
700
637
|
};
|
|
701
|
-
|
|
702
638
|
var processFontWeight = function processFontWeight(value) {
|
|
703
639
|
if (!value) return FONT_WEIGHTS.normal;
|
|
704
640
|
if (typeof value === 'number') return value;
|
|
@@ -710,7 +646,6 @@ var processFontWeight = function processFontWeight(value) {
|
|
|
710
646
|
var matchNumber = function matchNumber(value) {
|
|
711
647
|
return typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
|
|
712
648
|
};
|
|
713
|
-
|
|
714
649
|
var castFloat = function castFloat(value) {
|
|
715
650
|
if (typeof value !== 'string') return value;
|
|
716
651
|
if (matchNumber(value)) return parseFloat(value, 10);
|
|
@@ -722,14 +657,11 @@ var offsetKeyword = function offsetKeyword(value) {
|
|
|
722
657
|
case 'top':
|
|
723
658
|
case 'left':
|
|
724
659
|
return '0%';
|
|
725
|
-
|
|
726
660
|
case 'right':
|
|
727
661
|
case 'bottom':
|
|
728
662
|
return '100%';
|
|
729
|
-
|
|
730
663
|
case 'center':
|
|
731
664
|
return '50%';
|
|
732
|
-
|
|
733
665
|
default:
|
|
734
666
|
return null;
|
|
735
667
|
}
|
|
@@ -751,32 +683,28 @@ var handlers = {
|
|
|
751
683
|
transformOriginX: transformTransformOrigin,
|
|
752
684
|
transformOriginY: transformTransformOrigin
|
|
753
685
|
};
|
|
754
|
-
|
|
755
686
|
var transformStyle = function transformStyle(key, value, container) {
|
|
756
687
|
var result = handlers[key] ? handlers[key](value) : value;
|
|
757
688
|
return transformColor(transformUnit(container, castFloat(result)));
|
|
758
689
|
};
|
|
690
|
+
|
|
759
691
|
/**
|
|
760
692
|
* Transform styles values
|
|
761
693
|
*
|
|
762
694
|
* @param {Object} styles object
|
|
763
695
|
* @returns {Object} transformed styles
|
|
764
696
|
*/
|
|
765
|
-
|
|
766
|
-
|
|
767
697
|
var transform = function transform(container) {
|
|
768
698
|
return function (style) {
|
|
769
699
|
if (!style) return style;
|
|
770
700
|
var propsArray = Object.keys(style);
|
|
771
701
|
var resolvedStyle = {};
|
|
772
|
-
|
|
773
702
|
for (var i = 0; i < propsArray.length; i += 1) {
|
|
774
703
|
var key = propsArray[i];
|
|
775
704
|
var value = style[key];
|
|
776
705
|
var transformed = transformStyle(key, value, container);
|
|
777
706
|
resolvedStyle[key] = transformed;
|
|
778
707
|
}
|
|
779
|
-
|
|
780
708
|
return resolvedStyle;
|
|
781
709
|
};
|
|
782
710
|
};
|
|
@@ -787,17 +715,13 @@ var transform = function transform(container) {
|
|
|
787
715
|
* @param {Object} container
|
|
788
716
|
* @param {Object} styles object
|
|
789
717
|
*/
|
|
790
|
-
|
|
791
718
|
var resolveMediaQueries = function resolveMediaQueries(container, styles) {
|
|
792
719
|
return Object.keys(styles).reduce(function (acc, key) {
|
|
793
720
|
var _extends2;
|
|
794
|
-
|
|
795
721
|
if (/@media/.test(key)) {
|
|
796
722
|
var _matchMedia;
|
|
797
|
-
|
|
798
723
|
return _extends__default["default"]({}, acc, matchMedia__default["default"]((_matchMedia = {}, _matchMedia[key] = styles[key], _matchMedia), container));
|
|
799
724
|
}
|
|
800
|
-
|
|
801
725
|
return _extends__default["default"]({}, acc, (_extends2 = {}, _extends2[key] = styles[key], _extends2));
|
|
802
726
|
}, {});
|
|
803
727
|
};
|
|
@@ -809,14 +733,12 @@ var resolveMediaQueries = function resolveMediaQueries(container, styles) {
|
|
|
809
733
|
* @param {Object} style object
|
|
810
734
|
* @returns {Object} resolved style object
|
|
811
735
|
*/
|
|
812
|
-
|
|
813
736
|
var resolveStyles = function resolveStyles(container, style) {
|
|
814
737
|
var computeMediaQueries = function computeMediaQueries(value) {
|
|
815
738
|
return resolveMediaQueries(container, value);
|
|
816
739
|
};
|
|
817
|
-
|
|
818
740
|
return fns.compose(transform(container), expand, computeMediaQueries, flatten)(style);
|
|
819
|
-
};
|
|
741
|
+
};
|
|
820
742
|
|
|
821
743
|
exports["default"] = resolveStyles;
|
|
822
744
|
exports.flatten = flatten;
|
package/lib/index.es.js
CHANGED
|
@@ -7,20 +7,18 @@ import _extends from '@babel/runtime/helpers/extends';
|
|
|
7
7
|
import matchMedia from 'media-engine';
|
|
8
8
|
|
|
9
9
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex#values
|
|
10
|
+
|
|
10
11
|
// TODO: change flex defaults to [0, 1, 'auto'] as in spec in next major release
|
|
11
12
|
var flexDefaults = [1, 1, 0];
|
|
12
13
|
var flexAuto = [1, 1, 'auto'];
|
|
13
|
-
|
|
14
14
|
var expandFlex = function expandFlex(key, value) {
|
|
15
15
|
var defaults = flexDefaults;
|
|
16
16
|
var matches = [];
|
|
17
|
-
|
|
18
17
|
if (value === 'auto') {
|
|
19
18
|
defaults = flexAuto;
|
|
20
19
|
} else {
|
|
21
20
|
matches = ("" + value).split(' ');
|
|
22
21
|
}
|
|
23
|
-
|
|
24
22
|
var flexGrow = matches[0] || defaults[0];
|
|
25
23
|
var flexShrink = matches[1] || defaults[1];
|
|
26
24
|
var flexBasis = matches[2] || defaults[2];
|
|
@@ -33,40 +31,36 @@ var expandFlex = function expandFlex(key, value) {
|
|
|
33
31
|
|
|
34
32
|
/* eslint-disable no-plusplus */
|
|
35
33
|
var BOX_MODEL_UNITS = 'px,in,mm,cm,pt,%,vw,vh';
|
|
36
|
-
|
|
37
34
|
var logError = function logError(style, value) {
|
|
38
35
|
console.error("\n @react-pdf/stylesheet parsing error:\n\n " + style + ": " + value + ",\n " + ' '.repeat(style.length + 2) + "^\n Unsupported " + style + " value format\n ");
|
|
39
36
|
};
|
|
40
|
-
|
|
41
37
|
var expandBoxModel = function expandBoxModel(_temp) {
|
|
42
38
|
var _ref = _temp === void 0 ? {} : _temp,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
expandsTo = _ref.expandsTo,
|
|
40
|
+
_ref$maxValues = _ref.maxValues,
|
|
41
|
+
maxValues = _ref$maxValues === void 0 ? 1 : _ref$maxValues,
|
|
42
|
+
_ref$autoSupported = _ref.autoSupported,
|
|
43
|
+
autoSupported = _ref$autoSupported === void 0 ? false : _ref$autoSupported;
|
|
49
44
|
return function (model, value) {
|
|
50
45
|
var _ref2;
|
|
51
|
-
|
|
52
46
|
var nodes = parse$1("" + value);
|
|
53
47
|
var parts = [];
|
|
54
|
-
|
|
55
48
|
for (var i = 0; i < nodes.length; i++) {
|
|
56
|
-
var node = nodes[i];
|
|
57
|
-
// `,`, `/` or strings that unsupported by margin and padding
|
|
49
|
+
var node = nodes[i];
|
|
58
50
|
|
|
51
|
+
// value contains `calc`, `url` or other css function
|
|
52
|
+
// `,`, `/` or strings that unsupported by margin and padding
|
|
59
53
|
if (node.type === 'function' || node.type === 'string' || node.type === 'div') {
|
|
60
54
|
logError(model, value);
|
|
61
55
|
return {};
|
|
62
56
|
}
|
|
63
|
-
|
|
64
57
|
if (node.type === 'word') {
|
|
65
58
|
if (node.value === 'auto' && autoSupported) {
|
|
66
59
|
parts.push(node.value);
|
|
67
60
|
} else {
|
|
68
|
-
var result = parseUnit(node.value);
|
|
61
|
+
var result = parseUnit(node.value);
|
|
69
62
|
|
|
63
|
+
// when unit isn't specified this condition is true
|
|
70
64
|
if (result && BOX_MODEL_UNITS.includes(result.unit)) {
|
|
71
65
|
parts.push(node.value);
|
|
72
66
|
} else {
|
|
@@ -75,16 +69,14 @@ var expandBoxModel = function expandBoxModel(_temp) {
|
|
|
75
69
|
}
|
|
76
70
|
}
|
|
77
71
|
}
|
|
78
|
-
}
|
|
79
|
-
|
|
72
|
+
}
|
|
80
73
|
|
|
74
|
+
// checks that we have enough parsed values
|
|
81
75
|
if (parts.length > maxValues) {
|
|
82
76
|
logError(model, value);
|
|
83
77
|
return {};
|
|
84
78
|
}
|
|
85
|
-
|
|
86
79
|
var first = parts[0];
|
|
87
|
-
|
|
88
80
|
if (expandsTo) {
|
|
89
81
|
var second = parts[1] || parts[0];
|
|
90
82
|
var third = parts[2] || parts[0];
|
|
@@ -96,7 +88,6 @@ var expandBoxModel = function expandBoxModel(_temp) {
|
|
|
96
88
|
fourth: fourth
|
|
97
89
|
});
|
|
98
90
|
}
|
|
99
|
-
|
|
100
91
|
return _ref2 = {}, _ref2[model] = first, _ref2;
|
|
101
92
|
};
|
|
102
93
|
};
|
|
@@ -104,9 +95,9 @@ var expandBoxModel = function expandBoxModel(_temp) {
|
|
|
104
95
|
var processMargin = expandBoxModel({
|
|
105
96
|
expandsTo: function expandsTo(_ref) {
|
|
106
97
|
var first = _ref.first,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
98
|
+
second = _ref.second,
|
|
99
|
+
third = _ref.third,
|
|
100
|
+
fourth = _ref.fourth;
|
|
110
101
|
return {
|
|
111
102
|
marginTop: first,
|
|
112
103
|
marginRight: second,
|
|
@@ -120,7 +111,7 @@ var processMargin = expandBoxModel({
|
|
|
120
111
|
var processMarginVertical = expandBoxModel({
|
|
121
112
|
expandsTo: function expandsTo(_ref2) {
|
|
122
113
|
var first = _ref2.first,
|
|
123
|
-
|
|
114
|
+
second = _ref2.second;
|
|
124
115
|
return {
|
|
125
116
|
marginTop: first,
|
|
126
117
|
marginBottom: second
|
|
@@ -132,7 +123,7 @@ var processMarginVertical = expandBoxModel({
|
|
|
132
123
|
var processMarginHorizontal = expandBoxModel({
|
|
133
124
|
expandsTo: function expandsTo(_ref3) {
|
|
134
125
|
var first = _ref3.first,
|
|
135
|
-
|
|
126
|
+
second = _ref3.second;
|
|
136
127
|
return {
|
|
137
128
|
marginRight: first,
|
|
138
129
|
marginLeft: second
|
|
@@ -146,25 +137,19 @@ var processMarginSingle = expandBoxModel({
|
|
|
146
137
|
});
|
|
147
138
|
|
|
148
139
|
var BORDER_SHORTHAND_REGEX = /(-?\d+(\.\d+)?(px|in|mm|cm|pt|vw|vh|px)?)\s(\S+)\s(.+)/;
|
|
149
|
-
|
|
150
140
|
var matchBorderShorthand = function matchBorderShorthand(value) {
|
|
151
141
|
return value.match(BORDER_SHORTHAND_REGEX) || [];
|
|
152
142
|
};
|
|
153
|
-
|
|
154
143
|
var expandBorders = function expandBorders(key, value) {
|
|
155
144
|
var match = matchBorderShorthand("" + value);
|
|
156
|
-
|
|
157
145
|
if (match) {
|
|
158
146
|
var color = match[5] || value;
|
|
159
147
|
var style = match[4] || value;
|
|
160
148
|
var width = match[1] || value;
|
|
161
|
-
|
|
162
149
|
if (key.match(/(Top|Right|Bottom|Left)$/)) {
|
|
163
150
|
var _ref;
|
|
164
|
-
|
|
165
151
|
return _ref = {}, _ref[key + "Color"] = color, _ref[key + "Style"] = style, _ref[key + "Width"] = width, _ref;
|
|
166
152
|
}
|
|
167
|
-
|
|
168
153
|
if (key.match(/Color$/)) {
|
|
169
154
|
return {
|
|
170
155
|
borderTopColor: color,
|
|
@@ -173,7 +158,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
173
158
|
borderLeftColor: color
|
|
174
159
|
};
|
|
175
160
|
}
|
|
176
|
-
|
|
177
161
|
if (key.match(/Style$/)) {
|
|
178
162
|
return {
|
|
179
163
|
borderTopStyle: style,
|
|
@@ -182,7 +166,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
182
166
|
borderLeftStyle: style
|
|
183
167
|
};
|
|
184
168
|
}
|
|
185
|
-
|
|
186
169
|
if (key.match(/Width$/)) {
|
|
187
170
|
return {
|
|
188
171
|
borderTopWidth: width,
|
|
@@ -191,7 +174,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
191
174
|
borderLeftWidth: width
|
|
192
175
|
};
|
|
193
176
|
}
|
|
194
|
-
|
|
195
177
|
if (key.match(/Radius$/)) {
|
|
196
178
|
return {
|
|
197
179
|
borderTopLeftRadius: value,
|
|
@@ -200,7 +182,6 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
200
182
|
borderBottomLeftRadius: value
|
|
201
183
|
};
|
|
202
184
|
}
|
|
203
|
-
|
|
204
185
|
return {
|
|
205
186
|
borderTopColor: color,
|
|
206
187
|
borderTopStyle: style,
|
|
@@ -216,16 +197,15 @@ var expandBorders = function expandBorders(key, value) {
|
|
|
216
197
|
borderLeftWidth: width
|
|
217
198
|
};
|
|
218
199
|
}
|
|
219
|
-
|
|
220
200
|
return value;
|
|
221
201
|
};
|
|
222
202
|
|
|
223
203
|
var processPadding = expandBoxModel({
|
|
224
204
|
expandsTo: function expandsTo(_ref) {
|
|
225
205
|
var first = _ref.first,
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
206
|
+
second = _ref.second,
|
|
207
|
+
third = _ref.third,
|
|
208
|
+
fourth = _ref.fourth;
|
|
229
209
|
return {
|
|
230
210
|
paddingTop: first,
|
|
231
211
|
paddingRight: second,
|
|
@@ -238,7 +218,7 @@ var processPadding = expandBoxModel({
|
|
|
238
218
|
var processPaddingVertical = expandBoxModel({
|
|
239
219
|
expandsTo: function expandsTo(_ref2) {
|
|
240
220
|
var first = _ref2.first,
|
|
241
|
-
|
|
221
|
+
second = _ref2.second;
|
|
242
222
|
return {
|
|
243
223
|
paddingTop: first,
|
|
244
224
|
paddingBottom: second
|
|
@@ -249,7 +229,7 @@ var processPaddingVertical = expandBoxModel({
|
|
|
249
229
|
var processPaddingHorizontal = expandBoxModel({
|
|
250
230
|
expandsTo: function expandsTo(_ref3) {
|
|
251
231
|
var first = _ref3.first,
|
|
252
|
-
|
|
232
|
+
second = _ref3.second;
|
|
253
233
|
return {
|
|
254
234
|
paddingRight: first,
|
|
255
235
|
paddingLeft: second
|
|
@@ -271,20 +251,18 @@ var Y_AXIS_SHORTHANDS = {
|
|
|
271
251
|
top: true,
|
|
272
252
|
bottom: true
|
|
273
253
|
};
|
|
274
|
-
|
|
275
254
|
var sortTransformOriginPair = function sortTransformOriginPair(a, b) {
|
|
276
255
|
if (Y_AXIS_SHORTHANDS[a]) return 1;
|
|
277
256
|
if (Y_AXIS_SHORTHANDS[b]) return -1;
|
|
278
257
|
return 0;
|
|
279
258
|
};
|
|
280
|
-
|
|
281
259
|
var getTransformOriginPair = function getTransformOriginPair(values) {
|
|
282
260
|
if (!values || values.length === 0) return ['center', 'center'];
|
|
283
261
|
var pair = values.length === 1 ? [values[0], 'center'] : values;
|
|
284
262
|
return pair.sort(sortTransformOriginPair);
|
|
285
|
-
};
|
|
286
|
-
|
|
263
|
+
};
|
|
287
264
|
|
|
265
|
+
// Transforms shorthand transformOrigin values
|
|
288
266
|
var expandTransformOrigin = function expandTransformOrigin(key, value) {
|
|
289
267
|
var match = ("" + value).split(' ');
|
|
290
268
|
var pair = getTransformOriginPair(match);
|
|
@@ -331,6 +309,7 @@ var shorthands = {
|
|
|
331
309
|
objectPosition: expandObjectPosition,
|
|
332
310
|
transformOrigin: expandTransformOrigin
|
|
333
311
|
};
|
|
312
|
+
|
|
334
313
|
/**
|
|
335
314
|
* Transforms style key-value
|
|
336
315
|
*
|
|
@@ -338,38 +317,32 @@ var shorthands = {
|
|
|
338
317
|
* @param {String} value style value
|
|
339
318
|
* @returns {String | Number} transformed style values
|
|
340
319
|
*/
|
|
341
|
-
|
|
342
320
|
var expandStyle = function expandStyle(key, value) {
|
|
343
321
|
var _ref;
|
|
344
|
-
|
|
345
322
|
return shorthands[key] ? shorthands[key](key, value) : (_ref = {}, _ref[key] = value, _ref);
|
|
346
323
|
};
|
|
324
|
+
|
|
347
325
|
/**
|
|
348
326
|
* Expand the shorthand properties.
|
|
349
327
|
*
|
|
350
328
|
* @param { Object } style object
|
|
351
329
|
* @returns { Object } expanded style object
|
|
352
330
|
*/
|
|
353
|
-
|
|
354
|
-
|
|
355
331
|
var expand = function expand(style) {
|
|
356
332
|
if (!style) return style;
|
|
357
333
|
var propsArray = Object.keys(style);
|
|
358
334
|
var resolvedStyle = {};
|
|
359
|
-
|
|
360
335
|
for (var i = 0; i < propsArray.length; i += 1) {
|
|
361
336
|
var key = propsArray[i];
|
|
362
337
|
var value = style[key];
|
|
363
338
|
var extended = expandStyle(key, value);
|
|
364
339
|
var keys = Object.keys(extended);
|
|
365
|
-
|
|
366
340
|
for (var j = 0; j < keys.length; j += 1) {
|
|
367
341
|
var propName = keys[j];
|
|
368
342
|
var propValue = extended[propName];
|
|
369
343
|
resolvedStyle[propName] = propValue;
|
|
370
344
|
}
|
|
371
345
|
}
|
|
372
|
-
|
|
373
346
|
return resolvedStyle;
|
|
374
347
|
};
|
|
375
348
|
|
|
@@ -379,18 +352,16 @@ var expand = function expand(style) {
|
|
|
379
352
|
* @param {Array} array
|
|
380
353
|
* @returns {Array} array without nils
|
|
381
354
|
*/
|
|
382
|
-
|
|
383
355
|
var compact = function compact(array) {
|
|
384
356
|
return array.filter(Boolean);
|
|
385
357
|
};
|
|
358
|
+
|
|
386
359
|
/**
|
|
387
360
|
* Merges style objects array
|
|
388
361
|
*
|
|
389
362
|
* @param {Array} style objects array
|
|
390
363
|
* @returns {Object} merged style object
|
|
391
364
|
*/
|
|
392
|
-
|
|
393
|
-
|
|
394
365
|
var mergeStyles = function mergeStyles(styles) {
|
|
395
366
|
return styles.reduce(function (acc, style) {
|
|
396
367
|
var s = Array.isArray(style) ? flatten(style) : style;
|
|
@@ -402,14 +373,13 @@ var mergeStyles = function mergeStyles(styles) {
|
|
|
402
373
|
return acc;
|
|
403
374
|
}, {});
|
|
404
375
|
};
|
|
376
|
+
|
|
405
377
|
/**
|
|
406
378
|
* Flattens an array of style objects, into one aggregated style object.
|
|
407
379
|
*
|
|
408
380
|
* @param {Array} style objects array
|
|
409
381
|
* @returns {Object} flatted style object
|
|
410
382
|
*/
|
|
411
|
-
|
|
412
|
-
|
|
413
383
|
var flatten = compose(mergeStyles, compact, castArray);
|
|
414
384
|
|
|
415
385
|
/**
|
|
@@ -428,6 +398,7 @@ var parseValue = function parseValue(value) {
|
|
|
428
398
|
unit: undefined
|
|
429
399
|
};
|
|
430
400
|
};
|
|
401
|
+
|
|
431
402
|
/**
|
|
432
403
|
* Transform given scalar value
|
|
433
404
|
*
|
|
@@ -435,30 +406,22 @@ var parseValue = function parseValue(value) {
|
|
|
435
406
|
* @param {String} styles value
|
|
436
407
|
* @returns {Object} transformed value
|
|
437
408
|
*/
|
|
438
|
-
|
|
439
|
-
|
|
440
409
|
var transformUnit = function transformUnit(container, value) {
|
|
441
410
|
var scalar = parseValue(value);
|
|
442
411
|
var dpi = container.dpi || 72;
|
|
443
412
|
var mmFactor = 1 / 25.4 * dpi;
|
|
444
413
|
var cmFactor = 1 / 2.54 * dpi;
|
|
445
|
-
|
|
446
414
|
switch (scalar.unit) {
|
|
447
415
|
case 'in':
|
|
448
416
|
return scalar.value * dpi;
|
|
449
|
-
|
|
450
417
|
case 'mm':
|
|
451
418
|
return scalar.value * mmFactor;
|
|
452
|
-
|
|
453
419
|
case 'cm':
|
|
454
420
|
return scalar.value * cmFactor;
|
|
455
|
-
|
|
456
421
|
case 'vh':
|
|
457
422
|
return scalar.value * (container.height / 100);
|
|
458
|
-
|
|
459
423
|
case 'vw':
|
|
460
424
|
return scalar.value * (container.width / 100);
|
|
461
|
-
|
|
462
425
|
default:
|
|
463
426
|
return scalar.value;
|
|
464
427
|
}
|
|
@@ -467,43 +430,39 @@ var transformUnit = function transformUnit(container, value) {
|
|
|
467
430
|
var isRgb = function isRgb(value) {
|
|
468
431
|
return /rgba?/g.test(value);
|
|
469
432
|
};
|
|
470
|
-
|
|
471
433
|
var isHsl = function isHsl(value) {
|
|
472
434
|
return /hsla?/g.test(value);
|
|
473
435
|
};
|
|
436
|
+
|
|
474
437
|
/**
|
|
475
438
|
* Transform rgb color to hexa
|
|
476
439
|
*
|
|
477
440
|
* @param {String} styles value
|
|
478
441
|
* @returns {Object} transformed value
|
|
479
442
|
*/
|
|
480
|
-
|
|
481
|
-
|
|
482
443
|
var parseRgb = function parseRgb(value) {
|
|
483
444
|
var rgb = colorString.get.rgb(value);
|
|
484
445
|
return colorString.to.hex(rgb);
|
|
485
446
|
};
|
|
447
|
+
|
|
486
448
|
/**
|
|
487
449
|
* Transform Hsl color to hexa
|
|
488
450
|
*
|
|
489
451
|
* @param {String} styles value
|
|
490
452
|
* @returns {Object} transformed value
|
|
491
453
|
*/
|
|
492
|
-
|
|
493
|
-
|
|
494
454
|
var parseHsl = function parseHsl(value) {
|
|
495
455
|
var hsl = colorString.get.hsl(value).map(Math.round);
|
|
496
456
|
var hex = hlsToHex.apply(void 0, hsl);
|
|
497
457
|
return hex.toUpperCase();
|
|
498
458
|
};
|
|
459
|
+
|
|
499
460
|
/**
|
|
500
461
|
* Transform given color to hexa
|
|
501
462
|
*
|
|
502
463
|
* @param {String} styles value
|
|
503
464
|
* @returns {Object} transformed value
|
|
504
465
|
*/
|
|
505
|
-
|
|
506
|
-
|
|
507
466
|
var transformColor = function transformColor(value) {
|
|
508
467
|
if (isRgb(value)) return parseRgb(value);
|
|
509
468
|
if (isHsl(value)) return parseHsl(value);
|
|
@@ -511,22 +470,19 @@ var transformColor = function transformColor(value) {
|
|
|
511
470
|
};
|
|
512
471
|
|
|
513
472
|
var parse = function parse(transformString) {
|
|
514
|
-
var transforms = transformString.trim().split(/\) |\)/);
|
|
473
|
+
var transforms = transformString.trim().split(/\) |\)/);
|
|
515
474
|
|
|
475
|
+
// Handle "initial", "inherit", "unset".
|
|
516
476
|
if (transforms.length === 1) {
|
|
517
477
|
return [[transforms[0], true]];
|
|
518
478
|
}
|
|
519
|
-
|
|
520
479
|
var parsed = [];
|
|
521
|
-
|
|
522
480
|
for (var i = 0; i < transforms.length; i += 1) {
|
|
523
481
|
var transform = transforms[i];
|
|
524
|
-
|
|
525
482
|
if (transform) {
|
|
526
483
|
var _transform$split = transform.split('('),
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
484
|
+
name = _transform$split[0],
|
|
485
|
+
rawValue = _transform$split[1];
|
|
530
486
|
var splitChar = rawValue.indexOf(',') >= 0 ? ',' : ' ';
|
|
531
487
|
var value = rawValue.split(splitChar).map(function (val) {
|
|
532
488
|
return val.trim();
|
|
@@ -537,41 +493,33 @@ var parse = function parse(transformString) {
|
|
|
537
493
|
});
|
|
538
494
|
}
|
|
539
495
|
}
|
|
540
|
-
|
|
541
496
|
return parsed;
|
|
542
497
|
};
|
|
543
|
-
|
|
544
498
|
var parseAngle = function parseAngle(value) {
|
|
545
499
|
var unitsRegexp = /(-?\d*\.?\d*)(\w*)?/i;
|
|
546
|
-
|
|
547
500
|
var _unitsRegexp$exec = unitsRegexp.exec(value),
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
501
|
+
angle = _unitsRegexp$exec[1],
|
|
502
|
+
unit = _unitsRegexp$exec[2];
|
|
551
503
|
var number = Number.parseFloat(angle);
|
|
552
504
|
return unit === 'rad' ? number * 180 / Math.PI : number;
|
|
553
505
|
};
|
|
554
|
-
|
|
555
506
|
var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
556
507
|
var operation = _ref.operation,
|
|
557
|
-
|
|
558
|
-
|
|
508
|
+
value = _ref.value;
|
|
559
509
|
switch (operation) {
|
|
560
510
|
case 'scale':
|
|
561
511
|
{
|
|
562
512
|
var _value$map = value.map(function (num) {
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
513
|
+
return Number.parseFloat(num);
|
|
514
|
+
}),
|
|
515
|
+
scaleX = _value$map[0],
|
|
516
|
+
_value$map$ = _value$map[1],
|
|
517
|
+
scaleY = _value$map$ === void 0 ? scaleX : _value$map$;
|
|
569
518
|
return {
|
|
570
519
|
operation: 'scale',
|
|
571
520
|
value: [scaleX, scaleY]
|
|
572
521
|
};
|
|
573
522
|
}
|
|
574
|
-
|
|
575
523
|
case 'scaleX':
|
|
576
524
|
{
|
|
577
525
|
return {
|
|
@@ -579,7 +527,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
579
527
|
value: [Number.parseFloat(value), 1]
|
|
580
528
|
};
|
|
581
529
|
}
|
|
582
|
-
|
|
583
530
|
case 'scaleY':
|
|
584
531
|
{
|
|
585
532
|
return {
|
|
@@ -587,7 +534,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
587
534
|
value: [1, Number.parseFloat(value)]
|
|
588
535
|
};
|
|
589
536
|
}
|
|
590
|
-
|
|
591
537
|
case 'rotate':
|
|
592
538
|
{
|
|
593
539
|
return {
|
|
@@ -595,7 +541,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
595
541
|
value: [parseAngle(value)]
|
|
596
542
|
};
|
|
597
543
|
}
|
|
598
|
-
|
|
599
544
|
case 'translate':
|
|
600
545
|
{
|
|
601
546
|
return {
|
|
@@ -605,7 +550,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
605
550
|
})
|
|
606
551
|
};
|
|
607
552
|
}
|
|
608
|
-
|
|
609
553
|
case 'translateX':
|
|
610
554
|
{
|
|
611
555
|
return {
|
|
@@ -613,7 +557,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
613
557
|
value: [Number.parseFloat(value), 0]
|
|
614
558
|
};
|
|
615
559
|
}
|
|
616
|
-
|
|
617
560
|
case 'translateY':
|
|
618
561
|
{
|
|
619
562
|
return {
|
|
@@ -621,7 +564,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
621
564
|
value: [0, Number.parseFloat(value)]
|
|
622
565
|
};
|
|
623
566
|
}
|
|
624
|
-
|
|
625
567
|
case 'skew':
|
|
626
568
|
{
|
|
627
569
|
return {
|
|
@@ -629,7 +571,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
629
571
|
value: value.map(parseAngle)
|
|
630
572
|
};
|
|
631
573
|
}
|
|
632
|
-
|
|
633
574
|
case 'skewX':
|
|
634
575
|
{
|
|
635
576
|
return {
|
|
@@ -637,7 +578,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
637
578
|
value: [parseAngle(value), 0]
|
|
638
579
|
};
|
|
639
580
|
}
|
|
640
|
-
|
|
641
581
|
case 'skewY':
|
|
642
582
|
{
|
|
643
583
|
return {
|
|
@@ -645,7 +585,6 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
645
585
|
value: [0, parseAngle(value)]
|
|
646
586
|
};
|
|
647
587
|
}
|
|
648
|
-
|
|
649
588
|
default:
|
|
650
589
|
{
|
|
651
590
|
return {
|
|
@@ -657,13 +596,11 @@ var normalizeTransformOperation = function normalizeTransformOperation(_ref) {
|
|
|
657
596
|
}
|
|
658
597
|
}
|
|
659
598
|
};
|
|
660
|
-
|
|
661
599
|
var normalize = function normalize(operations) {
|
|
662
600
|
return operations.map(function (operation) {
|
|
663
601
|
return normalizeTransformOperation(operation);
|
|
664
602
|
});
|
|
665
603
|
};
|
|
666
|
-
|
|
667
604
|
var processTransform = function processTransform(value) {
|
|
668
605
|
if (typeof value !== 'string') return value;
|
|
669
606
|
return normalize(parse(value));
|
|
@@ -685,7 +622,6 @@ var FONT_WEIGHTS = {
|
|
|
685
622
|
heavy: 900,
|
|
686
623
|
black: 900
|
|
687
624
|
};
|
|
688
|
-
|
|
689
625
|
var processFontWeight = function processFontWeight(value) {
|
|
690
626
|
if (!value) return FONT_WEIGHTS.normal;
|
|
691
627
|
if (typeof value === 'number') return value;
|
|
@@ -697,7 +633,6 @@ var processFontWeight = function processFontWeight(value) {
|
|
|
697
633
|
var matchNumber = function matchNumber(value) {
|
|
698
634
|
return typeof value === 'string' && /^-?\d*\.?\d*$/.test(value);
|
|
699
635
|
};
|
|
700
|
-
|
|
701
636
|
var castFloat = function castFloat(value) {
|
|
702
637
|
if (typeof value !== 'string') return value;
|
|
703
638
|
if (matchNumber(value)) return parseFloat(value, 10);
|
|
@@ -709,14 +644,11 @@ var offsetKeyword = function offsetKeyword(value) {
|
|
|
709
644
|
case 'top':
|
|
710
645
|
case 'left':
|
|
711
646
|
return '0%';
|
|
712
|
-
|
|
713
647
|
case 'right':
|
|
714
648
|
case 'bottom':
|
|
715
649
|
return '100%';
|
|
716
|
-
|
|
717
650
|
case 'center':
|
|
718
651
|
return '50%';
|
|
719
|
-
|
|
720
652
|
default:
|
|
721
653
|
return null;
|
|
722
654
|
}
|
|
@@ -738,32 +670,28 @@ var handlers = {
|
|
|
738
670
|
transformOriginX: transformTransformOrigin,
|
|
739
671
|
transformOriginY: transformTransformOrigin
|
|
740
672
|
};
|
|
741
|
-
|
|
742
673
|
var transformStyle = function transformStyle(key, value, container) {
|
|
743
674
|
var result = handlers[key] ? handlers[key](value) : value;
|
|
744
675
|
return transformColor(transformUnit(container, castFloat(result)));
|
|
745
676
|
};
|
|
677
|
+
|
|
746
678
|
/**
|
|
747
679
|
* Transform styles values
|
|
748
680
|
*
|
|
749
681
|
* @param {Object} styles object
|
|
750
682
|
* @returns {Object} transformed styles
|
|
751
683
|
*/
|
|
752
|
-
|
|
753
|
-
|
|
754
684
|
var transform = function transform(container) {
|
|
755
685
|
return function (style) {
|
|
756
686
|
if (!style) return style;
|
|
757
687
|
var propsArray = Object.keys(style);
|
|
758
688
|
var resolvedStyle = {};
|
|
759
|
-
|
|
760
689
|
for (var i = 0; i < propsArray.length; i += 1) {
|
|
761
690
|
var key = propsArray[i];
|
|
762
691
|
var value = style[key];
|
|
763
692
|
var transformed = transformStyle(key, value, container);
|
|
764
693
|
resolvedStyle[key] = transformed;
|
|
765
694
|
}
|
|
766
|
-
|
|
767
695
|
return resolvedStyle;
|
|
768
696
|
};
|
|
769
697
|
};
|
|
@@ -774,17 +702,13 @@ var transform = function transform(container) {
|
|
|
774
702
|
* @param {Object} container
|
|
775
703
|
* @param {Object} styles object
|
|
776
704
|
*/
|
|
777
|
-
|
|
778
705
|
var resolveMediaQueries = function resolveMediaQueries(container, styles) {
|
|
779
706
|
return Object.keys(styles).reduce(function (acc, key) {
|
|
780
707
|
var _extends2;
|
|
781
|
-
|
|
782
708
|
if (/@media/.test(key)) {
|
|
783
709
|
var _matchMedia;
|
|
784
|
-
|
|
785
710
|
return _extends({}, acc, matchMedia((_matchMedia = {}, _matchMedia[key] = styles[key], _matchMedia), container));
|
|
786
711
|
}
|
|
787
|
-
|
|
788
712
|
return _extends({}, acc, (_extends2 = {}, _extends2[key] = styles[key], _extends2));
|
|
789
713
|
}, {});
|
|
790
714
|
};
|
|
@@ -796,13 +720,11 @@ var resolveMediaQueries = function resolveMediaQueries(container, styles) {
|
|
|
796
720
|
* @param {Object} style object
|
|
797
721
|
* @returns {Object} resolved style object
|
|
798
722
|
*/
|
|
799
|
-
|
|
800
723
|
var resolveStyles = function resolveStyles(container, style) {
|
|
801
724
|
var computeMediaQueries = function computeMediaQueries(value) {
|
|
802
725
|
return resolveMediaQueries(container, value);
|
|
803
726
|
};
|
|
804
|
-
|
|
805
727
|
return compose(transform(container), expand, computeMediaQueries, flatten)(style);
|
|
806
|
-
};
|
|
728
|
+
};
|
|
807
729
|
|
|
808
730
|
export { resolveStyles as default, flatten, processTransform, transformColor };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-pdf/stylesheet",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "A styles engine for Node and the browser",
|
|
6
6
|
"author": "Diego Muracciole <diegomuracciole@gmail.com>",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"watch": "rimraf ./lib && rollup -c -w"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@babel/runtime": "^7.
|
|
21
|
+
"@babel/runtime": "^7.20.13",
|
|
22
22
|
"@react-pdf/fns": "2.0.0",
|
|
23
23
|
"@react-pdf/types": "^2.2.0",
|
|
24
24
|
"color-string": "^1.5.3",
|