@webstudio-is/react-sdk 0.78.0 → 0.79.0

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 (9) hide show
  1. package/lib/cjs/css/normalize.js +22 -42
  2. package/lib/cjs/css/presets.js +1 -111
  3. package/lib/css/normalize.js +22 -32
  4. package/lib/css/presets.js +1 -111
  5. package/lib/types/css/normalize.d.ts +0 -520
  6. package/lib/types/css/presets.d.ts +0 -282
  7. package/package.json +7 -7
  8. package/src/css/normalize.ts +22 -31
  9. package/src/css/presets.ts +0 -110
package/lib/types/css/presets.d.ts CHANGED
@@ -1,285 +1,3 @@
1
1
  import type { Styles } from "./normalize";
2
2
  export declare const borders: Styles;
3
3
  export declare const outline: Styles;
4
- export declare const margins: ({
5
- property: "marginTop";
6
- value: {
7
- type: "unit";
8
- value: number;
9
- unit: "px";
10
- };
11
- } | {
12
- property: "marginRight";
13
- value: {
14
- type: "unit";
15
- value: number;
16
- unit: "px";
17
- };
18
- } | {
19
- property: "marginBottom";
20
- value: {
21
- type: "unit";
22
- value: number;
23
- unit: "px";
24
- };
25
- } | {
26
- property: "marginLeft";
27
- value: {
28
- type: "unit";
29
- value: number;
30
- unit: "px";
31
- };
32
- })[];
33
- export declare const verticalMargins: ({
34
- property: "marginTop";
35
- value: {
36
- type: "unit";
37
- value: number;
38
- unit: "px";
39
- };
40
- } | {
41
- property: "marginBottom";
42
- value: {
43
- type: "unit";
44
- value: number;
45
- unit: "px";
46
- };
47
- })[];
48
- export declare const blockquote: ({
49
- property: "marginTop";
50
- value: {
51
- type: "unit";
52
- value: number;
53
- unit: "px";
54
- };
55
- } | {
56
- property: "marginRight";
57
- value: {
58
- type: "unit";
59
- value: number;
60
- unit: "px";
61
- };
62
- } | {
63
- property: "marginBottom";
64
- value: {
65
- type: "unit";
66
- value: number;
67
- unit: "px";
68
- };
69
- } | {
70
- property: "marginLeft";
71
- value: {
72
- type: "unit";
73
- value: number;
74
- unit: "px";
75
- };
76
- } | {
77
- property: "paddingTop";
78
- value: {
79
- type: "unit";
80
- value: number;
81
- unit: "px";
82
- r?: undefined;
83
- g?: undefined;
84
- b?: undefined;
85
- alpha?: undefined;
86
- };
87
- } | {
88
- property: "paddingBottom";
89
- value: {
90
- type: "unit";
91
- value: number;
92
- unit: "px";
93
- r?: undefined;
94
- g?: undefined;
95
- b?: undefined;
96
- alpha?: undefined;
97
- };
98
- } | {
99
- property: "paddingLeft";
100
- value: {
101
- type: "unit";
102
- value: number;
103
- unit: "px";
104
- r?: undefined;
105
- g?: undefined;
106
- b?: undefined;
107
- alpha?: undefined;
108
- };
109
- } | {
110
- property: "paddingRight";
111
- value: {
112
- type: "unit";
113
- value: number;
114
- unit: "px";
115
- r?: undefined;
116
- g?: undefined;
117
- b?: undefined;
118
- alpha?: undefined;
119
- };
120
- } | {
121
- property: "borderLeftWidth";
122
- value: {
123
- type: "unit";
124
- value: number;
125
- unit: "px";
126
- r?: undefined;
127
- g?: undefined;
128
- b?: undefined;
129
- alpha?: undefined;
130
- };
131
- } | {
132
- property: "borderLeftStyle";
133
- value: {
134
- type: "keyword";
135
- value: string;
136
- unit?: undefined;
137
- r?: undefined;
138
- g?: undefined;
139
- b?: undefined;
140
- alpha?: undefined;
141
- };
142
- } | {
143
- property: "borderLeftColor";
144
- value: {
145
- type: "rgb";
146
- r: number;
147
- g: number;
148
- b: number;
149
- alpha: number;
150
- value?: undefined;
151
- unit?: undefined;
152
- };
153
- })[];
154
- export declare const h1: ({
155
- property: "marginTop";
156
- value: {
157
- type: "unit";
158
- value: number;
159
- unit: "px";
160
- };
161
- } | {
162
- property: "marginBottom";
163
- value: {
164
- type: "unit";
165
- value: number;
166
- unit: "px";
167
- };
168
- } | {
169
- property: "fontSize";
170
- value: {
171
- type: "unit";
172
- value: number;
173
- unit: "px";
174
- };
175
- })[];
176
- export declare const h2: ({
177
- property: "marginTop";
178
- value: {
179
- type: "unit";
180
- value: number;
181
- unit: "px";
182
- };
183
- } | {
184
- property: "marginBottom";
185
- value: {
186
- type: "unit";
187
- value: number;
188
- unit: "px";
189
- };
190
- } | {
191
- property: "fontSize";
192
- value: {
193
- type: "unit";
194
- value: number;
195
- unit: "px";
196
- };
197
- })[];
198
- export declare const h3: ({
199
- property: "marginTop";
200
- value: {
201
- type: "unit";
202
- value: number;
203
- unit: "px";
204
- };
205
- } | {
206
- property: "marginBottom";
207
- value: {
208
- type: "unit";
209
- value: number;
210
- unit: "px";
211
- };
212
- } | {
213
- property: "fontSize";
214
- value: {
215
- type: "unit";
216
- value: number;
217
- unit: "px";
218
- };
219
- })[];
220
- export declare const h4: ({
221
- property: "marginTop";
222
- value: {
223
- type: "unit";
224
- value: number;
225
- unit: "px";
226
- };
227
- } | {
228
- property: "marginBottom";
229
- value: {
230
- type: "unit";
231
- value: number;
232
- unit: "px";
233
- };
234
- } | {
235
- property: "fontSize";
236
- value: {
237
- type: "unit";
238
- value: number;
239
- unit: "px";
240
- };
241
- })[];
242
- export declare const h5: ({
243
- property: "marginTop";
244
- value: {
245
- type: "unit";
246
- value: number;
247
- unit: "px";
248
- };
249
- } | {
250
- property: "marginBottom";
251
- value: {
252
- type: "unit";
253
- value: number;
254
- unit: "px";
255
- };
256
- } | {
257
- property: "fontSize";
258
- value: {
259
- type: "unit";
260
- value: number;
261
- unit: "px";
262
- };
263
- })[];
264
- export declare const h6: ({
265
- property: "marginTop";
266
- value: {
267
- type: "unit";
268
- value: number;
269
- unit: "px";
270
- };
271
- } | {
272
- property: "marginBottom";
273
- value: {
274
- type: "unit";
275
- value: number;
276
- unit: "px";
277
- };
278
- } | {
279
- property: "fontSize";
280
- value: {
281
- type: "unit";
282
- value: number;
283
- unit: "px";
284
- };
285
- })[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webstudio-is/react-sdk",
3
- "version": "0.78.0",
3
+ "version": "0.79.0",
4
4
  "description": "Webstudio JavaScript / TypeScript API",
5
5
  "author": "Webstudio <github@webstudio.is>",
6
6
  "homepage": "https://webstudio.is",
@@ -34,12 +34,12 @@
34
34
  "nanoevents": "^7.0.1",
35
35
  "nanoid": "^3.3.6",
36
36
  "nanostores": "^0.7.1",
37
- "@webstudio-is/asset-uploader": "^0.78.0",
38
- "@webstudio-is/css-data": "^0.78.0",
39
- "@webstudio-is/css-engine": "^0.78.0",
40
- "@webstudio-is/fonts": "^0.78.0",
41
- "@webstudio-is/generate-arg-types": "^0.78.0",
42
- "@webstudio-is/project-build": "^0.78.0"
37
+ "@webstudio-is/asset-uploader": "^0.79.0",
38
+ "@webstudio-is/css-data": "^0.79.0",
39
+ "@webstudio-is/css-engine": "^0.79.0",
40
+ "@webstudio-is/fonts": "^0.79.0",
41
+ "@webstudio-is/generate-arg-types": "^0.79.0",
42
+ "@webstudio-is/project-build": "^0.79.0"
43
43
  },
