@webstudio-is/css-engine 0.0.0-017f1bd

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 (36) hide show
  1. package/LICENSE +661 -0
  2. package/README.md +6 -0
  3. package/lib/index.js +988 -0
  4. package/lib/runtime.js +114 -0
  5. package/lib/types/__generated__/types.d.ts +3 -0
  6. package/lib/types/core/atomic.d.ts +14 -0
  7. package/lib/types/core/atomic.test.d.ts +1 -0
  8. package/lib/types/core/compare-media.d.ts +6 -0
  9. package/lib/types/core/compare-media.test.d.ts +1 -0
  10. package/lib/types/core/create-style-sheet.d.ts +4 -0
  11. package/lib/types/core/css-engine.stories.d.ts +5 -0
  12. package/lib/types/core/equal-media.d.ts +2 -0
  13. package/lib/types/core/equal-media.test.d.ts +1 -0
  14. package/lib/types/core/find-applicable-media.d.ts +2 -0
  15. package/lib/types/core/find-applicable-media.test.d.ts +1 -0
  16. package/lib/types/core/index.d.ts +13 -0
  17. package/lib/types/core/match-media.d.ts +2 -0
  18. package/lib/types/core/match-media.test.d.ts +1 -0
  19. package/lib/types/core/merger.d.ts +604 -0
  20. package/lib/types/core/merger.test.d.ts +1 -0
  21. package/lib/types/core/prefixer.d.ts +2 -0
  22. package/lib/types/core/prefixer.test.d.ts +1 -0
  23. package/lib/types/core/rules.d.ts +107 -0
  24. package/lib/types/core/style-element.d.ts +10 -0
  25. package/lib/types/core/style-sheet-regular.d.ts +3 -0
  26. package/lib/types/core/style-sheet-regular.test.d.ts +1 -0
  27. package/lib/types/core/style-sheet.d.ts +24 -0
  28. package/lib/types/core/to-property.d.ts +5 -0
  29. package/lib/types/core/to-property.test.d.ts +1 -0
  30. package/lib/types/core/to-value.d.ts +3 -0
  31. package/lib/types/core/to-value.test.d.ts +1 -0
  32. package/lib/types/css.d.ts +1 -0
  33. package/lib/types/index.d.ts +5 -0
  34. package/lib/types/runtime.d.ts +1 -0
  35. package/lib/types/schema.d.ts +9623 -0
  36. package/package.json +46 -0
