eddev 0.2.65 → 0.2.67-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/admin/components/ImageWell.d.ts +2 -3
- package/admin/components/ImageWell.js +39 -51
- package/admin/defineField.d.ts +2 -2
- package/admin/defineWidget.d.ts +1 -1
- package/admin/defineWidget.js +2 -2
- package/admin/index.js +5 -1
- package/admin/installFieldTypes.js +26 -26
- package/admin/runWidgets.js +17 -28
- package/admin/selectMedia.d.ts +2 -2
- package/admin/selectMedia.js +1 -1
- package/blocks/ContentBlocks.d.ts +6 -6
- package/blocks/ContentBlocks.js +58 -66
- package/blocks/ErrorBoundaryEditor.d.ts +1 -1
- package/blocks/ErrorBoundaryEditor.js +16 -45
- package/blocks/ErrorBoundaryFrontend.d.ts +1 -1
- package/blocks/ErrorBoundaryFrontend.js +16 -45
- package/blocks/InspectorControls.d.ts +1 -1
- package/blocks/InspectorControls.js +3 -3
- package/blocks/blockAttributes.d.ts +2 -2
- package/blocks/blockAttributes.js +24 -44
- package/blocks/index.js +5 -1
- package/blocks/inlineEditing.d.ts +7 -7
- package/blocks/inlineEditing.js +36 -55
- package/blocks/installGutenbergHooks.js +48 -68
- package/build/babel/plugin-name-defined-components.js +15 -16
- package/build/build-favicon.js +11 -62
- package/build/clean.js +5 -52
- package/build/create-codegen-worker.js +78 -33
- package/build/create-serverless-dev-worker.js +61 -39
- package/build/create-webpack-worker.js +65 -33
- package/build/file-tree.d.ts +2 -2
- package/build/file-tree.js +12 -12
- package/build/get-webpack-config.js +341 -395
- package/build/graphql-codegen/graphql-codegen-files.js +31 -25
- package/build/graphql-codegen/graphql-codegen-no-duplicates.js +4 -4
- package/build/graphql-codegen/graphql-codegen-queries.js +102 -99
- package/build/manifests/manifest-blocks.d.ts +1 -1
- package/build/manifests/manifest-blocks.js +37 -29
- package/build/manifests/manifest-fields.d.ts +1 -1
- package/build/manifests/manifest-fields.js +23 -21
- package/build/manifests/manifest-views.d.ts +1 -1
- package/build/manifests/manifest-views.js +32 -25
- package/build/manifests/manifest-widgets.d.ts +1 -1
- package/build/manifests/manifest-widgets.js +22 -20
- package/build/manifests/manifest.d.ts +2 -2
- package/build/manifests/manifest.js +30 -90
- package/build/reporter.d.ts +1 -1
- package/build/reporter.js +29 -32
- package/build/serverless/create-next-app.d.ts +1 -1
- package/build/serverless/create-next-app.js +245 -467
- package/build/state/codegen-state.d.ts +4 -4
- package/build/state/compiler-state.d.ts +5 -5
- package/build/state/serverless-state.d.ts +3 -3
- package/build/workers/codegen-worker-script.js +392 -507
- package/build/workers/serverless-worker-dev-script.js +4 -4
- package/build/workers/webpack-worker-script.js +89 -150
- package/cli/build.dev.d.ts +1 -1
- package/cli/build.dev.js +79 -126
- package/cli/build.prod.d.ts +1 -1
- package/cli/build.prod.js +42 -98
- package/cli/cli.js +16 -55
- package/cli/display/components/BundleDisplay.d.ts +1 -2
- package/cli/display/components/BundleDisplay.js +13 -24
- package/cli/display/components/CodegenDisplay.d.ts +1 -2
- package/cli/display/components/CodegenDisplay.js +14 -25
- package/cli/display/components/DevCLIDisplay.d.ts +2 -3
- package/cli/display/components/DevCLIDisplay.js +14 -25
- package/cli/display/components/Fullscreen.js +9 -20
- package/cli/display/components/ServerlessDisplay.d.ts +2 -3
- package/cli/display/components/ServerlessDisplay.js +15 -26
- package/cli/display/components/StatusIcon.d.ts +2 -3
- package/cli/display/components/StatusIcon.js +3 -3
- package/cli/preinstall.js +4 -5
- package/cli/setup.js +25 -73
- package/components/AdminBar.d.ts +1 -2
- package/components/AdminBar.js +37 -3
- package/components/BrowserRouter.d.ts +2 -2
- package/components/BrowserRouter.js +41 -54
- package/components/InlinePage.d.ts +2 -2
- package/components/InlinePage.js +17 -29
- package/components/NextRouter.d.ts +2 -2
- package/components/NextRouter.js +20 -29
- package/components/index.js +5 -1
- package/config/config-schema.d.ts +1 -1
- package/config/config-schema.js +1 -1
- package/config/create-schema-file.js +6 -6
- package/config/get-config.js +10 -13
- package/config/index.js +5 -1
- package/config/parse-config.js +1 -1
- package/config/print-zod-errors.js +3 -3
- package/dev-ui/components/BreakpointColumnHeader.d.ts +2 -3
- package/dev-ui/components/BreakpointColumnHeader.js +7 -18
- package/dev-ui/components/BreakpointIndicator.d.ts +1 -2
- package/dev-ui/components/BreakpointIndicator.js +25 -32
- package/dev-ui/components/DevUI.d.ts +1 -2
- package/dev-ui/components/DevUI.js +13 -13
- package/dev-ui/components/Launcher.d.ts +2 -2
- package/dev-ui/components/Launcher.js +13 -25
- package/dev-ui/components/PanelWrapper.d.ts +2 -2
- package/dev-ui/components/PanelWrapper.js +8 -8
- package/dev-ui/components/ResponsiveLerpControl.d.ts +2 -3
- package/dev-ui/components/ResponsiveLerpControl.js +27 -38
- package/dev-ui/components/ResponsiveScaleEditor.d.ts +4 -5
- package/dev-ui/components/ResponsiveScaleEditor.js +64 -78
- package/dev-ui/components/atoms/Button.js +1 -1
- package/dev-ui/components/atoms/Dropdown.d.ts +3 -3
- package/dev-ui/components/atoms/Dropdown.js +8 -9
- package/dev-ui/components/atoms/NumberField.d.ts +2 -3
- package/dev-ui/components/atoms/NumberField.js +29 -42
- package/dev-ui/components/atoms/Spacer.js +1 -1
- package/dev-ui/components/atoms/Text.js +1 -1
- package/dev-ui/components/atoms/ToggleButton.d.ts +2 -2
- package/dev-ui/components/atoms/ToggleButton.js +5 -16
- package/dev-ui/components/atoms/Tooltip.d.ts +2 -2
- package/dev-ui/components/atoms/Tooltip.js +8 -20
- package/dev-ui/components/panels/AppDataDebugger.d.ts +1 -2
- package/dev-ui/components/panels/AppDataDebugger.js +8 -19
- package/dev-ui/components/panels/ColorEditor.d.ts +1 -2
- package/dev-ui/components/panels/ColorEditor.js +35 -42
- package/dev-ui/components/panels/PageDataDebugger.d.ts +1 -2
- package/dev-ui/components/panels/PageDataDebugger.js +8 -20
- package/dev-ui/components/panels/QueryDebugger.d.ts +1 -2
- package/dev-ui/components/panels/QueryDebugger.js +12 -24
- package/dev-ui/components/panels/SpacingEditor.d.ts +1 -2
- package/dev-ui/components/panels/SpacingEditor.js +34 -48
- package/dev-ui/components/panels/TypographyEditor.d.ts +1 -2
- package/dev-ui/components/panels/TypographyEditor.js +38 -46
- package/dev-ui/hooks/useBreakpoint.d.ts +1 -1
- package/dev-ui/hooks/useBreakpoint.js +13 -13
- package/dev-ui/hooks/usePersistState.js +6 -7
- package/dev-ui/hooks/useStylesheet.js +6 -6
- package/dev-ui/icons.d.ts +15 -16
- package/dev-ui/icons.js +16 -27
- package/dev-ui/index.js +5 -1
- package/dev-ui/loader.d.ts +1 -2
- package/dev-ui/loader.js +13 -9
- package/dev-ui/panels.d.ts +2 -2
- package/dev-ui/panels.js +7 -7
- package/dev-ui/theme.d.ts +96 -70
- package/dev-ui/theme.js +3 -3
- package/dynamic/dynamic-component.d.ts +1 -10
- package/dynamic/dynamic-component.js +1 -1
- package/dynamic/index.js +5 -1
- package/entry/Root.d.ts +2 -3
- package/entry/Root.js +16 -26
- package/entry/entry.admin.dev.js +4 -4
- package/entry/entry.admin.prod.js +4 -4
- package/entry/entry.monolith.dev.js +5 -5
- package/entry/entry.monolith.prod.js +5 -5
- package/gravityforms/gravity-forms.d.ts +2 -2
- package/gravityforms/index.js +5 -1
- package/gravityforms/useGravityForm.d.ts +2 -2
- package/gravityforms/useGravityForm.js +126 -130
- package/hooks/index.js +5 -1
- package/hooks/queryUtils.d.ts +14 -14
- package/hooks/queryUtils.js +101 -192
- package/hooks/useAppData.d.ts +2 -2
- package/hooks/useAppData.js +9 -9
- package/hooks/usePageLoad.js +4 -4
- package/hooks/useQueryDebug.d.ts +1 -1
- package/hooks/useQueryDebug.js +7 -7
- package/hooks/useRPC.d.ts +4 -4
- package/hooks/useRPC.js +3 -3
- package/package.json +7 -7
- package/routing/index.js +5 -1
- package/routing/remoteProps.d.ts +1 -1
- package/routing/remoteProps.js +31 -72
- package/routing/routing.d.ts +15 -15
- package/routing/routing.js +108 -170
- package/routing/updateEditLink.js +1 -1
- package/serverless/define-api.d.ts +1 -1
- package/serverless/define-rpc-router.js +8 -4
- package/serverless/index.js +6 -2
- package/serverless-template/_utils/fetch-wordpress-props.ts +0 -4
- package/serverless-template/_utils/fetch-wp.ts +0 -1
- package/style/createStitches.d.ts +375 -783
- package/style/createStitches.js +164 -142
- package/style/index.js +5 -1
- package/tsconfig.json +1 -1
- package/utils/Observable.d.ts +2 -2
- package/utils/Observable.js +12 -15
- package/utils/getRepoName.js +3 -3
- package/utils/promptIfRepoNameIncorrect.js +18 -64
- package/utils/refreshOverlayInterop.js +1 -1
- package/utils/reportErrorStack.d.ts +1 -1
- package/utils/reportErrorStack.js +1 -1
- package/utils/serverlessAppContext.js +1 -1
- package/utils/updateEnvFile.js +19 -69
- package/utils/useObservable.js +3 -3
- package/views/index.js +5 -1
package/style/createStitches.js
CHANGED
|
@@ -1,19 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
3
|
exports.createStitches = exports.parseResponsiveTokens = exports.getResponsiveObjectStyles = exports.parseResponsiveObject = exports.parseBreakpoints = void 0;
|
|
15
|
-
|
|
16
|
-
|
|
4
|
+
const react_1 = require("@stitches/react");
|
|
5
|
+
const typeKeyMap = {
|
|
17
6
|
fontSize: "fontSizes",
|
|
18
7
|
fontFamily: "fonts",
|
|
19
8
|
lineHeight: "lineHeights",
|
|
@@ -21,29 +10,29 @@ var typeKeyMap = {
|
|
|
21
10
|
fontWeight: "fontWeights",
|
|
22
11
|
};
|
|
23
12
|
function parseBreakpoints(names, medias) {
|
|
24
|
-
|
|
13
|
+
const breakpoints = [];
|
|
25
14
|
// Add an initial breakpoint
|
|
26
15
|
breakpoints.push({ key: "initial", min: "0px", max: null });
|
|
27
16
|
// Parse each breakpoint
|
|
28
|
-
for (
|
|
17
|
+
for (const key in medias) {
|
|
29
18
|
if (!names.includes(key))
|
|
30
19
|
continue;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
20
|
+
const media = medias[key];
|
|
21
|
+
const minMatch = media.match(/min-width: ([0-9]+[a-z]+)/);
|
|
22
|
+
const maxMatch = media.match(/max-width: ([0-9]+[a-z]+)/);
|
|
34
23
|
if (!minMatch && !maxMatch)
|
|
35
24
|
continue;
|
|
36
25
|
breakpoints.push({
|
|
37
|
-
key
|
|
26
|
+
key,
|
|
38
27
|
min: minMatch ? minMatch[1] : null,
|
|
39
28
|
max: maxMatch ? maxMatch[1] : null,
|
|
40
29
|
});
|
|
41
30
|
}
|
|
42
31
|
// Ensure each breakpoint has a min/max value (except for first and last)
|
|
43
|
-
for (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
32
|
+
for (let i = 0; i < breakpoints.length; i++) {
|
|
33
|
+
const bp = breakpoints[i];
|
|
34
|
+
const prev = breakpoints[i - 1];
|
|
35
|
+
const next = breakpoints[i + 1];
|
|
47
36
|
if (bp.min === null && prev && prev.max) {
|
|
48
37
|
bp.min = prev.max;
|
|
49
38
|
}
|
|
@@ -54,13 +43,13 @@ function parseBreakpoints(names, medias) {
|
|
|
54
43
|
return breakpoints;
|
|
55
44
|
}
|
|
56
45
|
exports.parseBreakpoints = parseBreakpoints;
|
|
57
|
-
|
|
46
|
+
const unitless = (value) => parseFloat(value);
|
|
58
47
|
function parseTypography(theme, breakpoints, typography) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
breakpoints.forEach(
|
|
48
|
+
const globals = {};
|
|
49
|
+
const typeVariants = {};
|
|
50
|
+
breakpoints.forEach((bp) => (globals["@" + bp.key] = {}));
|
|
62
51
|
globals["@editor"] = {};
|
|
63
|
-
|
|
52
|
+
const resolveValue = (scale, value) => {
|
|
64
53
|
if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
|
|
65
54
|
// Single scale
|
|
66
55
|
return theme[scale][value.replace("$", "")];
|
|
@@ -69,7 +58,7 @@ function parseTypography(theme, breakpoints, typography) {
|
|
|
69
58
|
return value;
|
|
70
59
|
}
|
|
71
60
|
};
|
|
72
|
-
|
|
61
|
+
const resolveThemeVar = (scale, value) => {
|
|
73
62
|
if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
|
|
74
63
|
// Single scale
|
|
75
64
|
return "$" + scale + value;
|
|
@@ -78,25 +67,25 @@ function parseTypography(theme, breakpoints, typography) {
|
|
|
78
67
|
return value;
|
|
79
68
|
}
|
|
80
69
|
};
|
|
81
|
-
for (
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
typeVariants[
|
|
85
|
-
for (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
variant[key] =
|
|
89
|
-
|
|
70
|
+
for (const name in typography) {
|
|
71
|
+
const style = typography[name];
|
|
72
|
+
const variant = {};
|
|
73
|
+
typeVariants[name] = variant;
|
|
74
|
+
for (const key in style) {
|
|
75
|
+
const value = style[key];
|
|
76
|
+
const varName = `--type-${name}-${key}`;
|
|
77
|
+
variant[key] = `var(${varName})`;
|
|
78
|
+
const tokenPrefix = typeKeyMap[key];
|
|
90
79
|
if (typeof value === "string" || typeof value === "number") {
|
|
91
80
|
// A simple string or number value is used
|
|
92
81
|
globals["@initial"][varName] = resolveThemeVar(tokenPrefix, value);
|
|
93
82
|
}
|
|
94
83
|
else if (value && typeof value === "object") {
|
|
95
84
|
// A responsive object value
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
for (
|
|
99
|
-
globals[
|
|
85
|
+
const unit = key === "lineHeight" ? "%" : "px";
|
|
86
|
+
const [tokenGlobals, initial] = getResponsiveObjectStyles(breakpoints, value, varName, unit);
|
|
87
|
+
for (const key in tokenGlobals) {
|
|
88
|
+
globals[key] = { ...globals[key], ...tokenGlobals[key] };
|
|
100
89
|
}
|
|
101
90
|
// const entries = Object.entries(value)
|
|
102
91
|
// entries.forEach(([bpName, responsiveValue], i) => {
|
|
@@ -124,11 +113,11 @@ function parseTypography(theme, breakpoints, typography) {
|
|
|
124
113
|
}
|
|
125
114
|
}
|
|
126
115
|
// debugger
|
|
127
|
-
return { globalTypography: globals, typeVariants
|
|
116
|
+
return { globalTypography: globals, typeVariants };
|
|
128
117
|
}
|
|
129
118
|
function parseGrid(theme, media, grid) {
|
|
130
|
-
|
|
131
|
-
|
|
119
|
+
const globalGrid = {};
|
|
120
|
+
const resolveThemeVar = (scale, value) => {
|
|
132
121
|
if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
|
|
133
122
|
// Single scale
|
|
134
123
|
return "$" + scale + value;
|
|
@@ -137,22 +126,24 @@ function parseGrid(theme, media, grid) {
|
|
|
137
126
|
return value;
|
|
138
127
|
}
|
|
139
128
|
};
|
|
140
|
-
for (
|
|
141
|
-
var _b = _a[_i], bpName = _b[0], breakpoint = _b[1];
|
|
129
|
+
for (let [bpName, breakpoint] of Object.entries(grid.breakpoints)) {
|
|
142
130
|
globalGrid[bpName] = {
|
|
143
131
|
"--grid-columns": grid.columns,
|
|
144
132
|
"--grid-outer-width": breakpoint.container,
|
|
145
|
-
"--grid-inner-width":
|
|
133
|
+
"--grid-inner-width": `calc(${breakpoint.container} - ${resolveThemeVar("spaces", breakpoint.margin)} * 2)`,
|
|
146
134
|
"--grid-gutter": breakpoint.gutter,
|
|
147
135
|
"--grid-margin": breakpoint.margin,
|
|
148
|
-
"--grid-col-width":
|
|
136
|
+
"--grid-col-width": `calc((var(--grid-inner-width) - (${grid.columns - 1} * var(--grid-gutter))) / ${grid.columns})`,
|
|
149
137
|
};
|
|
150
138
|
}
|
|
151
|
-
return { gridVariants: {}, globalGrid
|
|
139
|
+
return { gridVariants: {}, globalGrid };
|
|
152
140
|
}
|
|
153
141
|
function parseResponsiveValue(val) {
|
|
154
142
|
if (Array.isArray(val)) {
|
|
155
|
-
return
|
|
143
|
+
return {
|
|
144
|
+
...parseResponsiveValue(val[0]),
|
|
145
|
+
lerpStart: true,
|
|
146
|
+
};
|
|
156
147
|
}
|
|
157
148
|
else if (typeof val === "string") {
|
|
158
149
|
if (val.match(/^x[0-9\.]+$/)) {
|
|
@@ -198,23 +189,21 @@ function parseResponsiveValue(val) {
|
|
|
198
189
|
}
|
|
199
190
|
function parseResponsiveObject(breakpoints, object) {
|
|
200
191
|
// Breakpoint hash
|
|
201
|
-
|
|
202
|
-
for (
|
|
203
|
-
var bp = breakpoints_1[_i];
|
|
192
|
+
const breakpointHash = {};
|
|
193
|
+
for (let bp of breakpoints) {
|
|
204
194
|
breakpointHash[bp.key] = {
|
|
205
195
|
min: bp.min ? parseFloat(bp.min) : null,
|
|
206
196
|
max: bp.max ? parseFloat(bp.max) : null,
|
|
207
197
|
};
|
|
208
198
|
}
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
for (
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
var base = !defined || value.type === "multiplier" ? lastDefined : bp.key;
|
|
199
|
+
const result = [];
|
|
200
|
+
let lerpStart = "initial";
|
|
201
|
+
let lastDefined = "initial";
|
|
202
|
+
let concreteValues = {};
|
|
203
|
+
for (let bp of breakpoints) {
|
|
204
|
+
const value = parseResponsiveValue(object["@" + bp.key]);
|
|
205
|
+
const defined = value.type !== "undefined";
|
|
206
|
+
let base = !defined || value.type === "multiplier" ? lastDefined : bp.key;
|
|
218
207
|
lerpStart = value.lerpStart ? bp.key : lerpStart && !defined ? lerpStart : null;
|
|
219
208
|
if (value.type === "px" || value.type === "number") {
|
|
220
209
|
concreteValues[bp.key] = value.value;
|
|
@@ -225,7 +214,13 @@ function parseResponsiveObject(breakpoints, object) {
|
|
|
225
214
|
else if (value.type === "percent") {
|
|
226
215
|
concreteValues[bp.key] = value.value;
|
|
227
216
|
}
|
|
228
|
-
result.push(
|
|
217
|
+
result.push({
|
|
218
|
+
...value,
|
|
219
|
+
defined: defined,
|
|
220
|
+
breakpoint: bp.key,
|
|
221
|
+
lastBreakpoint: lastDefined,
|
|
222
|
+
baseBreakpoint: base,
|
|
223
|
+
lerping: lerpStart
|
|
229
224
|
? {
|
|
230
225
|
fromBP: lerpStart,
|
|
231
226
|
toBP: null,
|
|
@@ -234,90 +229,91 @@ function parseResponsiveObject(breakpoints, object) {
|
|
|
234
229
|
minValue: 0,
|
|
235
230
|
maxValue: 0,
|
|
236
231
|
}
|
|
237
|
-
: undefined,
|
|
232
|
+
: undefined,
|
|
233
|
+
concreteValue: concreteValues[bp.key],
|
|
234
|
+
});
|
|
238
235
|
if (defined) {
|
|
239
236
|
lastDefined = bp.key;
|
|
240
237
|
}
|
|
241
238
|
}
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
for (
|
|
245
|
-
|
|
239
|
+
let nextBreakpoints = [];
|
|
240
|
+
let lastBreakpoint = null;
|
|
241
|
+
for (let i = breakpoints.length - 1; i >= 0; i--) {
|
|
242
|
+
const bp = breakpoints[i];
|
|
246
243
|
nextBreakpoints[i] = lastBreakpoint;
|
|
247
244
|
if (result[i].defined) {
|
|
248
245
|
lastBreakpoint = bp.key;
|
|
249
246
|
}
|
|
250
247
|
}
|
|
251
|
-
result.forEach(
|
|
248
|
+
result.forEach((item, i) => {
|
|
252
249
|
if (item.lerping) {
|
|
253
250
|
item.lerping.toBP = nextBreakpoints[i];
|
|
254
251
|
}
|
|
255
252
|
});
|
|
256
|
-
result.forEach(
|
|
257
|
-
|
|
253
|
+
result.forEach((item, i) => {
|
|
254
|
+
const lerp = item.lerping;
|
|
258
255
|
if (lerp) {
|
|
259
|
-
|
|
260
|
-
|
|
256
|
+
const fromBP = lerp.fromBP ? breakpointHash[lerp.fromBP] : null;
|
|
257
|
+
const toBP = lerp.toBP ? breakpointHash[lerp.toBP] : null;
|
|
261
258
|
if (!fromBP || fromBP.min === null) {
|
|
262
|
-
throw new Error(
|
|
259
|
+
throw new Error(`Cannot create responsive style for first breakpoint`);
|
|
263
260
|
}
|
|
264
261
|
if (!toBP || toBP.min === null) {
|
|
265
|
-
throw new Error(
|
|
262
|
+
throw new Error(`Cannot create responsive style for last breakpoint`);
|
|
266
263
|
}
|
|
267
264
|
lerp.minMedia = fromBP.min;
|
|
268
265
|
lerp.maxMedia = toBP.min;
|
|
269
266
|
lerp.minValue = item.concreteValue;
|
|
270
|
-
lerp.maxValue = result.find(
|
|
267
|
+
lerp.maxValue = result.find((o) => o.breakpoint === lerp.toBP).concreteValue;
|
|
271
268
|
}
|
|
272
269
|
});
|
|
273
270
|
return result;
|
|
274
271
|
}
|
|
275
272
|
exports.parseResponsiveObject = parseResponsiveObject;
|
|
276
|
-
function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
|
|
277
|
-
var _a, _b, _c;
|
|
278
|
-
var _d;
|
|
279
|
-
if (unit === void 0) { unit = "px"; }
|
|
273
|
+
function getResponsiveObjectStyles(breakpoints, object, varName, unit = "px") {
|
|
280
274
|
// Prescale object
|
|
281
|
-
object =
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
for (
|
|
285
|
-
var atom = parsed_1[_i];
|
|
275
|
+
object = { ...object };
|
|
276
|
+
const parsed = parseResponsiveObject(breakpoints, object);
|
|
277
|
+
const globals = {};
|
|
278
|
+
for (let atom of parsed) {
|
|
286
279
|
if (atom.lerpStart && atom.lerping) {
|
|
287
|
-
|
|
288
|
-
globals["@" + atom.breakpoint] =
|
|
289
|
-
|
|
290
|
-
|
|
280
|
+
const lerp = atom.lerping;
|
|
281
|
+
globals["@" + atom.breakpoint] = {
|
|
282
|
+
[varName]: `calc(${lerp.minValue}${unit} + (100vw - ${lerp.minMedia}${unit}) / (${lerp.maxMedia} - ${lerp.minMedia}) * (${lerp.maxValue} - ${lerp.minValue}))`,
|
|
283
|
+
};
|
|
291
284
|
}
|
|
292
285
|
else if (atom.concreteValue) {
|
|
293
|
-
globals["@" + atom.breakpoint] =
|
|
294
|
-
|
|
295
|
-
|
|
286
|
+
globals["@" + atom.breakpoint] = {
|
|
287
|
+
[varName]: atom.concreteValue + unit,
|
|
288
|
+
};
|
|
296
289
|
}
|
|
297
290
|
else if (atom.defined) {
|
|
298
|
-
globals["@" + atom.breakpoint] =
|
|
299
|
-
|
|
300
|
-
|
|
291
|
+
globals["@" + atom.breakpoint] = {
|
|
292
|
+
[varName]: atom.value,
|
|
293
|
+
};
|
|
301
294
|
}
|
|
302
295
|
}
|
|
303
|
-
return [globals,
|
|
296
|
+
return [globals, globals["@initial"]?.[varName]];
|
|
304
297
|
}
|
|
305
298
|
exports.getResponsiveObjectStyles = getResponsiveObjectStyles;
|
|
306
299
|
// parseResponsiveTokens({'@initial': blah, '@desktop': blah}, breakpoints, )
|
|
307
300
|
function parseResponsiveTokens(theme, breakpoints) {
|
|
308
|
-
|
|
301
|
+
const globalResponsive = {
|
|
309
302
|
"@initial": {},
|
|
310
303
|
};
|
|
311
|
-
|
|
312
|
-
for (
|
|
313
|
-
|
|
304
|
+
const initialResponsive = {};
|
|
305
|
+
for (const scale in theme) {
|
|
306
|
+
const initials = {};
|
|
314
307
|
initialResponsive[scale] = initials;
|
|
315
|
-
for (
|
|
316
|
-
|
|
308
|
+
for (const key in theme[scale]) {
|
|
309
|
+
const val = theme[scale][key];
|
|
317
310
|
if (val && typeof val === "object") {
|
|
318
|
-
|
|
319
|
-
for (
|
|
320
|
-
globalResponsive[bp] =
|
|
311
|
+
const [tokenGlobals, initial] = getResponsiveObjectStyles(breakpoints, val, "--" + scale + "-" + key);
|
|
312
|
+
for (const bp in tokenGlobals) {
|
|
313
|
+
globalResponsive[bp] = {
|
|
314
|
+
...globalResponsive[bp],
|
|
315
|
+
...tokenGlobals[bp],
|
|
316
|
+
};
|
|
321
317
|
}
|
|
322
318
|
initials[key] = initial;
|
|
323
319
|
}
|
|
@@ -326,60 +322,80 @@ function parseResponsiveTokens(theme, breakpoints) {
|
|
|
326
322
|
}
|
|
327
323
|
}
|
|
328
324
|
}
|
|
329
|
-
return { initialResponsive
|
|
325
|
+
return { initialResponsive, globalResponsive };
|
|
330
326
|
}
|
|
331
327
|
exports.parseResponsiveTokens = parseResponsiveTokens;
|
|
332
328
|
function createStitches(config) {
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
329
|
+
const breakpoints = parseBreakpoints(config.breakpoints, config.media);
|
|
330
|
+
const { typeVariants, globalTypography } = parseTypography(config.theme, breakpoints, config.typography);
|
|
331
|
+
const { gridVariants, globalGrid } = parseGrid(config.theme, config.media, config.grid);
|
|
332
|
+
const { initialResponsive, globalResponsive } = parseResponsiveTokens(config.responsive, breakpoints);
|
|
333
|
+
const stitches = (0, react_1.createStitches)({
|
|
338
334
|
// prefix: config.prefix,
|
|
339
|
-
media:
|
|
340
|
-
|
|
335
|
+
media: {
|
|
336
|
+
initial: "",
|
|
337
|
+
...config.media,
|
|
338
|
+
},
|
|
339
|
+
theme: { ...config.theme, ...initialResponsive },
|
|
341
340
|
themeMap: config.themeMap,
|
|
342
|
-
utils:
|
|
341
|
+
utils: {
|
|
342
|
+
...(config.utils || {}),
|
|
343
|
+
typography: (key) => typeVariants[key],
|
|
344
|
+
m: (value) => ({
|
|
343
345
|
margin: value,
|
|
344
|
-
})
|
|
346
|
+
}),
|
|
347
|
+
mt: (value) => ({
|
|
345
348
|
marginTop: value,
|
|
346
|
-
})
|
|
349
|
+
}),
|
|
350
|
+
mr: (value) => ({
|
|
347
351
|
marginRight: value,
|
|
348
|
-
})
|
|
352
|
+
}),
|
|
353
|
+
mb: (value) => ({
|
|
349
354
|
marginBottom: value,
|
|
350
|
-
})
|
|
355
|
+
}),
|
|
356
|
+
ml: (value) => ({
|
|
351
357
|
marginLeft: value,
|
|
352
|
-
})
|
|
358
|
+
}),
|
|
359
|
+
mx: (value) => ({
|
|
353
360
|
marginLeft: value,
|
|
354
361
|
marginRight: value,
|
|
355
|
-
})
|
|
362
|
+
}),
|
|
363
|
+
my: (value) => ({
|
|
356
364
|
marginTop: value,
|
|
357
365
|
marginBottom: value,
|
|
358
|
-
})
|
|
366
|
+
}),
|
|
367
|
+
p: (value) => ({
|
|
359
368
|
padding: value,
|
|
360
|
-
})
|
|
369
|
+
}),
|
|
370
|
+
pt: (value) => ({
|
|
361
371
|
paddingTop: value,
|
|
362
|
-
})
|
|
372
|
+
}),
|
|
373
|
+
pr: (value) => ({
|
|
363
374
|
paddingRight: value,
|
|
364
|
-
})
|
|
375
|
+
}),
|
|
376
|
+
pb: (value) => ({
|
|
365
377
|
paddingBottom: value,
|
|
366
|
-
})
|
|
378
|
+
}),
|
|
379
|
+
pl: (value) => ({
|
|
367
380
|
paddingLeft: value,
|
|
368
|
-
})
|
|
381
|
+
}),
|
|
382
|
+
px: (value) => ({
|
|
369
383
|
paddingLeft: value,
|
|
370
384
|
paddingRight: value,
|
|
371
|
-
})
|
|
385
|
+
}),
|
|
386
|
+
py: (value) => ({
|
|
372
387
|
paddingTop: value,
|
|
373
388
|
paddingBottom: value,
|
|
374
|
-
})
|
|
375
|
-
|
|
389
|
+
}),
|
|
390
|
+
cols: (value) => ({
|
|
391
|
+
gridColumn: `auto / span ${value}`,
|
|
376
392
|
"--grid-columns": value,
|
|
377
|
-
})
|
|
393
|
+
}),
|
|
394
|
+
},
|
|
378
395
|
});
|
|
379
396
|
// Typography globals
|
|
380
|
-
|
|
381
|
-
Object.entries(globalTypography).forEach(
|
|
382
|
-
var key = _a[0], styles = _a[1];
|
|
397
|
+
const typeGlobals = {};
|
|
398
|
+
Object.entries(globalTypography).forEach(([key, styles]) => {
|
|
383
399
|
if (key === "@initial") {
|
|
384
400
|
typeGlobals[":root"] = styles;
|
|
385
401
|
}
|
|
@@ -392,9 +408,8 @@ function createStitches(config) {
|
|
|
392
408
|
});
|
|
393
409
|
stitches.globalCss(typeGlobals)();
|
|
394
410
|
// Grid globals
|
|
395
|
-
|
|
396
|
-
Object.entries(globalGrid).forEach(
|
|
397
|
-
var key = _a[0], styles = _a[1];
|
|
411
|
+
const gridGlobals = {};
|
|
412
|
+
Object.entries(globalGrid).forEach(([key, styles]) => {
|
|
398
413
|
if (key === "@initial") {
|
|
399
414
|
gridGlobals[":root"] = styles;
|
|
400
415
|
}
|
|
@@ -406,9 +421,8 @@ function createStitches(config) {
|
|
|
406
421
|
}
|
|
407
422
|
});
|
|
408
423
|
stitches.globalCss(gridGlobals)();
|
|
409
|
-
|
|
410
|
-
Object.entries(globalResponsive).forEach(
|
|
411
|
-
var key = _a[0], styles = _a[1];
|
|
424
|
+
const responsiveGlobals = {};
|
|
425
|
+
Object.entries(globalResponsive).forEach(([key, styles]) => {
|
|
412
426
|
if (key === "@initial") {
|
|
413
427
|
responsiveGlobals[":root"] = styles;
|
|
414
428
|
}
|
|
@@ -420,7 +434,15 @@ function createStitches(config) {
|
|
|
420
434
|
}
|
|
421
435
|
});
|
|
422
436
|
stitches.globalCss(responsiveGlobals)();
|
|
423
|
-
|
|
424
|
-
return
|
|
437
|
+
const responsiveTokens = {};
|
|
438
|
+
return {
|
|
439
|
+
...stitches,
|
|
440
|
+
originalConfig: config,
|
|
441
|
+
breakpoints,
|
|
442
|
+
typeVariants,
|
|
443
|
+
gridVariants,
|
|
444
|
+
responsiveTokens,
|
|
445
|
+
responsiveGlobals,
|
|
446
|
+
};
|
|
425
447
|
}
|
|
426
448
|
exports.createStitches = createStitches;
|
package/style/index.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
3
|
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
5
9
|
}) : (function(o, m, k, k2) {
|
|
6
10
|
if (k2 === undefined) k2 = k;
|
|
7
11
|
o[k2] = m[k];
|
package/tsconfig.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
|
12
12
|
|
|
13
13
|
/* Language and Environment */
|
|
14
|
-
"target": "
|
|
14
|
+
"target": "ES2020" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
|
15
15
|
// "types": ["./src/types.d.ts"],
|
|
16
16
|
"lib": [
|
|
17
17
|
"DOM",
|
package/utils/Observable.d.ts
CHANGED
package/utils/Observable.js
CHANGED
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.Observable = void 0;
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
class Observable {
|
|
5
|
+
constructor(value) {
|
|
6
6
|
this._observers = [];
|
|
7
7
|
this.value = value;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
var _this = this;
|
|
9
|
+
subscribe(observer) {
|
|
11
10
|
this._observers.push(observer);
|
|
12
11
|
observer(this.value);
|
|
13
|
-
return
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
return () => this.unsubscribe(observer);
|
|
13
|
+
}
|
|
14
|
+
unsubscribe(observer) {
|
|
15
|
+
const index = this._observers.indexOf(observer);
|
|
17
16
|
if (index > -1) {
|
|
18
17
|
this._observers.splice(index, 1);
|
|
19
18
|
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
var _this = this;
|
|
19
|
+
}
|
|
20
|
+
update(data) {
|
|
23
21
|
if (typeof data === "function") {
|
|
24
22
|
// @ts-ignore
|
|
25
23
|
this.value = data(this.value);
|
|
@@ -27,8 +25,7 @@ var Observable = /** @class */ (function () {
|
|
|
27
25
|
else {
|
|
28
26
|
this.value = data;
|
|
29
27
|
}
|
|
30
|
-
this._observers.forEach(
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
}());
|
|
28
|
+
this._observers.forEach((observer) => observer(this.value));
|
|
29
|
+
}
|
|
30
|
+
}
|
|
34
31
|
exports.Observable = Observable;
|
package/utils/getRepoName.js
CHANGED
|
@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.getRepoName = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const git_repo_name_1 = __importDefault(require("git-repo-name"));
|
|
8
|
+
const path_1 = __importDefault(require("path"));
|
|
9
9
|
function getRepoName(dir) {
|
|
10
10
|
if (process.env.VERCEL) {
|
|
11
11
|
return {
|
|
@@ -14,7 +14,7 @@ function getRepoName(dir) {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
else {
|
|
17
|
-
|
|
17
|
+
let info = "";
|
|
18
18
|
try {
|
|
19
19
|
info = git_repo_name_1.default.sync(dir);
|
|
20
20
|
}
|