-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
polished.js
4038 lines (3891 loc) · 132 KB
/
polished.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/esm/extends'), require('@babel/runtime/helpers/esm/assertThisInitialized'), require('@babel/runtime/helpers/esm/inheritsLoose'), require('@babel/runtime/helpers/esm/wrapNativeSuper'), require('@babel/runtime/helpers/esm/taggedTemplateLiteralLoose')) :
typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/esm/extends', '@babel/runtime/helpers/esm/assertThisInitialized', '@babel/runtime/helpers/esm/inheritsLoose', '@babel/runtime/helpers/esm/wrapNativeSuper', '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.polished = {}, global["extends"], global.assertThisInitialized, global.inheritsLoose, global.wrapNativeSuper, global.taggedTemplateLiteralLoose));
})(this, (function (exports, _extends, _assertThisInitialized, _inheritsLoose, _wrapNativeSuper, _taggedTemplateLiteralLoose) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
var _wrapNativeSuper__default = /*#__PURE__*/_interopDefaultLegacy(_wrapNativeSuper);
var _taggedTemplateLiteralLoose__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteralLoose);
function last() {
var _ref;
return _ref = arguments.length - 1, _ref < 0 || arguments.length <= _ref ? undefined : arguments[_ref];
}
function negation(a) {
return -a;
}
function addition(a, b) {
return a + b;
}
function subtraction(a, b) {
return a - b;
}
function multiplication(a, b) {
return a * b;
}
function division(a, b) {
return a / b;
}
function max() {
return Math.max.apply(Math, arguments);
}
function min() {
return Math.min.apply(Math, arguments);
}
function comma() {
return Array.of.apply(Array, arguments);
}
var defaultSymbols = {
symbols: {
'*': {
infix: {
symbol: '*',
f: multiplication,
notation: 'infix',
precedence: 4,
rightToLeft: 0,
argCount: 2
},
symbol: '*',
regSymbol: '\\*'
},
'/': {
infix: {
symbol: '/',
f: division,
notation: 'infix',
precedence: 4,
rightToLeft: 0,
argCount: 2
},
symbol: '/',
regSymbol: '/'
},
'+': {
infix: {
symbol: '+',
f: addition,
notation: 'infix',
precedence: 2,
rightToLeft: 0,
argCount: 2
},
prefix: {
symbol: '+',
f: last,
notation: 'prefix',
precedence: 3,
rightToLeft: 0,
argCount: 1
},
symbol: '+',
regSymbol: '\\+'
},
'-': {
infix: {
symbol: '-',
f: subtraction,
notation: 'infix',
precedence: 2,
rightToLeft: 0,
argCount: 2
},
prefix: {
symbol: '-',
f: negation,
notation: 'prefix',
precedence: 3,
rightToLeft: 0,
argCount: 1
},
symbol: '-',
regSymbol: '-'
},
',': {
infix: {
symbol: ',',
f: comma,
notation: 'infix',
precedence: 1,
rightToLeft: 0,
argCount: 2
},
symbol: ',',
regSymbol: ','
},
'(': {
prefix: {
symbol: '(',
f: last,
notation: 'prefix',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: '(',
regSymbol: '\\('
},
')': {
postfix: {
symbol: ')',
f: undefined,
notation: 'postfix',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: ')',
regSymbol: '\\)'
},
min: {
func: {
symbol: 'min',
f: min,
notation: 'func',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: 'min',
regSymbol: 'min\\b'
},
max: {
func: {
symbol: 'max',
f: max,
notation: 'func',
precedence: 0,
rightToLeft: 0,
argCount: 1
},
symbol: 'max',
regSymbol: 'max\\b'
}
}
};
var defaultSymbolMap = defaultSymbols;
// based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
/**
* Parse errors.md and turn it into a simple hash of code: message
* @private
*/
var ERRORS = {
"1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
"2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
"3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
"4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
"5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
"6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
"7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
"8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
"9": "Please provide a number of steps to the modularScale helper.\n\n",
"10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
"11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
"12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
"13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
"14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
"15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
"16": "You must provide a template to this method.\n\n",
"17": "You passed an unsupported selector state to this method.\n\n",
"18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
"19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
"20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
"21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
"22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
"23": "fontFace expects a name of a font-family.\n\n",
"24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
"25": "fontFace expects localFonts to be an array.\n\n",
"26": "fontFace expects fileFormats to be an array.\n\n",
"27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
"28": "Please supply a filename to retinaImage() as the first argument.\n\n",
"29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
"30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
"31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
"32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
"33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
"34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
"35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
"36": "Property must be a string value.\n\n",
"37": "Syntax Error at %s.\n\n",
"38": "Formula contains a function that needs parentheses at %s.\n\n",
"39": "Formula is missing closing parenthesis at %s.\n\n",
"40": "Formula has too many closing parentheses at %s.\n\n",
"41": "All values in a formula must have the same unit or be unitless.\n\n",
"42": "Please provide a number of steps to the modularScale helper.\n\n",
"43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
"44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
"45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
"46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
"47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
"48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
"49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
"50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
"51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
"52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
"53": "fontFace expects localFonts to be an array.\n\n",
"54": "fontFace expects fileFormats to be an array.\n\n",
"55": "fontFace expects a name of a font-family.\n\n",
"56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
"57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
"58": "Please supply a filename to retinaImage() as the first argument.\n\n",
"59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
"60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
"61": "Property must be a string value.\n\n",
"62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
"63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
"64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
"65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
"66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
"67": "You must provide a template to this method.\n\n",
"68": "You passed an unsupported selector state to this method.\n\n",
"69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
"70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
"71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
"73": "Please provide a valid CSS variable.\n\n",
"74": "CSS variable not found and no default was provided.\n\n",
"75": "important requires a valid style object, got a %s instead.\n\n",
"76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
"77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
"78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
};
/**
* super basic version of sprintf
* @private
*/
function format() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
var a = args[0];
var b = [];
var c;
for (c = 1; c < args.length; c += 1) {
b.push(args[c]);
}
b.forEach(function (d) {
a = a.replace(/%[a-z]/, d);
});
return a;
}
/**
* Create an error file out of errors.md for development and a simple web link to the full errors
* in production mode.
* @private
*/
var PolishedError = /*#__PURE__*/function (_Error) {
_inheritsLoose__default["default"](PolishedError, _Error);
function PolishedError(code) {
var _this;
{
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
args[_key2 - 1] = arguments[_key2];
}
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
}
return _assertThisInitialized__default["default"](_this);
}
return PolishedError;
}( /*#__PURE__*/_wrapNativeSuper__default["default"](Error));
var unitRegExp = /((?!\w)a|na|hc|mc|dg|me[r]?|xe|ni(?![a-zA-Z])|mm|cp|tp|xp|q(?!s)|hv|xamv|nimv|wv|sm|s(?!\D|$)|ged|darg?|nrut)/g;
// Merges additional math functionality into the defaults.
function mergeSymbolMaps(additionalSymbols) {
var symbolMap = {};
symbolMap.symbols = additionalSymbols ? _extends__default["default"]({}, defaultSymbolMap.symbols, additionalSymbols.symbols) : _extends__default["default"]({}, defaultSymbolMap.symbols);
return symbolMap;
}
function exec(operators, values) {
var _ref;
var op = operators.pop();
values.push(op.f.apply(op, (_ref = []).concat.apply(_ref, values.splice(-op.argCount))));
return op.precedence;
}
function calculate(expression, additionalSymbols) {
var symbolMap = mergeSymbolMaps(additionalSymbols);
var match;
var operators = [symbolMap.symbols['('].prefix];
var values = [];
var pattern = new RegExp( // Pattern for numbers
"\\d+(?:\\.\\d+)?|" +
// ...and patterns for individual operators/function names
Object.keys(symbolMap.symbols).map(function (key) {
return symbolMap.symbols[key];
})
// longer symbols should be listed first
// $FlowFixMe
.sort(function (a, b) {
return b.symbol.length - a.symbol.length;
})
// $FlowFixMe
.map(function (val) {
return val.regSymbol;
}).join('|') + "|(\\S)", 'g');
pattern.lastIndex = 0; // Reset regular expression object
var afterValue = false;
do {
match = pattern.exec(expression);
var _ref2 = match || [')', undefined],
token = _ref2[0],
bad = _ref2[1];
var notNumber = symbolMap.symbols[token];
var notNewValue = notNumber && !notNumber.prefix && !notNumber.func;
var notAfterValue = !notNumber || !notNumber.postfix && !notNumber.infix;
// Check for syntax errors:
if (bad || (afterValue ? notAfterValue : notNewValue)) {
throw new PolishedError(37, match ? match.index : expression.length, expression);
}
if (afterValue) {
// We either have an infix or postfix operator (they should be mutually exclusive)
var curr = notNumber.postfix || notNumber.infix;
do {
var prev = operators[operators.length - 1];
if ((curr.precedence - prev.precedence || prev.rightToLeft) > 0) break;
// Apply previous operator, since it has precedence over current one
} while (exec(operators, values)); // Exit loop after executing an opening parenthesis or function
afterValue = curr.notation === 'postfix';
if (curr.symbol !== ')') {
operators.push(curr);
// Postfix always has precedence over any operator that follows after it
if (afterValue) exec(operators, values);
}
} else if (notNumber) {
// prefix operator or function
operators.push(notNumber.prefix || notNumber.func);
if (notNumber.func) {
// Require an opening parenthesis
match = pattern.exec(expression);
if (!match || match[0] !== '(') {
throw new PolishedError(38, match ? match.index : expression.length, expression);
}
}
} else {
// number
values.push(+token);
afterValue = true;
}
} while (match && operators.length);
if (operators.length) {
throw new PolishedError(39, match ? match.index : expression.length, expression);
} else if (match) {
throw new PolishedError(40, match ? match.index : expression.length, expression);
} else {
return values.pop();
}
}
function reverseString(str) {
return str.split('').reverse().join('');
}
/**
* Helper for doing math with CSS Units. Accepts a formula as a string. All values in the formula must have the same unit (or be unitless). Supports complex formulas utliziing addition, subtraction, multiplication, division, square root, powers, factorial, min, max, as well as parentheses for order of operation.
*
*In cases where you need to do calculations with mixed units where one unit is a [relative length unit](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Relative_length_units), you will want to use [CSS Calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
*
* *warning* While we've done everything possible to ensure math safely evalutes formulas expressed as strings, you should always use extreme caution when passing `math` user provided values.
* @example
* // Styles as object usage
* const styles = {
* fontSize: math('12rem + 8rem'),
* fontSize: math('(12px + 2px) * 3'),
* fontSize: math('3px^2 + sqrt(4)'),
* }
*
* // styled-components usage
* const div = styled.div`
* fontSize: ${math('12rem + 8rem')};
* fontSize: ${math('(12px + 2px) * 3')};
* fontSize: ${math('3px^2 + sqrt(4)')};
* `
*
* // CSS as JS Output
*
* div: {
* fontSize: '20rem',
* fontSize: '42px',
* fontSize: '11px',
* }
*/
function math(formula, additionalSymbols) {
var reversedFormula = reverseString(formula);
var formulaMatch = reversedFormula.match(unitRegExp);
// Check that all units are the same
if (formulaMatch && !formulaMatch.every(function (unit) {
return unit === formulaMatch[0];
})) {
throw new PolishedError(41);
}
var cleanFormula = reverseString(reversedFormula.replace(unitRegExp, ''));
return "" + calculate(cleanFormula, additionalSymbols) + (formulaMatch ? reverseString(formulaMatch[0]) : '');
}
var cssVariableRegex = /--[\S]*/g;
/**
* Fetches the value of a passed CSS Variable in the :root scope, or otherwise returns a defaultValue if provided.
*
* @example
* // Styles as object usage
* const styles = {
* 'background': cssVar('--background-color'),
* }
*
* // styled-components usage
* const div = styled.div`
* background: ${cssVar('--background-color')};
* `
*
* // CSS in JS Output
*
* element {
* 'background': 'red'
* }
*/
function cssVar(cssVariable, defaultValue) {
if (!cssVariable || !cssVariable.match(cssVariableRegex)) {
throw new PolishedError(73);
}
var variableValue;
/* eslint-disable */
/* istanbul ignore next */
if (typeof document !== 'undefined' && document.documentElement !== null) {
variableValue = getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
}
/* eslint-enable */
if (variableValue) {
return variableValue.trim();
} else if (defaultValue) {
return defaultValue;
}
throw new PolishedError(74);
}
// @private
function capitalizeString(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var positionMap$1 = ['Top', 'Right', 'Bottom', 'Left'];
function generateProperty(property, position) {
if (!property) return position.toLowerCase();
var splitProperty = property.split('-');
if (splitProperty.length > 1) {
splitProperty.splice(1, 0, position);
return splitProperty.reduce(function (acc, val) {
return "" + acc + capitalizeString(val);
});
}
var joinedProperty = property.replace(/([a-z])([A-Z])/g, "$1" + position + "$2");
return property === joinedProperty ? "" + property + position : joinedProperty;
}
function generateStyles(property, valuesWithDefaults) {
var styles = {};
for (var i = 0; i < valuesWithDefaults.length; i += 1) {
if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
styles[generateProperty(property, positionMap$1[i])] = valuesWithDefaults[i];
}
}
return styles;
}
/**
* Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.
* @example
* // Styles as object usage
* const styles = {
* ...directionalProperty('padding', '12px', '24px', '36px', '48px')
* }
*
* // styled-components usage
* const div = styled.div`
* ${directionalProperty('padding', '12px', '24px', '36px', '48px')}
* `
*
* // CSS as JS Output
*
* div {
* 'paddingTop': '12px',
* 'paddingRight': '24px',
* 'paddingBottom': '36px',
* 'paddingLeft': '48px'
* }
*/
function directionalProperty(property) {
for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
values[_key - 1] = arguments[_key];
}
// prettier-ignore
var firstValue = values[0],
_values$ = values[1],
secondValue = _values$ === void 0 ? firstValue : _values$,
_values$2 = values[2],
thirdValue = _values$2 === void 0 ? firstValue : _values$2,
_values$3 = values[3],
fourthValue = _values$3 === void 0 ? secondValue : _values$3;
var valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
return generateStyles(property, valuesWithDefaults);
}
/**
* Check if a string ends with something
* @private
*/
function endsWith(string, suffix) {
return string.substr(-suffix.length) === suffix;
}
var cssRegex$1 = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
/**
* Returns a given CSS value minus its unit of measure.
*
* @example
* // Styles as object usage
* const styles = {
* '--dimension': stripUnit('100px')
* }
*
* // styled-components usage
* const div = styled.div`
* --dimension: ${stripUnit('100px')};
* `
*
* // CSS in JS Output
*
* element {
* '--dimension': 100
* }
*/
function stripUnit(value) {
if (typeof value !== 'string') return value;
var matchedValue = value.match(cssRegex$1);
return matchedValue ? parseFloat(value) : value;
}
/**
* Factory function that creates pixel-to-x converters
* @private
*/
var pxtoFactory = function pxtoFactory(to) {
return function (pxval, base) {
if (base === void 0) {
base = '16px';
}
var newPxval = pxval;
var newBase = base;
if (typeof pxval === 'string') {
if (!endsWith(pxval, 'px')) {
throw new PolishedError(69, to, pxval);
}
newPxval = stripUnit(pxval);
}
if (typeof base === 'string') {
if (!endsWith(base, 'px')) {
throw new PolishedError(70, to, base);
}
newBase = stripUnit(base);
}
if (typeof newPxval === 'string') {
throw new PolishedError(71, pxval, to);
}
if (typeof newBase === 'string') {
throw new PolishedError(72, base, to);
}
return "" + newPxval / newBase + to;
};
};
var pixelsto = pxtoFactory;
/**
* Convert pixel value to ems. The default base value is 16px, but can be changed by passing a
* second argument to the function.
* @function
* @param {string|number} pxval
* @param {string|number} [base='16px']
* @example
* // Styles as object usage
* const styles = {
* 'height': em('16px')
* }
*
* // styled-components usage
* const div = styled.div`
* height: ${em('16px')}
* `
*
* // CSS in JS Output
*
* element {
* 'height': '1em'
* }
*/
var em = pixelsto('em');
var em$1 = em;
var cssRegex = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
/**
* Returns a given CSS value and its unit as elements of an array.
*
* @example
* // Styles as object usage
* const styles = {
* '--dimension': getValueAndUnit('100px')[0],
* '--unit': getValueAndUnit('100px')[1],
* }
*
* // styled-components usage
* const div = styled.div`
* --dimension: ${getValueAndUnit('100px')[0]};
* --unit: ${getValueAndUnit('100px')[1]};
* `
*
* // CSS in JS Output
*
* element {
* '--dimension': 100,
* '--unit': 'px',
* }
*/
function getValueAndUnit(value) {
if (typeof value !== 'string') return [value, ''];
var matchedValue = value.match(cssRegex);
if (matchedValue) return [parseFloat(value), matchedValue[2]];
return [value, undefined];
}
/**
* Helper for targeting rules in a style block generated by polished modules that need !important-level specificity. Can optionally specify a rule (or rules) to target specific rules.
*
* @example
* // Styles as object usage
* const styles = {
* ...important(cover())
* }
*
* // styled-components usage
* const div = styled.div`
* ${important(cover())}
* `
*
* // CSS as JS Output
*
* div: {
* 'position': 'absolute !important',
* 'top': '0 !important',
* 'right: '0 !important',
* 'bottom': '0 !important',
* 'left: '0 !important'
* }
*/
function important(styleBlock, rules) {
if (typeof styleBlock !== 'object' || styleBlock === null) {
throw new PolishedError(75, typeof styleBlock);
}
var newStyleBlock = {};
Object.keys(styleBlock).forEach(function (key) {
if (typeof styleBlock[key] === 'object' && styleBlock[key] !== null) {
newStyleBlock[key] = important(styleBlock[key], rules);
} else if (!rules || rules && (rules === key || rules.indexOf(key) >= 0)) {
newStyleBlock[key] = styleBlock[key] + " !important";
} else {
newStyleBlock[key] = styleBlock[key];
}
});
return newStyleBlock;
}
var ratioNames = {
minorSecond: 1.067,
majorSecond: 1.125,
minorThird: 1.2,
majorThird: 1.25,
perfectFourth: 1.333,
augFourth: 1.414,
perfectFifth: 1.5,
minorSixth: 1.6,
goldenSection: 1.618,
majorSixth: 1.667,
minorSeventh: 1.778,
majorSeventh: 1.875,
octave: 2,
majorTenth: 2.5,
majorEleventh: 2.667,
majorTwelfth: 3,
doubleOctave: 4
};
function getRatio(ratioName) {
return ratioNames[ratioName];
}
/**
* Establish consistent measurements and spacial relationships throughout your projects by incrementing an em or rem value up or down a defined scale. We provide a list of commonly used scales as pre-defined variables.
* @example
* // Styles as object usage
* const styles = {
* // Increment two steps up the default scale
* 'fontSize': modularScale(2)
* }
*
* // styled-components usage
* const div = styled.div`
* // Increment two steps up the default scale
* fontSize: ${modularScale(2)}
* `
*
* // CSS in JS Output
*
* element {
* 'fontSize': '1.77689em'
* }
*/
function modularScale(steps, base, ratio) {
if (base === void 0) {
base = '1em';
}
if (ratio === void 0) {
ratio = 1.333;
}
if (typeof steps !== 'number') {
throw new PolishedError(42);
}
if (typeof ratio === 'string' && !ratioNames[ratio]) {
throw new PolishedError(43);
}
var _ref = typeof base === 'string' ? getValueAndUnit(base) : [base, ''],
realBase = _ref[0],
unit = _ref[1];
var realRatio = typeof ratio === 'string' ? getRatio(ratio) : ratio;
if (typeof realBase === 'string') {
throw new PolishedError(44, base);
}
return "" + realBase * Math.pow(realRatio, steps) + (unit || '');
}
/**
* Convert pixel value to rems. The default base value is 16px, but can be changed by passing a
* second argument to the function.
* @function
* @param {string|number} pxval
* @param {string|number} [base='16px']
* @example
* // Styles as object usage
* const styles = {
* 'height': rem('16px')
* }
*
* // styled-components usage
* const div = styled.div`
* height: ${rem('16px')}
* `
*
* // CSS in JS Output
*
* element {
* 'height': '1rem'
* }
*/
var rem = pixelsto('rem');
var rem$1 = rem;
var defaultFontSize = 16;
function convertBase(base) {
var deconstructedValue = getValueAndUnit(base);
if (deconstructedValue[1] === 'px') {
return parseFloat(base);
}
if (deconstructedValue[1] === '%') {
return parseFloat(base) / 100 * defaultFontSize;
}
throw new PolishedError(78, deconstructedValue[1]);
}
function getBaseFromDoc() {
/* eslint-disable */
/* istanbul ignore next */
if (typeof document !== 'undefined' && document.documentElement !== null) {
var rootFontSize = getComputedStyle(document.documentElement).fontSize;
return rootFontSize ? convertBase(rootFontSize) : defaultFontSize;
}
/* eslint-enable */
/* istanbul ignore next */
return defaultFontSize;
}
/**
* Convert rem values to px. By default, the base value is pulled from the font-size property on the root element (if it is set in % or px). It defaults to 16px if not found on the root. You can also override the base value by providing your own base in % or px.
* @example
* // Styles as object usage
* const styles = {
* 'height': remToPx('1.6rem')
* 'height': remToPx('1.6rem', '10px')
* }
*
* // styled-components usage
* const div = styled.div`
* height: ${remToPx('1.6rem')}
* height: ${remToPx('1.6rem', '10px')}
* `
*
* // CSS in JS Output
*
* element {
* 'height': '25.6px',
* 'height': '16px',
* }
*/
function remToPx(value, base) {
var deconstructedValue = getValueAndUnit(value);
if (deconstructedValue[1] !== 'rem' && deconstructedValue[1] !== '') {
throw new PolishedError(77, deconstructedValue[1]);
}
var newBase = base ? convertBase(base) : getBaseFromDoc();
return deconstructedValue[0] * newBase + "px";
}
var functionsMap$3 = {
back: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',
circ: 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
cubic: 'cubic-bezier(0.550, 0.055, 0.675, 0.190)',
expo: 'cubic-bezier(0.950, 0.050, 0.795, 0.035)',
quad: 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
quart: 'cubic-bezier(0.895, 0.030, 0.685, 0.220)',
quint: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
sine: 'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
};
/**
* String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
*
* @example
* // Styles as object usage
* const styles = {
* 'transitionTimingFunction': easeIn('quad')
* }
*
* // styled-components usage
* const div = styled.div`
* transitionTimingFunction: ${easeIn('quad')};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'transitionTimingFunction': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
* }
*/
function easeIn(functionName) {
return functionsMap$3[functionName.toLowerCase().trim()];
}
var functionsMap$2 = {
back: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)',
circ: 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
cubic: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
expo: 'cubic-bezier(1.000, 0.000, 0.000, 1.000)',
quad: 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
quart: 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',
quint: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)',
sine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)'
};
/**
* String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
*
* @example
* // Styles as object usage
* const styles = {
* 'transitionTimingFunction': easeInOut('quad')
* }
*
* // styled-components usage
* const div = styled.div`
* transitionTimingFunction: ${easeInOut('quad')};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'transitionTimingFunction': 'cubic-bezier(0.455, 0.030, 0.515, 0.955)',
* }
*/
function easeInOut(functionName) {
return functionsMap$2[functionName.toLowerCase().trim()];
}
var functionsMap$1 = {
back: 'cubic-bezier(0.175, 0.885, 0.320, 1.275)',
cubic: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
circ: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
expo: 'cubic-bezier(0.190, 1.000, 0.220, 1.000)',
quad: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
quart: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
quint: 'cubic-bezier(0.230, 1.000, 0.320, 1.000)',
sine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
};
/**
* String to represent common easing functions as demonstrated here: (github.com/jaukia/easie).
*
* @example
* // Styles as object usage
* const styles = {
* 'transitionTimingFunction': easeOut('quad')
* }
*
* // styled-components usage
* const div = styled.div`
* transitionTimingFunction: ${easeOut('quad')};
* `
*
* // CSS as JS Output
*
* 'div': {
* 'transitionTimingFunction': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
* }
*/
function easeOut(functionName) {
return functionsMap$1[functionName.toLowerCase().trim()];
}
/**
* Returns a CSS calc formula for linear interpolation of a property between two values. Accepts optional minScreen (defaults to '320px') and maxScreen (defaults to '1200px').
*
* @example
* // Styles as object usage
* const styles = {
* fontSize: between('20px', '100px', '400px', '1000px'),
* fontSize: between('20px', '100px')
* }
*
* // styled-components usage
* const div = styled.div`
* fontSize: ${between('20px', '100px', '400px', '1000px')};
* fontSize: ${between('20px', '100px')}
* `
*
* // CSS as JS Output
*
* h1: {
* 'fontSize': 'calc(-33.33333333333334px + 13.333333333333334vw)',
* 'fontSize': 'calc(-9.090909090909093px + 9.090909090909092vw)'
* }
*/
function between(fromSize, toSize, minScreen, maxScreen) {
if (minScreen === void 0) {
minScreen = '320px';
}
if (maxScreen === void 0) {
maxScreen = '1200px';
}
var _getValueAndUnit = getValueAndUnit(fromSize),
unitlessFromSize = _getValueAndUnit[0],
fromSizeUnit = _getValueAndUnit[1];
var _getValueAndUnit2 = getValueAndUnit(toSize),
unitlessToSize = _getValueAndUnit2[0],
toSizeUnit = _getValueAndUnit2[1];
var _getValueAndUnit3 = getValueAndUnit(minScreen),