@@ -0,0 +1,604 @@
1
+ import { StyleValue } from "../schema";
2
+ import type { StyleMap } from "./rules";
3
+ export declare const mergeStyles: (styleMap: StyleMap) => Map<string, {
4
+ value: {
5
+ value: string;
6
+ type: "asset";
7
+ } | {
8
+ type: "url";
9
+ url: string;
10
+ };
11
+ type: "image";
12
+ hidden?: boolean | undefined;
13
+ } | {
14
+ value: number;
15
+ type: "unit";
16
+ unit: "number" | import("..").__Unit;
17
+ hidden?: boolean | undefined;
18
+ } | {
19
+ value: string;
20
+ type: "keyword";
21
+ hidden?: boolean | undefined;
22
+ } | {
23
+ value: string;
24
+ type: "unparsed";
25
+ hidden?: boolean | undefined;
26
+ } | {
27
+ r: number;
28
+ type: "rgb";
29
+ g: number;
30
+ b: number;
31
+ alpha: number;
32
+ hidden?: boolean | undefined;
33
+ } | {
34
+ type: "function";
35
+ name: string;
36
+ args: StyleValue;
37
+ hidden?: boolean;
38
+ } | {
39
+ value: string;
40
+ type: "var";
41
+ fallback?: {
42
+ value: number;
43
+ type: "unit";
44
+ unit: "number" | import("..").__Unit;
45
+ hidden?: boolean | undefined;
46
+ } | {
47
+ value: string;
48
+ type: "keyword";
49
+ hidden?: boolean | undefined;
50
+ } | {
51
+ value: string;
52
+ type: "unparsed";
53
+ hidden?: boolean | undefined;
54
+ } | {
55
+ r: number;
56
+ type: "rgb";
57
+ g: number;
58
+ b: number;
59
+ alpha: number;
60
+ hidden?: boolean | undefined;
61
+ } | undefined;
62
+ hidden?: boolean | undefined;
63
+ } | {
64
+ value: ({
65
+ value: {
66
+ value: string;
67
+ type: "asset";
68
+ } | {
69
+ type: "url";
70
+ url: string;
71
+ };
72
+ type: "image";
73
+ hidden?: boolean | undefined;
74
+ } | {
75
+ value: number;
76
+ type: "unit";
77
+ unit: "number" | import("..").__Unit;
78
+ hidden?: boolean | undefined;
79
+ } | {
80
+ value: string;
81
+ type: "keyword";
82
+ hidden?: boolean | undefined;
83
+ } | {
84
+ value: string;
85
+ type: "unparsed";
86
+ hidden?: boolean | undefined;
87
+ } | {
88
+ r: number;
89
+ type: "rgb";
90
+ g: number;
91
+ b: number;
92
+ alpha: number;
93
+ hidden?: boolean | undefined;
94
+ } | {
95
+ type: "function";
96
+ name: string;
97
+ args: StyleValue;
98
+ hidden?: boolean;
99
+ } | {
100
+ value: string;
101
+ type: "var";
102
+ fallback?: {
103
+ value: number;
104
+ type: "unit";
105
+ unit: "number" | import("..").__Unit;
106
+ hidden?: boolean | undefined;
107
+ } | {
108
+ value: string;
109
+ type: "keyword";
110
+ hidden?: boolean | undefined;
111
+ } | {
112
+ value: string;
113
+ type: "unparsed";
114
+ hidden?: boolean | undefined;
115
+ } | {
116
+ r: number;
117
+ type: "rgb";
118
+ g: number;
119
+ b: number;
120
+ alpha: number;
121
+ hidden?: boolean | undefined;
122
+ } | undefined;
123
+ hidden?: boolean | undefined;
124
+ })[];
125
+ type: "tuple";
126
+ hidden?: boolean | undefined;
127
+ } | {
128
+ position: "inset" | "outset";
129
+ type: "shadow";
130
+ offsetX: {
131
+ value: number;
132
+ type: "unit";
133
+ unit: "number" | import("..").__Unit;
134
+ hidden?: boolean | undefined;
135
+ } | {
136
+ value: string;
137
+ type: "var";
138
+ fallback?: {
139
+ value: number;
140
+ type: "unit";
141
+ unit: "number" | import("..").__Unit;
142
+ hidden?: boolean | undefined;
143
+ } | {
144
+ value: string;
145
+ type: "keyword";
146
+ hidden?: boolean | undefined;
147
+ } | {
148
+ value: string;
149
+ type: "unparsed";
150
+ hidden?: boolean | undefined;
151
+ } | {
152
+ r: number;
153
+ type: "rgb";
154
+ g: number;
155
+ b: number;
156
+ alpha: number;
157
+ hidden?: boolean | undefined;
158
+ } | undefined;
159
+ hidden?: boolean | undefined;
160
+ };
161
+ offsetY: {
162
+ value: number;
163
+ type: "unit";
164
+ unit: "number" | import("..").__Unit;
165
+ hidden?: boolean | undefined;
166
+ } | {
167
+ value: string;
168
+ type: "var";
169
+ fallback?: {
170
+ value: number;
171
+ type: "unit";
172
+ unit: "number" | import("..").__Unit;
173
+ hidden?: boolean | undefined;
174
+ } | {
175
+ value: string;
176
+ type: "keyword";
177
+ hidden?: boolean | undefined;
178
+ } | {
179
+ value: string;
180
+ type: "unparsed";
181
+ hidden?: boolean | undefined;
182
+ } | {
183
+ r: number;
184
+ type: "rgb";
185
+ g: number;
186
+ b: number;
187
+ alpha: number;
188
+ hidden?: boolean | undefined;
189
+ } | undefined;
190
+ hidden?: boolean | undefined;
191
+ };
192
+ color?: {
193
+ value: string;
194
+ type: "keyword";
195
+ hidden?: boolean | undefined;
196
+ } | {
197
+ r: number;
198
+ type: "rgb";
199
+ g: number;
200
+ b: number;
201
+ alpha: number;
202
+ hidden?: boolean | undefined;
203
+ } | {
204
+ value: string;
205
+ type: "var";
206
+ fallback?: {
207
+ value: number;
208
+ type: "unit";
209
+ unit: "number" | import("..").__Unit;
210
+ hidden?: boolean | undefined;
211
+ } | {
212
+ value: string;
213
+ type: "keyword";
214
+ hidden?: boolean | undefined;
215
+ } | {
216
+ value: string;
217
+ type: "unparsed";
218
+ hidden?: boolean | undefined;
219
+ } | {
220
+ r: number;
221
+ type: "rgb";
222
+ g: number;
223
+ b: number;
224
+ alpha: number;
225
+ hidden?: boolean | undefined;
226
+ } | undefined;
227
+ hidden?: boolean | undefined;
228
+ } | undefined;
229
+ hidden?: boolean | undefined;
230
+ blur?: {
231
+ value: number;
232
+ type: "unit";
233
+ unit: "number" | import("..").__Unit;
234
+ hidden?: boolean | undefined;
235
+ } | {
236
+ value: string;
237
+ type: "var";
238
+ fallback?: {
239
+ value: number;
240
+ type: "unit";
241
+ unit: "number" | import("..").__Unit;
242
+ hidden?: boolean | undefined;
243
+ } | {
244
+ value: string;
245
+ type: "keyword";
246
+ hidden?: boolean | undefined;
247
+ } | {
248
+ value: string;
249
+ type: "unparsed";
250
+ hidden?: boolean | undefined;
251
+ } | {
252
+ r: number;
253
+ type: "rgb";
254
+ g: number;
255
+ b: number;
256
+ alpha: number;
257
+ hidden?: boolean | undefined;
258
+ } | undefined;
259
+ hidden?: boolean | undefined;
260
+ } | undefined;
261
+ spread?: {
262
+ value: number;
263
+ type: "unit";
264
+ unit: "number" | import("..").__Unit;
265
+ hidden?: boolean | undefined;
266
+ } | {
267
+ value: string;
268
+ type: "var";
269
+ fallback?: {
270
+ value: number;
271
+ type: "unit";
272
+ unit: "number" | import("..").__Unit;
273
+ hidden?: boolean | undefined;
274
+ } | {
275
+ value: string;
276
+ type: "keyword";
277
+ hidden?: boolean | undefined;
278
+ } | {
279
+ value: string;
280
+ type: "unparsed";
281
+ hidden?: boolean | undefined;
282
+ } | {
283
+ r: number;
284
+ type: "rgb";
285
+ g: number;
286
+ b: number;
287
+ alpha: number;
288
+ hidden?: boolean | undefined;
289
+ } | undefined;
290
+ hidden?: boolean | undefined;
291
+ } | undefined;
292
+ } | {
293
+ value: string;
294
+ type: "invalid";
295
+ hidden?: boolean | undefined;
296
+ } | {
297
+ value: ({
298
+ value: {
299
+ value: string;
300
+ type: "asset";
301
+ } | {
302
+ type: "url";
303
+ url: string;
304
+ };
305
+ type: "image";
306
+ hidden?: boolean | undefined;
307
+ } | {
308
+ value: number;
309
+ type: "unit";
310
+ unit: "number" | import("..").__Unit;
311
+ hidden?: boolean | undefined;
312
+ } | {
313
+ value: string;
314
+ type: "keyword";
315
+ hidden?: boolean | undefined;
316
+ } | {
317
+ value: string;
318
+ type: "unparsed";
319
+ hidden?: boolean | undefined;
320
+ } | {
321
+ r: number;
322
+ type: "rgb";
323
+ g: number;
324
+ b: number;
325
+ alpha: number;
326
+ hidden?: boolean | undefined;
327
+ } | {
328
+ type: "function";
329
+ name: string;
330
+ args: StyleValue;
331
+ hidden?: boolean;
332
+ } | {
333
+ value: string;
334
+ type: "var";
335
+ fallback?: {
336
+ value: number;
337
+ type: "unit";
338
+ unit: "number" | import("..").__Unit;
339
+ hidden?: boolean | undefined;
340
+ } | {
341
+ value: string;
342
+ type: "keyword";
343
+ hidden?: boolean | undefined;
344
+ } | {
345
+ value: string;
346
+ type: "unparsed";
347
+ hidden?: boolean | undefined;
348
+ } | {
349
+ r: number;
350
+ type: "rgb";
351
+ g: number;
352
+ b: number;
353
+ alpha: number;
354
+ hidden?: boolean | undefined;
355
+ } | undefined;
356
+ hidden?: boolean | undefined;
357
+ } | {
358
+ value: ({
359
+ value: {
360
+ value: string;
361
+ type: "asset";
362
+ } | {
363
+ type: "url";
364
+ url: string;
365
+ };
366
+ type: "image";
367
+ hidden?: boolean | undefined;
368
+ } | {
369
+ value: number;
370
+ type: "unit";
371
+ unit: "number" | import("..").__Unit;
372
+ hidden?: boolean | undefined;
373
+ } | {
374
+ value: string;
375
+ type: "keyword";
376
+ hidden?: boolean | undefined;
377
+ } | {
378
+ value: string;
379
+ type: "unparsed";
380
+ hidden?: boolean | undefined;
381
+ } | {
382
+ r: number;
383
+ type: "rgb";
384
+ g: number;
385
+ b: number;
386
+ alpha: number;
387
+ hidden?: boolean | undefined;
388
+ } | {
389
+ type: "function";
390
+ name: string;
391
+ args: StyleValue;
392
+ hidden?: boolean;
393
+ } | {
394
+ value: string;
395
+ type: "var";
396
+ fallback?: {
397
+ value: number;
398
+ type: "unit";
399
+ unit: "number" | import("..").__Unit;
400
+ hidden?: boolean | undefined;
401
+ } | {
402
+ value: string;
403
+ type: "keyword";
404
+ hidden?: boolean | undefined;
405
+ } | {
406
+ value: string;
407
+ type: "unparsed";
408
+ hidden?: boolean | undefined;
409
+ } | {
410
+ r: number;
411
+ type: "rgb";
412
+ g: number;
413
+ b: number;
414
+ alpha: number;
415
+ hidden?: boolean | undefined;
416
+ } | undefined;
417
+ hidden?: boolean | undefined;
418
+ })[];
419
+ type: "tuple";
420
+ hidden?: boolean | undefined;
421
+ } | {
422
+ position: "inset" | "outset";
423
+ type: "shadow";
424
+ offsetX: {
425
+ value: number;
426
+ type: "unit";
427
+ unit: "number" | import("..").__Unit;
428
+ hidden?: boolean | undefined;
429
+ } | {
430
+ value: string;
431
+ type: "var";
432
+ fallback?: {
433
+ value: number;
434
+ type: "unit";
435
+ unit: "number" | import("..").__Unit;
436
+ hidden?: boolean | undefined;
437
+ } | {
438
+ value: string;
439
+ type: "keyword";
440
+ hidden?: boolean | undefined;
441
+ } | {
442
+ value: string;
443
+ type: "unparsed";
444
+ hidden?: boolean | undefined;
445
+ } | {
446
+ r: number;
447
+ type: "rgb";
448
+ g: number;
449
+ b: number;
450
+ alpha: number;
451
+ hidden?: boolean | undefined;
452
+ } | undefined;
453
+ hidden?: boolean | undefined;
454
+ };
455
+ offsetY: {
456
+ value: number;
457
+ type: "unit";
458
+ unit: "number" | import("..").__Unit;
459
+ hidden?: boolean | undefined;
460
+ } | {
461
+ value: string;
462
+ type: "var";
463
+ fallback?: {
464
+ value: number;
465
+ type: "unit";
466
+ unit: "number" | import("..").__Unit;
467
+ hidden?: boolean | undefined;
468
+ } | {
469
+ value: string;
470
+ type: "keyword";
471
+ hidden?: boolean | undefined;
472
+ } | {
473
+ value: string;
474
+ type: "unparsed";
475
+ hidden?: boolean | undefined;
476
+ } | {
477
+ r: number;
478
+ type: "rgb";
479
+ g: number;
480
+ b: number;
481
+ alpha: number;
482
+ hidden?: boolean | undefined;
483
+ } | undefined;
484
+ hidden?: boolean | undefined;
485
+ };
486
+ color?: {
487
+ value: string;
488
+ type: "keyword";
489
+ hidden?: boolean | undefined;
490
+ } | {
491
+ r: number;
492
+ type: "rgb";
493
+ g: number;
494
+ b: number;
495
+ alpha: number;
496
+ hidden?: boolean | undefined;
497
+ } | {
498
+ value: string;
499
+ type: "var";
500
+ fallback?: {
501
+ value: number;
502
+ type: "unit";
503
+ unit: "number" | import("..").__Unit;
504
+ hidden?: boolean | undefined;
505
+ } | {
506
+ value: string;
507
+ type: "keyword";
508
+ hidden?: boolean | undefined;
509
+ } | {
510
+ value: string;
511
+ type: "unparsed";
512
+ hidden?: boolean | undefined;
513
+ } | {
514
+ r: number;
515
+ type: "rgb";
516
+ g: number;
517
+ b: number;
518
+ alpha: number;
519
+ hidden?: boolean | undefined;
520
+ } | undefined;
521
+ hidden?: boolean | undefined;
522
+ } | undefined;
523
+ hidden?: boolean | undefined;
524
+ blur?: {
525
+ value: number;
526
+ type: "unit";
527
+ unit: "number" | import("..").__Unit;
528
+ hidden?: boolean | undefined;
529
+ } | {
530
+ value: string;
531
+ type: "var";
532
+ fallback?: {
533
+ value: number;
534
+ type: "unit";
535
+ unit: "number" | import("..").__Unit;
536
+ hidden?: boolean | undefined;
537
+ } | {
538
+ value: string;
539
+ type: "keyword";
540
+ hidden?: boolean | undefined;
541
+ } | {
542
+ value: string;
543
+ type: "unparsed";
544
+ hidden?: boolean | undefined;
545
+ } | {
546
+ r: number;
547
+ type: "rgb";
548
+ g: number;
549
+ b: number;
550
+ alpha: number;
551
+ hidden?: boolean | undefined;
552
+ } | undefined;
553
+ hidden?: boolean | undefined;
554
+ } | undefined;
555
+ spread?: {
556
+ value: number;
557
+ type: "unit";
558
+ unit: "number" | import("..").__Unit;
559
+ hidden?: boolean | undefined;
560
+ } | {
561
+ value: string;
562
+ type: "var";
563
+ fallback?: {
564
+ value: number;
565
+ type: "unit";
566
+ unit: "number" | import("..").__Unit;
567
+ hidden?: boolean | undefined;
568
+ } | {
569
+ value: string;
570
+ type: "keyword";
571
+ hidden?: boolean | undefined;
572
+ } | {
573
+ value: string;
574
+ type: "unparsed";
575
+ hidden?: boolean | undefined;
576
+ } | {
577
+ r: number;
578
+ type: "rgb";
579
+ g: number;
580
+ b: number;
581
+ alpha: number;
582
+ hidden?: boolean | undefined;
583
+ } | undefined;
584
+ hidden?: boolean | undefined;
585
+ } | undefined;
586
+ } | {
587
+ value: string;
588
+ type: "invalid";
589
+ hidden?: boolean | undefined;
590
+ })[];
591
+ type: "layers";
592
+ hidden?: boolean | undefined;
593
+ } | {
594
+ value: string[];
595
+ type: "fontFamily";
596
+ hidden?: boolean | undefined;
597
+ } | {
598
+ type: "guaranteedInvalid";
599
+ hidden?: boolean | undefined;
600
+ } | {
601
+ value: "";
602
+ type: "unset";
603
+ hidden?: boolean | undefined;
604
+ }>;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ import type { StyleMap } from "./rules";
2
+ export declare const prefixStyles: (styleMap: StyleMap) => StyleMap;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,107 @@
1
+ import type { StyleValue } from "../schema";
2
+ import { type TransformValue } from "./to-value";
3
+ /**
4
+ * Use CssStyleMap instead to enforce hyphenated properties.
5
+ * @deprecated
6
+ */
7
+ export type StyleMap = Map<string, StyleValue>;
8
+ export declare const generateStyleMap: (style: StyleMap, { indent, transformValue, }?: {
9
+ indent?: number;
10
+ transformValue?: TransformValue;
11
+ }) => string;
12
+ export type Declaration = {
13
+ breakpoint: string;
14
+ selector: string;
15
+ property: string;
16
+ value: StyleValue;
17
+ };
18
+ type DeclarationKey = Omit<Declaration, "value">;
19
+ /**
20
+ * Reusable style rule in any nesting rule
21
+ *
22
+ * @mixin name {
23
+ * \@media breakpoint {
24
+ * &selector {
25
+ * property: value
26
+ * }
27
+ * }
28
+ * }
29
+ */
30
+ export declare class MixinRule {
31
+ #private;
32
+ isDirtyBreakpoint(breakpoint: string): boolean;
33
+ /**
34
+ * reset breakpoints invalidation
35
+ */
36
+ clearBreakpoints(): void;
37
+ setDeclaration(declaration: Declaration): void;
38
+ deleteDeclaration(declaration: DeclarationKey): void;
39
+ getDeclarations(): MapIterator<Declaration>;
40
+ }
41
+ /**
42
+ * Universal style rule with nested selectors and media queries support
43
+ * Rules are generated by each media query
44
+ * and heavily cached to avoid complex computation
45
+ *
46
+ * selector {
47
+ * \@media breakpoint {
48
+ * &selector {
49
+ * property: value
50
+ * }
51
+ * }
52
+ * }
53
+ */
54
+ export declare class NestingRule {
55
+ #private;
56
+ constructor(mixinRules: Map<string, MixinRule>, selector: string, descendantSuffix: string);
57
+ getSelector(): string;
58
+ setSelector(selector: string): void;
59
+ getDescendantSuffix(): string;
60
+ addMixin(mixin: string): void;
61
+ applyMixins(mixins: string[]): void;
62
+ setDeclaration(declaration: Declaration): void;
63
+ deleteDeclaration(declaration: DeclarationKey): void;
64
+ getMergedDeclarations(): Declaration[];
65
+ toString({ breakpoint, indent, transformValue, }: {
66
+ breakpoint: string;
67
+ indent?: number;
68
+ transformValue?: TransformValue;
69
+ }): string;
70
+ }
71
+ export type MediaRuleOptions = {
72
+ minWidth?: number;
73
+ maxWidth?: number;
74
+ mediaType?: "all" | "screen" | "print";
75
+ };
76
+ export declare class MediaRule {
77
+ #private;
78
+ options: MediaRuleOptions;
79
+ rules: Map<string, PlaintextRule>;
80
+ constructor(name: string, options?: MediaRuleOptions);
81
+ insertRule(rule: PlaintextRule): PlaintextRule;
82
+ get cssText(): string;
83
+ toString(): string;
84
+ generateRule({ nestingRules, transformValue, }: {
85
+ nestingRules: NestingRule[];
86
+ transformValue?: TransformValue;
87
+ }): string;
88
+ }
89
+ export declare class PlaintextRule {
90
+ cssText: string;
91
+ constructor(cssText: string);
92
+ toString(): string;
93
+ }
94
+ export type FontFaceOptions = {
95
+ fontFamily: string;
96
+ fontStyle?: "normal" | "italic" | "oblique";
97
+ fontWeight?: number | string;
98
+ fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
99
+ src: string;
100
+ };
101
+ export declare class FontFaceRule {
102
+ #private;
103
+ constructor(options: FontFaceOptions);
104
+ get cssText(): string;
105
+ toString(): string;
106
+ }
107
+ export {};