44
44
  "exports": {
45
45
  ".": {
package/src/css/normalize.ts CHANGED
@@ -16,7 +16,7 @@
16
16
  */
17
17
 
18
18
  // webstudio custom opinionated presets
19
- import * as presets from "./presets";
19
+ import { borders, outline } from "./presets";
20
20
  import type { EmbedTemplateStyleDecl } from "../embed-template";
21
21
 
22
22
  export type Styles = EmbedTemplateStyleDecl[];
@@ -37,21 +37,13 @@ const boxSizing = {
37
37
  * box-sizing: border-box;
38
38
  }
39
39
  */
40
- const baseStyle = [
41
- boxSizing,
42
- ...presets.borders,
43
- ...presets.outline,
44
- ] satisfies Styles;
40
+ const baseStyle = [boxSizing, ...borders, ...outline] satisfies Styles;
45
41
 
46
42
  export const div = baseStyle;
47
43
  export const address = baseStyle;
48
44
  export const article = baseStyle;
49
45
  export const aside = baseStyle;
50
- export const blockquote = [
51
- ...baseStyle,
52
- ...presets.blockquote,
53
- ] satisfies Styles;
54
- export const figure = [...baseStyle, ...presets.margins] satisfies Styles;
46
+ export const figure = baseStyle;
55
47
  export const footer = baseStyle;
56
48
  export const header = baseStyle;
57
49
  export const main = baseStyle;
@@ -60,12 +52,12 @@ export const section = baseStyle;
60
52
  export const form = baseStyle;
61
53
  export const label = baseStyle;
62
54
 
63
- export const h1 = [...baseStyle, ...presets.h1] satisfies Styles;
64
- export const h2 = [...baseStyle, ...presets.h2] satisfies Styles;
65
- export const h3 = [...baseStyle, ...presets.h3] satisfies Styles;
66
- export const h4 = [...baseStyle, ...presets.h4] satisfies Styles;
67
- export const h5 = [...baseStyle, ...presets.h5] satisfies Styles;
68
- export const h6 = [...baseStyle, ...presets.h6] satisfies Styles;
55
+ export const h1 = baseStyle;
56
+ export const h2 = baseStyle;
57
+ export const h3 = baseStyle;
58
+ export const h4 = baseStyle;
59
+ export const h5 = baseStyle;
60
+ export const h6 = baseStyle;
69
61
 
70
62
  export const i = baseStyle;
71
63
 
@@ -76,7 +68,7 @@ export const li = baseStyle;
76
68
  export const ul = baseStyle;
77
69
  export const ol = baseStyle;
78
70
 
79
- export const p = [...baseStyle, ...presets.verticalMargins];
71
+ export const p = baseStyle;
80
72
  export const span = baseStyle;
81
73
 
82
74
  // @todo for now not applied to html, as we don't have html element
@@ -102,7 +94,7 @@ export const html = [
102
94
  value: { type: "unit", value: 4, unit: "number" },
103
95
  },
104
96
  boxSizing,
105
- ...presets.borders,
97
+ ...borders,
106
98
  ] satisfies Styles;
107
99
 
108
100
  /**
@@ -144,7 +136,7 @@ export const body = [
144
136
  value: { type: "unit", unit: "number", value: 1.2 },
145
137
  },
146
138
  boxSizing,
147
- ...presets.borders,
139
+ ...borders,
148
140
  ] satisfies Styles;
149
141
 
150
142
  /**
@@ -163,8 +155,7 @@ export const hr = [
163
155
  value: { type: "keyword", value: "inherit" },
164
156
  },
165
157
  boxSizing,
166
- ...presets.borders,
167
- ...presets.margins,
158
+ ...borders,
168
159
  ] satisfies Styles;
169
160
 
170
161
  /**
@@ -186,7 +177,7 @@ export const b = [
186
177
  value: { type: "keyword", value: "700" },
187
178
  },
188
179
  boxSizing,
189
- ...presets.borders,
180
+ ...borders,
190
181
  ] satisfies Styles;
191
182
  export const strong = b;
192
183
 
@@ -209,7 +200,7 @@ export const code = [
209
200
  value: { type: "unit", value: 1, unit: "em" },
210
201
  },
211
202
  boxSizing,
212
- ...presets.borders,
203
+ ...borders,
213
204
  ] satisfies Styles;
214
205
 
215
206
  export const kbd = code;
@@ -226,7 +217,7 @@ export const small = [
226
217
  value: { type: "unit", value: 80, unit: "%" },
227
218
  },
228
219
  boxSizing,
229
- ...presets.borders,
220
+ ...borders,
230
221
  ] satisfies Styles;
231
222
 
232
223
  /**
@@ -251,7 +242,7 @@ const subSupBase = [
251
242
  value: { type: "keyword", value: "baseline" },
252
243
  },
253
244
  boxSizing,
254
- ...presets.borders,
245
+ ...borders,
255
246
  ] satisfies Styles;
256
247
 
257
248
  export const sub = [
@@ -286,7 +277,7 @@ export const table = [
286
277
  property: "textIndent",
287
278
  value: { type: "unit", value: 0, unit: "number" },
288
279
  },
289
- ...presets.borders,
280
+ ...borders,
290
281
  /* 2 */
291
282
  {
292
283
  property: "borderTopColor",
@@ -349,7 +340,7 @@ const buttonBase = [
349
340
  value: { type: "unit", value: 0, unit: "number" },
350
341
  },
351
342
  boxSizing,
352
- ...presets.borders,
343
+ ...borders,
353
344
  ] satisfies Styles;
354
345
 
355
346
  export const input = buttonBase;
@@ -436,7 +427,7 @@ export const legend = [
436
427
  value: { type: "unit", value: 0, unit: "number" },
437
428
  },
438
429
  boxSizing,
439
- ...presets.borders,
430
+ ...borders,
440
431
  ] satisfies Styles;
