html2canvas-pro 2.1.0 → 2.1.1

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.
Files changed (186) hide show
  1. package/dist/html2canvas-pro.esm.js +21 -7
  2. package/dist/html2canvas-pro.esm.js.map +1 -1
  3. package/dist/html2canvas-pro.js +21 -7
  4. package/dist/html2canvas-pro.js.map +1 -1
  5. package/dist/html2canvas-pro.min.js +3 -3
  6. package/dist/lib/core/cache-storage.js +2 -2
  7. package/dist/lib/core/features.js +2 -2
  8. package/dist/lib/render/canvas/background-renderer.js +6 -0
  9. package/dist/lib/render/canvas/canvas-renderer.js +5 -1
  10. package/dist/lib/render/canvas/foreignobject-renderer.js +5 -1
  11. package/package.json +3 -11
  12. package/dist/lib/invariant.js +0 -9
  13. package/dist/types/invariant.d.ts +0 -1
  14. package/src/__tests__/index.ts +0 -99
  15. package/src/config.ts +0 -107
  16. package/src/core/__mocks__/cache-storage.ts +0 -1
  17. package/src/core/__mocks__/context.ts +0 -19
  18. package/src/core/__mocks__/features.ts +0 -8
  19. package/src/core/__mocks__/logger.ts +0 -17
  20. package/src/core/__tests__/cache-storage.test.ts +0 -205
  21. package/src/core/__tests__/cache-storage.ts +0 -278
  22. package/src/core/__tests__/logger.ts +0 -29
  23. package/src/core/__tests__/validator.ts +0 -359
  24. package/src/core/bitwise.ts +0 -1
  25. package/src/core/cache-storage.ts +0 -315
  26. package/src/core/context.ts +0 -31
  27. package/src/core/debugger.ts +0 -32
  28. package/src/core/features.ts +0 -222
  29. package/src/core/logger.ts +0 -64
  30. package/src/core/origin-checker.ts +0 -57
  31. package/src/core/performance-monitor.ts +0 -241
  32. package/src/core/render-element.ts +0 -272
  33. package/src/core/util.ts +0 -1
  34. package/src/core/validator.ts +0 -593
  35. package/src/css/index.ts +0 -427
  36. package/src/css/layout/__mocks__/bounds.ts +0 -6
  37. package/src/css/layout/bounds.ts +0 -79
  38. package/src/css/layout/text.ts +0 -161
  39. package/src/css/property-descriptor.ts +0 -49
  40. package/src/css/property-descriptors/__tests__/background-tests.ts +0 -65
  41. package/src/css/property-descriptors/__tests__/clip-path.test.ts +0 -280
  42. package/src/css/property-descriptors/__tests__/font-family.ts +0 -25
  43. package/src/css/property-descriptors/__tests__/image-rendering-integration.test.ts +0 -153
  44. package/src/css/property-descriptors/__tests__/image-rendering-performance.test.ts +0 -175
  45. package/src/css/property-descriptors/__tests__/image-rendering.test.ts +0 -72
  46. package/src/css/property-descriptors/__tests__/paint-order.ts +0 -87
  47. package/src/css/property-descriptors/__tests__/text-shadow.ts +0 -94
  48. package/src/css/property-descriptors/__tests__/transform-tests.ts +0 -18
  49. package/src/css/property-descriptors/background-clip.ts +0 -30
  50. package/src/css/property-descriptors/background-color.ts +0 -9
  51. package/src/css/property-descriptors/background-image.ts +0 -27
  52. package/src/css/property-descriptors/background-origin.ts +0 -31
  53. package/src/css/property-descriptors/background-position.ts +0 -38
  54. package/src/css/property-descriptors/background-repeat.ts +0 -44
  55. package/src/css/property-descriptors/background-size.ts +0 -27
  56. package/src/css/property-descriptors/border-color.ts +0 -13
  57. package/src/css/property-descriptors/border-radius.ts +0 -19
  58. package/src/css/property-descriptors/border-style.ts +0 -34
  59. package/src/css/property-descriptors/border-width.ts +0 -20
  60. package/src/css/property-descriptors/box-shadow.ts +0 -60
  61. package/src/css/property-descriptors/clip-path.ts +0 -271
  62. package/src/css/property-descriptors/color.ts +0 -9
  63. package/src/css/property-descriptors/content.ts +0 -26
  64. package/src/css/property-descriptors/counter-increment.ts +0 -43
  65. package/src/css/property-descriptors/counter-reset.ts +0 -36
  66. package/src/css/property-descriptors/direction.ts +0 -23
  67. package/src/css/property-descriptors/display.ts +0 -117
  68. package/src/css/property-descriptors/duration.ts +0 -14
  69. package/src/css/property-descriptors/float.ts +0 -29
  70. package/src/css/property-descriptors/font-family.ts +0 -38
  71. package/src/css/property-descriptors/font-size.ts +0 -9
  72. package/src/css/property-descriptors/font-style.ts +0 -25
  73. package/src/css/property-descriptors/font-variant.ts +0 -12
  74. package/src/css/property-descriptors/font-weight.ts +0 -26
  75. package/src/css/property-descriptors/image-rendering.ts +0 -33
  76. package/src/css/property-descriptors/letter-spacing.ts +0 -25
  77. package/src/css/property-descriptors/line-break.ts +0 -22
  78. package/src/css/property-descriptors/line-height.ts +0 -22
  79. package/src/css/property-descriptors/list-style-image.ts +0 -19
  80. package/src/css/property-descriptors/list-style-position.ts +0 -22
  81. package/src/css/property-descriptors/list-style-type.ts +0 -179
  82. package/src/css/property-descriptors/margin.ts +0 -13
  83. package/src/css/property-descriptors/mix-blend-mode.ts +0 -35
  84. package/src/css/property-descriptors/object-fit.ts +0 -39
  85. package/src/css/property-descriptors/opacity.ts +0 -15
  86. package/src/css/property-descriptors/overflow-wrap.ts +0 -22
  87. package/src/css/property-descriptors/overflow.ts +0 -34
  88. package/src/css/property-descriptors/padding.ts +0 -14
  89. package/src/css/property-descriptors/paint-order.ts +0 -42
  90. package/src/css/property-descriptors/position.ts +0 -30
  91. package/src/css/property-descriptors/quotes.ts +0 -57
  92. package/src/css/property-descriptors/rotate.ts +0 -34
  93. package/src/css/property-descriptors/text-align.ts +0 -26
  94. package/src/css/property-descriptors/text-decoration-color.ts +0 -9
  95. package/src/css/property-descriptors/text-decoration-line.ts +0 -38
  96. package/src/css/property-descriptors/text-decoration-style.ts +0 -32
  97. package/src/css/property-descriptors/text-decoration-thickness.ts +0 -30
  98. package/src/css/property-descriptors/text-overflow.ts +0 -23
  99. package/src/css/property-descriptors/text-shadow.ts +0 -52
  100. package/src/css/property-descriptors/text-transform.ts +0 -27
  101. package/src/css/property-descriptors/text-underline-offset.ts +0 -27
  102. package/src/css/property-descriptors/transform-origin.ts +0 -29
  103. package/src/css/property-descriptors/transform.ts +0 -74
  104. package/src/css/property-descriptors/visibility.ts +0 -25
  105. package/src/css/property-descriptors/webkit-line-clamp.ts +0 -30
  106. package/src/css/property-descriptors/webkit-text-stroke-color.ts +0 -8
  107. package/src/css/property-descriptors/webkit-text-stroke-width.ts +0 -15
  108. package/src/css/property-descriptors/word-break.ts +0 -25
  109. package/src/css/property-descriptors/writing-mode.ts +0 -37
  110. package/src/css/property-descriptors/z-index.ts +0 -27
  111. package/src/css/syntax/__tests__/tokernizer-tests.ts +0 -29
  112. package/src/css/syntax/parser.ts +0 -188
  113. package/src/css/syntax/tokenizer.ts +0 -822
  114. package/src/css/type-descriptor.ts +0 -7
  115. package/src/css/types/__tests__/color-tests.ts +0 -147
  116. package/src/css/types/__tests__/image-tests.ts +0 -239
  117. package/src/css/types/angle.ts +0 -86
  118. package/src/css/types/color-math.ts +0 -22
  119. package/src/css/types/color-spaces/a98.ts +0 -86
  120. package/src/css/types/color-spaces/p3.ts +0 -92
  121. package/src/css/types/color-spaces/pro-photo.ts +0 -87
  122. package/src/css/types/color-spaces/rec2020.ts +0 -90
  123. package/src/css/types/color-spaces/srgb.ts +0 -87
  124. package/src/css/types/color-utilities.ts +0 -452
  125. package/src/css/types/color.ts +0 -485
  126. package/src/css/types/functions/-prefix-linear-gradient.ts +0 -35
  127. package/src/css/types/functions/-prefix-radial-gradient.ts +0 -106
  128. package/src/css/types/functions/-webkit-gradient.ts +0 -69
  129. package/src/css/types/functions/__tests__/radial-gradient.ts +0 -69
  130. package/src/css/types/functions/counter.ts +0 -511
  131. package/src/css/types/functions/gradient.ts +0 -206
  132. package/src/css/types/functions/linear-gradient.ts +0 -28
  133. package/src/css/types/functions/radial-gradient.ts +0 -101
  134. package/src/css/types/image.ts +0 -120
  135. package/src/css/types/index.ts +0 -1
  136. package/src/css/types/length-percentage.ts +0 -137
  137. package/src/css/types/length.ts +0 -7
  138. package/src/css/types/time.ts +0 -20
  139. package/src/dom/__mocks__/document-cloner.ts +0 -22
  140. package/src/dom/__tests__/dom-normalizer.test.ts +0 -133
  141. package/src/dom/__tests__/element-container.test.ts +0 -129
  142. package/src/dom/document-cloner.ts +0 -929
  143. package/src/dom/dom-normalizer.ts +0 -133
  144. package/src/dom/element-container.ts +0 -75
  145. package/src/dom/elements/li-element-container.ts +0 -10
  146. package/src/dom/elements/ol-element-container.ts +0 -12
  147. package/src/dom/elements/select-element-container.ts +0 -10
  148. package/src/dom/elements/textarea-element-container.ts +0 -9
  149. package/src/dom/node-parser.ts +0 -177
  150. package/src/dom/node-type-guards.ts +0 -70
  151. package/src/dom/replaced-elements/canvas-element-container.ts +0 -15
  152. package/src/dom/replaced-elements/iframe-element-container.ts +0 -55
  153. package/src/dom/replaced-elements/image-element-container.ts +0 -16
  154. package/src/dom/replaced-elements/index.ts +0 -5
  155. package/src/dom/replaced-elements/input-element-container.ts +0 -105
  156. package/src/dom/replaced-elements/pseudo-elements.ts +0 -0
  157. package/src/dom/replaced-elements/svg-element-container.ts +0 -23
  158. package/src/dom/text-container.ts +0 -42
  159. package/src/global.d.ts +0 -19
  160. package/src/index.ts +0 -82
  161. package/src/invariant.ts +0 -5
  162. package/src/options.ts +0 -55
  163. package/src/render/__tests__/object-fit.test.ts +0 -85
  164. package/src/render/background.ts +0 -298
  165. package/src/render/bezier-curve.ts +0 -47
  166. package/src/render/border.ts +0 -165
  167. package/src/render/bound-curves.ts +0 -388
  168. package/src/render/box-sizing.ts +0 -31
  169. package/src/render/canvas/__tests__/background-renderer.test.ts +0 -72
  170. package/src/render/canvas/__tests__/border-renderer.test.ts +0 -24
  171. package/src/render/canvas/__tests__/effects-renderer.test.ts +0 -32
  172. package/src/render/canvas/__tests__/text-renderer.test.ts +0 -471
  173. package/src/render/canvas/background-renderer.ts +0 -271
  174. package/src/render/canvas/border-renderer.ts +0 -224
  175. package/src/render/canvas/canvas-path.ts +0 -31
  176. package/src/render/canvas/canvas-renderer.ts +0 -641
  177. package/src/render/canvas/effects-renderer.ts +0 -130
  178. package/src/render/canvas/foreignobject-renderer.ts +0 -53
  179. package/src/render/canvas/text-renderer.ts +0 -700
  180. package/src/render/effects.ts +0 -75
  181. package/src/render/font-metrics.ts +0 -72
  182. package/src/render/object-fit.ts +0 -100
  183. package/src/render/path.ts +0 -37
  184. package/src/render/renderer-interface.ts +0 -28
  185. package/src/render/stacking-context.ts +0 -386
  186. package/src/render/vector.ts +0 -19
@@ -1,485 +0,0 @@
1
- import { CSSValue, isIdentToken, isNumberToken, nonFunctionArgSeparator, Parser } from '../syntax/parser';
2
- import { HashToken, TokenType } from '../syntax/tokenizer';
3
- import { ITypeDescriptor } from '../type-descriptor';
4
- import { Context } from '../../core/context';
5
- import { srgbFromXYZ, srgbLinearFromXYZ } from './color-spaces/srgb';
6
- import {
7
- packSrgbLinear,
8
- packSrgb,
9
- packHSL,
10
- packLch,
11
- packOkLch,
12
- packOkLab,
13
- packLab,
14
- isRelativeTransform,
15
- pack,
16
- getTokenColorValue,
17
- convertXyz,
18
- convertXyz50,
19
- rgbToXyz,
20
- hslToXyz,
21
- labToXyz,
22
- lchToXyz,
23
- oklabToXyz,
24
- oklchToXyz,
25
- xyzFromXYZ,
26
- xyz50FromXYZ
27
- } from './color-utilities';
28
- import { convertP3, p3FromXYZ } from './color-spaces/p3';
29
- import { a98FromXYZ, convertA98rgb } from './color-spaces/a98';
30
- import { convertProPhoto, proPhotoFromXYZ } from './color-spaces/pro-photo';
31
- import { convertRec2020, rec2020FromXYZ } from './color-spaces/rec2020';
32
-
33
- export type Color = number;
34
-
35
- export const color: ITypeDescriptor<Color> = {
36
- name: 'color',
37
- parse: (context: Context, value: CSSValue): Color => {
38
- if (value.type === TokenType.FUNCTION) {
39
- const colorFunction = SUPPORTED_COLOR_FUNCTIONS[value.name];
40
- if (typeof colorFunction === 'undefined') {
41
- throw new Error(`Attempting to parse an unsupported color function "${value.name}"`);
42
- }
43
- return colorFunction(context, value.values);
44
- }
45
-
46
- if (value.type === TokenType.HASH_TOKEN) {
47
- const [r, g, b, a] = hash2rgb(value);
48
- return pack(r, g, b, a);
49
- }
50
-
51
- if (value.type === TokenType.IDENT_TOKEN) {
52
- const namedColor = COLORS[value.value.toUpperCase()];
53
- if (typeof namedColor !== 'undefined') {
54
- return namedColor;
55
- }
56
- }
57
-
58
- return COLORS.TRANSPARENT;
59
- }
60
- };
61
-
62
- const hash2rgb = (token: HashToken): [number, number, number, number] => {
63
- if (token.value.length === 3) {
64
- const r = token.value.substring(0, 1);
65
- const g = token.value.substring(1, 2);
66
- const b = token.value.substring(2, 3);
67
- return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), 1];
68
- }
69
-
70
- if (token.value.length === 4) {
71
- const r = token.value.substring(0, 1);
72
- const g = token.value.substring(1, 2);
73
- const b = token.value.substring(2, 3);
74
- const a = token.value.substring(3, 4);
75
- return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16), parseInt(a + a, 16) / 255];
76
- }
77
-
78
- if (token.value.length === 6) {
79
- const r = token.value.substring(0, 2);
80
- const g = token.value.substring(2, 4);
81
- const b = token.value.substring(4, 6);
82
- return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), 1];
83
- }
84
-
85
- if (token.value.length === 8) {
86
- const r = token.value.substring(0, 2);
87
- const g = token.value.substring(2, 4);
88
- const b = token.value.substring(4, 6);
89
- const a = token.value.substring(6, 8);
90
- return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), parseInt(a, 16) / 255];
91
- }
92
-
93
- return [0, 0, 0, 1];
94
- };
95
-
96
- const rgb = (_context: Context, args: CSSValue[]): number => {
97
- const tokens = args.filter(nonFunctionArgSeparator);
98
-
99
- if (isRelativeTransform(tokens)) {
100
- throw new Error('Relative color not supported for rgb()');
101
- }
102
-
103
- if (tokens.length === 3) {
104
- const [r, g, b] = tokens.map(getTokenColorValue);
105
- return pack(r, g, b, 1);
106
- }
107
-
108
- if (tokens.length === 4) {
109
- const [r, g, b, a] = tokens.map(getTokenColorValue);
110
- return pack(r, g, b, a);
111
- }
112
-
113
- // Handle modern CSS syntax with / separator: rgb(r g b / alpha)
114
- // tokens[0] = r, tokens[1] = g, tokens[2] = b, tokens[3] = '/', tokens[4] = alpha
115
- if (tokens.length === 5 && tokens[3].type === TokenType.DELIM_TOKEN && tokens[3].value === '/') {
116
- const r = getTokenColorValue(tokens[0], 0);
117
- const g = getTokenColorValue(tokens[1], 1);
118
- const b = getTokenColorValue(tokens[2], 2);
119
- const a = getTokenColorValue(tokens[4], 3);
120
- return pack(r, g, b, a);
121
- }
122
-
123
- return 0;
124
- };
125
-
126
- /**
127
- * Handle the CSS color() function
128
- *
129
- * @param context
130
- * @param args
131
- */
132
- const _color = (context: Context, args: CSSValue[]) => {
133
- const tokens = args.filter(nonFunctionArgSeparator),
134
- token_1_value = tokens[0].type === TokenType.IDENT_TOKEN ? tokens[0].value : 'unknown',
135
- is_absolute = !isRelativeTransform(tokens);
136
-
137
- if (is_absolute) {
138
- const color_space = token_1_value,
139
- colorSpaceFunction = SUPPORTED_COLOR_SPACES_ABSOLUTE[color_space];
140
- if (typeof colorSpaceFunction === 'undefined') {
141
- throw new Error(`Attempting to parse an unsupported color space "${color_space}" for color() function`);
142
- }
143
- const c1 = isNumberToken(tokens[1]) ? tokens[1].number : 0,
144
- c2 = isNumberToken(tokens[2]) ? tokens[2].number : 0,
145
- c3 = isNumberToken(tokens[3]) ? tokens[3].number : 0,
146
- a =
147
- tokens.length > 4 &&
148
- tokens[4].type === TokenType.DELIM_TOKEN &&
149
- tokens[4].value === '/' &&
150
- isNumberToken(tokens[5])
151
- ? tokens[5].number
152
- : 1;
153
-
154
- return colorSpaceFunction([c1, c2, c3, a]);
155
- } else {
156
- const extractComponent = (color: [number, number, number, number], token: CSSValue) => {
157
- if (isNumberToken(token)) {
158
- return token.number;
159
- }
160
-
161
- const posFromVal = (value: string): number => {
162
- return value === 'r' || value === 'x' ? 0 : value === 'g' || value === 'y' ? 1 : 2;
163
- };
164
-
165
- if (isIdentToken(token)) {
166
- const position = posFromVal(token.value);
167
- return color[position];
168
- }
169
-
170
- const parseCalc = (args: CSSValue[]): string => {
171
- const parts = args.filter(nonFunctionArgSeparator);
172
- let expression = '(';
173
- for (const part of parts) {
174
- expression +=
175
- part.type === TokenType.FUNCTION && part.name === 'calc'
176
- ? parseCalc(part.values)
177
- : isNumberToken(part)
178
- ? part.number
179
- : part.type === TokenType.DELIM_TOKEN || isIdentToken(part)
180
- ? part.value
181
- : '';
182
- }
183
- expression += ')';
184
- return expression;
185
- };
186
-
187
- if (token.type === TokenType.FUNCTION) {
188
- const args = token.values.filter(nonFunctionArgSeparator);
189
- if (token.name === 'calc') {
190
- const expression = parseCalc(args)
191
- .replace(/r|x/, color[0].toString())
192
- .replace(/g|y/, color[1].toString())
193
- .replace(/b|z/, color[2].toString());
194
-
195
- return new Function('return ' + expression)();
196
- }
197
- }
198
-
199
- return null;
200
- };
201
-
202
- const from_colorspace =
203
- tokens[1].type === TokenType.FUNCTION
204
- ? tokens[1].name
205
- : isIdentToken(tokens[1]) || tokens[1].type === TokenType.HASH_TOKEN
206
- ? 'rgb'
207
- : 'unknown',
208
- to_colorspace = isIdentToken(tokens[2]) ? tokens[2].value : 'unknown';
209
-
210
- let from =
211
- tokens[1].type === TokenType.FUNCTION ? tokens[1].values : isIdentToken(tokens[1]) ? [tokens[1]] : [];
212
-
213
- if (isIdentToken(tokens[1])) {
214
- const named_color = COLORS[tokens[1].value.toUpperCase()];
215
- if (typeof named_color === 'undefined') {
216
- throw new Error(`Attempting to use unknown color in relative color 'from'`);
217
- } else {
218
- const _c = parseColor(context, tokens[1].value),
219
- alpha = 0xff & _c,
220
- blue = 0xff & (_c >> 8),
221
- green = 0xff & (_c >> 16),
222
- red = 0xff & (_c >> 24);
223
- from = [
224
- { type: TokenType.NUMBER_TOKEN, number: red, flags: 1 },
225
- { type: TokenType.NUMBER_TOKEN, number: green, flags: 1 },
226
- { type: TokenType.NUMBER_TOKEN, number: blue, flags: 1 },
227
- { type: TokenType.NUMBER_TOKEN, number: alpha > 1 ? alpha / 255 : alpha, flags: 1 }
228
- ];
229
- }
230
- } else if (tokens[1].type === TokenType.HASH_TOKEN) {
231
- const [red, green, blue, alpha] = hash2rgb(tokens[1]);
232
- from = [
233
- { type: TokenType.NUMBER_TOKEN, number: red, flags: 1 },
234
- { type: TokenType.NUMBER_TOKEN, number: green, flags: 1 },
235
- { type: TokenType.NUMBER_TOKEN, number: blue, flags: 1 },
236
- { type: TokenType.NUMBER_TOKEN, number: alpha > 1 ? alpha / 255 : alpha, flags: 1 }
237
- ];
238
- }
239
-
240
- if (from.length === 0) {
241
- throw new Error(`Attempting to use unknown color in relative color 'from'`);
242
- }
243
-
244
- if (to_colorspace === 'unknown') {
245
- throw new Error(`Attempting to use unknown colorspace in relative color 'to'`);
246
- }
247
-
248
- const fromColorToXyz = SUPPORTED_COLOR_SPACES_TO_XYZ[from_colorspace],
249
- toColorFromXyz = SUPPORTED_COLOR_SPACES_FROM_XYZ[to_colorspace],
250
- toColorPack = SUPPORTED_COLOR_SPACES_ABSOLUTE[to_colorspace];
251
-
252
- if (typeof fromColorToXyz === 'undefined') {
253
- throw new Error(`Attempting to parse an unsupported color space "${from_colorspace}" for color() function`);
254
- }
255
- if (typeof toColorFromXyz === 'undefined') {
256
- throw new Error(`Attempting to parse an unsupported color space "${to_colorspace}" for color() function`);
257
- }
258
-
259
- const from_color: [number, number, number, number] = fromColorToXyz(context, from),
260
- from_final_colorspace: [number, number, number, number] = toColorFromXyz(from_color),
261
- c1 = extractComponent(from_final_colorspace, tokens[3]),
262
- c2 = extractComponent(from_final_colorspace, tokens[4]),
263
- c3 = extractComponent(from_final_colorspace, tokens[5]),
264
- a =
265
- tokens.length > 6 &&
266
- tokens[6].type === TokenType.DELIM_TOKEN &&
267
- tokens[6].value === '/' &&
268
- isNumberToken(tokens[7])
269
- ? tokens[7].number
270
- : 1;
271
- if (c1 === null || c2 === null || c3 === null) {
272
- throw new Error(`Invalid relative color in color() function`);
273
- }
274
-
275
- return toColorPack([c1, c2, c3, a]);
276
- }
277
- };
278
-
279
- const SUPPORTED_COLOR_SPACES_ABSOLUTE: {
280
- [key: string]: (args: number[]) => number;
281
- } = {
282
- srgb: packSrgb,
283
- 'srgb-linear': packSrgbLinear,
284
- 'display-p3': convertP3,
285
- 'a98-rgb': convertA98rgb,
286
- 'prophoto-rgb': convertProPhoto,
287
- xyz: convertXyz,
288
- 'xyz-d50': convertXyz50,
289
- 'xyz-d65': convertXyz,
290
- rec2020: convertRec2020
291
- };
292
-
293
- const SUPPORTED_COLOR_SPACES_TO_XYZ: {
294
- [key: string]: (context: Context, args: CSSValue[]) => [number, number, number, number];
295
- } = {
296
- rgb: rgbToXyz,
297
- hsl: hslToXyz,
298
- lab: labToXyz,
299
- lch: lchToXyz,
300
- oklab: oklabToXyz,
301
- oklch: oklchToXyz
302
- };
303
-
304
- const SUPPORTED_COLOR_SPACES_FROM_XYZ: {
305
- [key: string]: (args: [number, number, number, number]) => [number, number, number, number];
306
- } = {
307
- srgb: srgbFromXYZ,
308
- 'srgb-linear': srgbLinearFromXYZ,
309
- 'display-p3': p3FromXYZ,
310
- 'a98-rgb': a98FromXYZ,
311
- 'prophoto-rgb': proPhotoFromXYZ,
312
- xyz: xyzFromXYZ,
313
- 'xyz-d50': xyz50FromXYZ,
314
- 'xyz-d65': xyzFromXYZ,
315
- rec2020: rec2020FromXYZ
316
- };
317
-
318
- const SUPPORTED_COLOR_FUNCTIONS: {
319
- [key: string]: (context: Context, args: CSSValue[]) => number;
320
- } = {
321
- hsl: packHSL,
322
- hsla: packHSL,
323
- rgb: rgb,
324
- rgba: rgb,
325
- lch: packLch,
326
- oklch: packOkLch,
327
- oklab: packOkLab,
328
- lab: packLab,
329
- color: _color
330
- };
331
-
332
- export const parseColor = (context: Context, value: string): Color =>
333
- color.parse(context, Parser.create(value).parseComponentValue());
334
-
335
- export const COLORS: { [key: string]: Color } = {
336
- ALICEBLUE: 0xf0f8ffff,
337
- ANTIQUEWHITE: 0xfaebd7ff,
338
- AQUA: 0x00ffffff,
339
- AQUAMARINE: 0x7fffd4ff,
340
- AZURE: 0xf0ffffff,
341
- BEIGE: 0xf5f5dcff,
342
- BISQUE: 0xffe4c4ff,
343
- BLACK: 0x000000ff,
344
- BLANCHEDALMOND: 0xffebcdff,
345
- BLUE: 0x0000ffff,
346
- BLUEVIOLET: 0x8a2be2ff,
347
- BROWN: 0xa52a2aff,
348
- BURLYWOOD: 0xdeb887ff,
349
- CADETBLUE: 0x5f9ea0ff,
350
- CHARTREUSE: 0x7fff00ff,
351
- CHOCOLATE: 0xd2691eff,
352
- CORAL: 0xff7f50ff,
353
- CORNFLOWERBLUE: 0x6495edff,
354
- CORNSILK: 0xfff8dcff,
355
- CRIMSON: 0xdc143cff,
356
- CYAN: 0x00ffffff,
357
- DARKBLUE: 0x00008bff,
358
- DARKCYAN: 0x008b8bff,
359
- DARKGOLDENROD: 0xb886bbff,
360
- DARKGRAY: 0xa9a9a9ff,
361
- DARKGREEN: 0x006400ff,
362
- DARKGREY: 0xa9a9a9ff,
363
- DARKKHAKI: 0xbdb76bff,
364
- DARKMAGENTA: 0x8b008bff,
365
- DARKOLIVEGREEN: 0x556b2fff,
366
- DARKORANGE: 0xff8c00ff,
367
- DARKORCHID: 0x9932ccff,
368
- DARKRED: 0x8b0000ff,
369
- DARKSALMON: 0xe9967aff,
370
- DARKSEAGREEN: 0x8fbc8fff,
371
- DARKSLATEBLUE: 0x483d8bff,
372
- DARKSLATEGRAY: 0x2f4f4fff,
373
- DARKSLATEGREY: 0x2f4f4fff,
374
- DARKTURQUOISE: 0x00ced1ff,
375
- DARKVIOLET: 0x9400d3ff,
376
- DEEPPINK: 0xff1493ff,
377
- DEEPSKYBLUE: 0x00bfffff,
378
- DIMGRAY: 0x696969ff,
379
- DIMGREY: 0x696969ff,
380
- DODGERBLUE: 0x1e90ffff,
381
- FIREBRICK: 0xb22222ff,
382
- FLORALWHITE: 0xfffaf0ff,
383
- FORESTGREEN: 0x228b22ff,
384
- FUCHSIA: 0xff00ffff,
385
- GAINSBORO: 0xdcdcdcff,
386
- GHOSTWHITE: 0xf8f8ffff,
387
- GOLD: 0xffd700ff,
388
- GOLDENROD: 0xdaa520ff,
389
- GRAY: 0x808080ff,
390
- GREEN: 0x008000ff,
391
- GREENYELLOW: 0xadff2fff,
392
- GREY: 0x808080ff,
393
- HONEYDEW: 0xf0fff0ff,
394
- HOTPINK: 0xff69b4ff,
395
- INDIANRED: 0xcd5c5cff,
396
- INDIGO: 0x4b0082ff,
397
- IVORY: 0xfffff0ff,
398
- KHAKI: 0xf0e68cff,
399
- LAVENDER: 0xe6e6faff,
400
- LAVENDERBLUSH: 0xfff0f5ff,
401
- LAWNGREEN: 0x7cfc00ff,
402
- LEMONCHIFFON: 0xfffacdff,
403
- LIGHTBLUE: 0xadd8e6ff,
404
- LIGHTCORAL: 0xf08080ff,
405
- LIGHTCYAN: 0xe0ffffff,
406
- LIGHTGOLDENRODYELLOW: 0xfafad2ff,
407
- LIGHTGRAY: 0xd3d3d3ff,
408
- LIGHTGREEN: 0x90ee90ff,
409
- LIGHTGREY: 0xd3d3d3ff,
410
- LIGHTPINK: 0xffb6c1ff,
411
- LIGHTSALMON: 0xffa07aff,
412
- LIGHTSEAGREEN: 0x20b2aaff,
413
- LIGHTSKYBLUE: 0x87cefaff,
414
- LIGHTSLATEGRAY: 0x778899ff,
415
- LIGHTSLATEGREY: 0x778899ff,
416
- LIGHTSTEELBLUE: 0xb0c4deff,
417
- LIGHTYELLOW: 0xffffe0ff,
418
- LIME: 0x00ff00ff,
419
- LIMEGREEN: 0x32cd32ff,
420
- LINEN: 0xfaf0e6ff,
421
- MAGENTA: 0xff00ffff,
422
- MAROON: 0x800000ff,
423
- MEDIUMAQUAMARINE: 0x66cdaaff,
424
- MEDIUMBLUE: 0x0000cdff,
425
- MEDIUMORCHID: 0xba55d3ff,
426
- MEDIUMPURPLE: 0x9370dbff,
427
- MEDIUMSEAGREEN: 0x3cb371ff,
428
- MEDIUMSLATEBLUE: 0x7b68eeff,
429
- MEDIUMSPRINGGREEN: 0x00fa9aff,
430
- MEDIUMTURQUOISE: 0x48d1ccff,
431
- MEDIUMVIOLETRED: 0xc71585ff,
432
- MIDNIGHTBLUE: 0x191970ff,
433
- MINTCREAM: 0xf5fffaff,
434
- MISTYROSE: 0xffe4e1ff,
435
- MOCCASIN: 0xffe4b5ff,
436
- NAVAJOWHITE: 0xffdeadff,
437
- NAVY: 0x000080ff,
438
- OLDLACE: 0xfdf5e6ff,
439
- OLIVE: 0x808000ff,
440
- OLIVEDRAB: 0x6b8e23ff,
441
- ORANGE: 0xffa500ff,
442
- ORANGERED: 0xff4500ff,
443
- ORCHID: 0xda70d6ff,
444
- PALEGOLDENROD: 0xeee8aaff,
445
- PALEGREEN: 0x98fb98ff,
446
- PALETURQUOISE: 0xafeeeeff,
447
- PALEVIOLETRED: 0xdb7093ff,
448
- PAPAYAWHIP: 0xffefd5ff,
449
- PEACHPUFF: 0xffdab9ff,
450
- PERU: 0xcd853fff,
451
- PINK: 0xffc0cbff,
452
- PLUM: 0xdda0ddff,
453
- POWDERBLUE: 0xb0e0e6ff,
454
- PURPLE: 0x800080ff,
455
- REBECCAPURPLE: 0x663399ff,
456
- RED: 0xff0000ff,
457
- ROSYBROWN: 0xbc8f8fff,
458
- ROYALBLUE: 0x4169e1ff,
459
- SADDLEBROWN: 0x8b4513ff,
460
- SALMON: 0xfa8072ff,
461
- SANDYBROWN: 0xf4a460ff,
462
- SEAGREEN: 0x2e8b57ff,
463
- SEASHELL: 0xfff5eeff,
464
- SIENNA: 0xa0522dff,
465
- SILVER: 0xc0c0c0ff,
466
- SKYBLUE: 0x87ceebff,
467
- SLATEBLUE: 0x6a5acdff,
468
- SLATEGRAY: 0x708090ff,
469
- SLATEGREY: 0x708090ff,
470
- SNOW: 0xfffafaff,
471
- SPRINGGREEN: 0x00ff7fff,
472
- STEELBLUE: 0x4682b4ff,
473
- TAN: 0xd2b48cff,
474
- TEAL: 0x008080ff,
475
- THISTLE: 0xd8bfd8ff,
476
- TOMATO: 0xff6347ff,
477
- TRANSPARENT: 0x00000000,
478
- TURQUOISE: 0x40e0d0ff,
479
- VIOLET: 0xee82eeff,
480
- WHEAT: 0xf5deb3ff,
481
- WHITE: 0xffffffff,
482
- WHITESMOKE: 0xf5f5f5ff,
483
- YELLOW: 0xffff00ff,
484
- YELLOWGREEN: 0x9acd32ff
485
- };
@@ -1,35 +0,0 @@
1
- import { CSSValue, parseFunctionArgs } from '../../syntax/parser';
2
- import { CSSImageType, CSSLinearGradientImage, GradientCorner, UnprocessedGradientColorStop } from '../image';
3
- import { TokenType } from '../../syntax/tokenizer';
4
- import { isAngle, angle as angleType, parseNamedSide, deg } from '../angle';
5
- import { parseColorStop } from './gradient';
6
- import { Context } from '../../../core/context';
7
-
8
- export const prefixLinearGradient = (context: Context, tokens: CSSValue[]): CSSLinearGradientImage => {
9
- let angle: number | GradientCorner = deg(180);
10
- const stops: UnprocessedGradientColorStop[] = [];
11
-
12
- parseFunctionArgs(tokens).forEach((arg, i) => {
13
- if (i === 0) {
14
- const firstToken = arg[0];
15
- if (
16
- firstToken.type === TokenType.IDENT_TOKEN &&
17
- ['top', 'left', 'right', 'bottom'].indexOf(firstToken.value) !== -1
18
- ) {
19
- angle = parseNamedSide(arg);
20
- return;
21
- } else if (isAngle(firstToken)) {
22
- angle = (angleType.parse(context, firstToken) + deg(270)) % deg(360);
23
- return;
24
- }
25
- }
26
- const colorStop = parseColorStop(context, arg);
27
- stops.push(colorStop);
28
- });
29
-
30
- return {
31
- angle,
32
- stops,
33
- type: CSSImageType.LINEAR_GRADIENT
34
- };
35
- };
@@ -1,106 +0,0 @@
1
- import { CSSValue, isIdentToken, parseFunctionArgs } from '../../syntax/parser';
2
- import {
3
- CSSImageType,
4
- CSSRadialExtent,
5
- CSSRadialGradientImage,
6
- CSSRadialShape,
7
- CSSRadialSize,
8
- UnprocessedGradientColorStop
9
- } from '../image';
10
- import { parseColorStop } from './gradient';
11
- import {
12
- FIFTY_PERCENT,
13
- HUNDRED_PERCENT,
14
- isLengthPercentage,
15
- LengthPercentage,
16
- ZERO_LENGTH
17
- } from '../length-percentage';
18
- import { isLength } from '../length';
19
- import {
20
- CIRCLE,
21
- CLOSEST_CORNER,
22
- CLOSEST_SIDE,
23
- CONTAIN,
24
- COVER,
25
- ELLIPSE,
26
- FARTHEST_CORNER,
27
- FARTHEST_SIDE
28
- } from './radial-gradient';
29
- import { Context } from '../../../core/context';
30
-
31
- export const prefixRadialGradient = (context: Context, tokens: CSSValue[]): CSSRadialGradientImage => {
32
- let shape: CSSRadialShape = CSSRadialShape.CIRCLE;
33
- let size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
34
- const stops: UnprocessedGradientColorStop[] = [];
35
- const position: LengthPercentage[] = [];
36
-
37
- parseFunctionArgs(tokens).forEach((arg, i) => {
38
- let isColorStop = true;
39
- if (i === 0) {
40
- isColorStop = arg.reduce((acc, token) => {
41
- if (isIdentToken(token)) {
42
- switch (token.value) {
43
- case 'center':
44
- position.push(FIFTY_PERCENT);
45
- return false;
46
- case 'top':
47
- case 'left':
48
- position.push(ZERO_LENGTH);
49
- return false;
50
- case 'right':
51
- case 'bottom':
52
- position.push(HUNDRED_PERCENT);
53
- return false;
54
- }
55
- } else if (isLengthPercentage(token) || isLength(token)) {
56
- position.push(token);
57
- return false;
58
- }
59
-
60
- return acc;
61
- }, isColorStop);
62
- } else if (i === 1) {
63
- isColorStop = arg.reduce((acc, token) => {
64
- if (isIdentToken(token)) {
65
- switch (token.value) {
66
- case CIRCLE:
67
- shape = CSSRadialShape.CIRCLE;
68
- return false;
69
- case ELLIPSE:
70
- shape = CSSRadialShape.ELLIPSE;
71
- return false;
72
- case CONTAIN:
73
- case CLOSEST_SIDE:
74
- size = CSSRadialExtent.CLOSEST_SIDE;
75
- return false;
76
- case FARTHEST_SIDE:
77
- size = CSSRadialExtent.FARTHEST_SIDE;
78
- return false;
79
- case CLOSEST_CORNER:
80
- size = CSSRadialExtent.CLOSEST_CORNER;
81
- return false;
82
- case COVER:
83
- case FARTHEST_CORNER:
84
- size = CSSRadialExtent.FARTHEST_CORNER;
85
- return false;
86
- }
87
- } else if (isLength(token) || isLengthPercentage(token)) {
88
- if (!Array.isArray(size)) {
89
- size = [];
90
- }
91
- size.push(token);
92
- return false;
93
- }
94
-
95
- return acc;
96
- }, isColorStop);
97
- }
98
-
99
- if (isColorStop) {
100
- const colorStop = parseColorStop(context, arg);
101
- stops.push(colorStop);
102
- }
103
- });
104
-
105
- return { size, shape, stops, position, type: CSSImageType.RADIAL_GRADIENT };
106
- };
@@ -1,69 +0,0 @@
1
- import { CSSValue, isIdentToken, isNumberToken, nonFunctionArgSeparator, parseFunctionArgs } from '../../syntax/parser';
2
- import {
3
- CSSImageType,
4
- CSSLinearGradientImage,
5
- CSSRadialExtent,
6
- CSSRadialGradientImage,
7
- CSSRadialShape,
8
- CSSRadialSize,
9
- UnprocessedGradientColorStop
10
- } from '../image';
11
- import { deg } from '../angle';
12
- import { TokenType } from '../../syntax/tokenizer';
13
- import { color as colorType } from '../color';
14
- import { HUNDRED_PERCENT, LengthPercentage, ZERO_LENGTH } from '../length-percentage';
15
- import { Context } from '../../../core/context';
16
-
17
- export const webkitGradient = (
18
- context: Context,
19
- tokens: CSSValue[]
20
- ): CSSLinearGradientImage | CSSRadialGradientImage => {
21
- const angle = deg(180);
22
- const stops: UnprocessedGradientColorStop[] = [];
23
- let type = CSSImageType.LINEAR_GRADIENT;
24
- const shape: CSSRadialShape = CSSRadialShape.CIRCLE;
25
- const size: CSSRadialSize = CSSRadialExtent.FARTHEST_CORNER;
26
- const position: LengthPercentage[] = [];
27
- parseFunctionArgs(tokens).forEach((arg, i) => {
28
- const firstToken = arg[0];
29
- if (i === 0) {
30
- if (isIdentToken(firstToken) && firstToken.value === 'linear') {
31
- type = CSSImageType.LINEAR_GRADIENT;
32
- return;
33
- } else if (isIdentToken(firstToken) && firstToken.value === 'radial') {
34
- type = CSSImageType.RADIAL_GRADIENT;
35
- return;
36
- }
37
- }
38
-
39
- if (firstToken.type === TokenType.FUNCTION) {
40
- if (firstToken.name === 'from') {
41
- const color = colorType.parse(context, firstToken.values[0]);
42
- stops.push({ stop: ZERO_LENGTH, color });
43
- } else if (firstToken.name === 'to') {
44
- const color = colorType.parse(context, firstToken.values[0]);
45
- stops.push({ stop: HUNDRED_PERCENT, color });
46
- } else if (firstToken.name === 'color-stop') {
47
- const values = firstToken.values.filter(nonFunctionArgSeparator);
48
- if (values.length === 2) {
49
- const color = colorType.parse(context, values[1]);
50
- const stop = values[0];
51
- if (isNumberToken(stop)) {
52
- stops.push({
53
- stop: { type: TokenType.PERCENTAGE_TOKEN, number: stop.number * 100, flags: stop.flags },
54
- color
55
- });
56
- }
57
- }
58
- }
59
- }
60
- });
61
-
62
- return type === CSSImageType.LINEAR_GRADIENT
63
- ? {
64
- angle: (angle + deg(180)) % deg(360),
65
- stops,
66
- type
67
- }
68
- : { size, shape, stops, position, type };
69
- };