441
432
 
442
433
  /**
@@ -449,7 +440,7 @@ export const progress = [
449
440
  value: { type: "keyword", value: "baseline" },
450
441
  },
451
442
  boxSizing,
452
- ...presets.borders,
443
+ ...borders,
453
444
  ] satisfies Styles;
454
445
 
455
446
  /**
@@ -512,5 +503,5 @@ export const summary = [
512
503
  value: { type: "keyword", value: "list-item" },
513
504
  },
514
505
  boxSizing,
515
- ...presets.borders,
506
+ ...borders,
516
507
  ] satisfies Styles;
package/src/css/presets.ts CHANGED
@@ -25,113 +25,3 @@ export const outline: Styles = [
25
25
  value: { type: "unit", value: 1, unit: "px" },
26
26
  },
27
27
  ];
28
-
29
- export const margins = [
30
- {
31
- property: "marginTop",
32
- value: { type: "unit", value: 0, unit: "px" },
33
- },
34
- {
35
- property: "marginRight",
36
- value: { type: "unit", value: 0, unit: "px" },
37
- },
38
- {
39
- property: "marginBottom",
40
- value: { type: "unit", value: 0, unit: "px" },
41
- },
42
- {
43
- property: "marginLeft",
44
- value: { type: "unit", value: 0, unit: "px" },
45
- },
46
- ] satisfies Styles;
47
-
48
- export const verticalMargins = [
49
- {
50
- property: "marginTop",
51
- value: { type: "unit", value: 0, unit: "px" },
52
- },
53
- {
54
- property: "marginBottom",
55
- value: { type: "unit", value: 0, unit: "px" },
56
- },
57
- ] satisfies Styles;
58
-
59
- export const blockquote = [
60
- ...margins,
61
- {
62
- property: "paddingTop",
63
- value: { type: "unit", value: 10, unit: "px" },
64
- },
65
- {
66
- property: "paddingBottom",
67
- value: { type: "unit", value: 10, unit: "px" },
68
- },
69
- {
70
- property: "paddingLeft",
71
- value: { type: "unit", value: 20, unit: "px" },
72
- },
73
- {
74
- property: "paddingRight",
75
- value: { type: "unit", value: 20, unit: "px" },
76
- },
77
- {
78
- property: "borderLeftWidth",
79
- value: { type: "unit", value: 5, unit: "px" },
80
- },
81
- {
82
- property: "borderLeftStyle",
83
- value: { type: "keyword", value: "solid" },
84
- },
85
- {
86
- property: "borderLeftColor",
87
- value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 },
88
- },
89
- ] satisfies Styles;
90
-
91
- export const h1 = [
92
- ...verticalMargins,
93
- {
94
- property: "fontSize",
95
- value: { type: "unit", value: 38, unit: "px" },
96
- },
97
- ] satisfies Styles;
98
-
99
- export const h2 = [
100
- ...verticalMargins,
101
- {
102
- property: "fontSize",
103
- value: { type: "unit", value: 32, unit: "px" },
104
- },
105
- ] satisfies Styles;
106
-
107
- export const h3 = [
108
- ...verticalMargins,
109
- {
110
- property: "fontSize",
111
- value: { type: "unit", value: 24, unit: "px" },
112
- },
113
- ] satisfies Styles;
114
-
115
- export const h4 = [
116
- ...verticalMargins,
117
- {
118
- property: "fontSize",
119
- value: { type: "unit", value: 18, unit: "px" },
120
- },
121
- ] satisfies Styles;
122
-
123
- export const h5 = [
124
- ...verticalMargins,
125
- {
126
- property: "fontSize",
127
- value: { type: "unit", value: 14, unit: "px" },
128
- },
129
- ] satisfies Styles;
130
-
131
- export const h6 = [
132
- ...verticalMargins,
133
- {
134
- property: "fontSize",
135
- value: { type: "unit", value: 12, unit: "px" },
136
- },
137
- ] satisfies Styles;