eddev 0.2.0-beta.11 → 0.2.0-beta.12

package/style/createStitches.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStitches = void 0;
+exports.createStitches = exports.getResponsiveObjectStyles = exports.parseResponsiveObject = exports.parseBreakpoints = void 0;
 var react_1 = require("@stitches/react");
 var typeKeyMap = {
     fontSize: "fontSizes",
@@ -20,12 +20,14 @@ var typeKeyMap = {
     letterSpacing: "letterSpacings",
     fontWeight: "fontWeights",
 };
-function parseBreakpoints(medias) {
+function parseBreakpoints(names, medias) {
     var breakpoints = [];
     // Add an initial breakpoint
     breakpoints.push({ key: "initial", min: "0px", max: null });
     // Parse each breakpoint
     for (var key in medias) {
+        if (!names.includes(key))
+            continue;
         var media = medias[key];
         var minMatch = media.match(/min-width: ([0-9]+[a-z]+)/);
         var maxMatch = media.match(/max-width: ([0-9]+[a-z]+)/);
@@ -51,6 +53,7 @@ function parseBreakpoints(medias) {
     }
     return breakpoints;
 }
+exports.parseBreakpoints = parseBreakpoints;
 var unitless = function (value) { return parseFloat(value); };
 function parseTypography(theme, breakpoints, typography) {
     var globals = {};
@@ -151,47 +154,184 @@ function parseGrid(theme, media, grid) {
     }
     return { gridVariants: {}, globalGrid: globalGrid };
 }
-function parseResponsiveObject(theme, breakpoints, object, varName, scale) {
-    var _a;
-    // Util for grabbing the raw value of a token, for lerping
-    var resolveValue = function (value) {
-        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/) && scale) {
-            // Single scale
-            return theme[scale][value.replace("$", "")];
-        }
-        else if (typeof value === "number") {
-            return value + "px";
+function parseResponsiveValue(val) {
+    if (Array.isArray(val)) {
+        return __assign(__assign({}, parseResponsiveValue(val[0])), { lerpStart: true });
+    }
+    else if (typeof val === "string") {
+        if (val.match(/^x[0-9\.]+$/)) {
+            return {
+                lerpStart: false,
+                type: "multiplier",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
         }
-        else {
-            return value;
+        else if (val.match(/^[0-9\.]+px$/)) {
+            return {
+                lerpStart: false,
+                type: "px",
+                value: parseFloat(val.replace(/px$/, "")),
+            };
         }
+    }
+    else if (typeof val === "number") {
+        return {
+            lerpStart: false,
+            type: "number",
+            value: val,
+        };
+    }
+    else if (val === undefined || val === null) {
+        return {
+            lerpStart: false,
+            type: "undefined",
+        };
+    }
+    return {
+        lerpStart: false,
+        type: "unknown",
+        value: val,
     };
-    var globals = {};
-    var initial = {};
-    var entries = Object.entries(object);
-    entries.forEach(function (_a, i) {
-        var _b;
-        var bpName = _a[0], responsiveValue = _a[1];
-        globals[bpName] = {};
-        if (Array.isArray(responsiveValue)) {
-            responsiveValue = responsiveValue[0];
-            // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
-            var minSize = (_b = breakpoints.find(function (bp) { return "@" + bp.key === bpName; })) === null || _b === void 0 ? void 0 : _b.min;
-            var nextBreakpoint = breakpoints.find(function (bp) { var _a; return "@" + bp.key === ((_a = entries[i + 1]) === null || _a === void 0 ? void 0 : _a[0]); });
-            if (!nextBreakpoint)
-                throw new Error("Cannot create responsive '".concat(varName, "' at breakpoint '").concat(bpName, "', since it is the last-defined breakpoint. Your last size should be a string/number/token."));
-            var maxSize = nextBreakpoint.min;
-            var responsiveValue2 = object["@" + nextBreakpoint.key];
-            if (Array.isArray(responsiveValue2))
-                responsiveValue2 = responsiveValue2[0];
-            var size1 = resolveValue(responsiveValue);
-            var size2 = resolveValue(responsiveValue2);
-            responsiveValue = "calc(".concat(size1, " + (100vw - ").concat(minSize, ") / (").concat(unitless(maxSize), " - ").concat(unitless(minSize), ") * (").concat(unitless(size2), " - ").concat(unitless(size1), "))");
+}
+function parseResponsiveObject(breakpoints, object) {
+    // Breakpoint hash
+    var breakpointHash = {};
+    for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+        var bp = breakpoints_1[_i];
+        breakpointHash[bp.key] = {
+            min: bp.min ? parseFloat(bp.min) : null,
+            max: bp.max ? parseFloat(bp.max) : null,
+        };
+    }
+    var result = [];
+    var lerpStart = "initial";
+    var lastDefined = "initial";
+    var concreteValues = {};
+    for (var _a = 0, breakpoints_2 = breakpoints; _a < breakpoints_2.length; _a++) {
+        var bp = breakpoints_2[_a];
+        var value = parseResponsiveValue(object["@" + bp.key]);
+        var defined = value.type !== "undefined";
+        var base = !defined || value.type === "multiplier" ? lastDefined : bp.key;
+        lerpStart = value.lerpStart ? bp.key : lerpStart && !defined ? lerpStart : null;
+        if (value.type === "px" || value.type === "number") {
+            concreteValues[bp.key] = value.value;
+        }
+        else if (value.type === "multiplier") {
+            concreteValues[bp.key] = value.value * concreteValues[base];
+        }
+        result.push(__assign(__assign({}, value), { defined: defined, breakpoint: bp.key, baseBreakpoint: base, lerping: lerpStart
+                ? {
+                    fromBP: lerpStart,
+                    toBP: null,
+                    minMedia: 0,
+                    maxMedia: 0,
+                    minValue: 0,
+                    maxValue: 0,
+                }
+                : undefined, concreteValue: concreteValues[bp.key] }));
+        if (defined) {
+            lastDefined = bp.key;
+        }
+    }
+    var nextBreakpoints = [];
+    var lastBreakpoint = null;
+    for (var i = breakpoints.length - 1; i >= 0; i--) {
+        var bp = breakpoints[i];
+        nextBreakpoints[i] = lastBreakpoint;
+        if (result[i].defined) {
+            lastBreakpoint = bp.key;
+        }
+    }
+    console.log("Next BPs", nextBreakpoints);
+    result.forEach(function (item, i) {
+        if (item.lerping) {
+            item.lerping.toBP = nextBreakpoints[i];
         }
-        globals[bpName][varName] = responsiveValue;
     });
-    return [globals, (_a = globals["@initial"]) === null || _a === void 0 ? void 0 : _a[varName]];
+    result.forEach(function (item, i) {
+        var lerp = item.lerping;
+        if (lerp) {
+            var fromBP = lerp.fromBP ? breakpointHash[lerp.fromBP] : null;
+            var toBP = lerp.toBP ? breakpointHash[lerp.toBP] : null;
+            if (!fromBP || fromBP.min === null) {
+                throw new Error("Cannot create responsive style for first breakpoint");
+            }
+            if (!toBP || toBP.min === null) {
+                throw new Error("Cannot create responsive style for last breakpoint");
+            }
+            lerp.minMedia = fromBP.min;
+            lerp.maxMedia = toBP.min;
+            lerp.minValue = item.concreteValue;
+            lerp.maxValue = result.find(function (o) { return o.breakpoint === lerp.toBP; }).concreteValue;
+        }
+    });
+    return result;
+}
+exports.parseResponsiveObject = parseResponsiveObject;
+function getResponsiveObjectStyles(theme, breakpoints, object, varName, scale, unit) {
+    var _a, _b;
+    var _c;
+    if (unit === void 0) { unit = "px"; }
+    // Prescale object
+    object = __assign({}, object);
+    var parsed = parseResponsiveObject(breakpoints, object);
+    // console.log("Result", object, parsed)
+    var globals = {};
+    for (var _i = 0, parsed_1 = parsed; _i < parsed_1.length; _i++) {
+        var atom = parsed_1[_i];
+        if (atom.lerpStart && atom.lerping) {
+            var lerp = atom.lerping;
+            globals["@" + atom.breakpoint] = (_a = {},
+                _a[varName] = "calc(".concat(lerp.minValue).concat(unit, " + (100vw - ").concat(lerp.minMedia).concat(unit, ") / (").concat(lerp.maxMedia, " - ").concat(lerp.minMedia, ") * (").concat(lerp.maxValue, " - ").concat(lerp.minValue, "))"),
+                _a);
+        }
+        else if (atom.concreteValue) {
+            globals["@" + atom.breakpoint] = (_b = {},
+                _b[varName] = atom.concreteValue + unit,
+                _b);
+        }
+    }
+    // console.log("globals", globals)
+    // Util for grabbing the raw value of a token, for lerping
+    // const resolveValue = (value: any) => {
+    //   if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/) && scale) {
+    //     // Single scale
+    //     return theme[scale][value.replace("$", "")]
+    //   } else if (typeof value === "number") {
+    //     return value + "px"
+    //   } else {
+    //     return value
+    //   }
+    // }
+    // const globals2: any = {}
+    // const initial: any = {}
+    // const entries = Object.entries(object)
+    // entries.forEach(([bpName, responsiveValue], i) => {
+    //   globals2[bpName] = {}
+    //   if (Array.isArray(responsiveValue)) {
+    //     responsiveValue = responsiveValue[0]
+    //     // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
+    //     const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
+    //     const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
+    //     if (!nextBreakpoint)
+    //       throw new Error(
+    //         `Cannot create responsive '${varName}' at breakpoint '${bpName}', since it is the last-defined breakpoint. Your last size should be a string/number/token.`
+    //       )
+    //     const maxSize = nextBreakpoint.min
+    //     let responsiveValue2 = (object as any)["@" + nextBreakpoint.key]
+    //     if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
+    //     let size1 = resolveValue(responsiveValue)
+    //     let size2 = resolveValue(responsiveValue2)
+    //     responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
+    //       minSize
+    //     )}) * (${unitless(size2)} - ${unitless(size1)}))`
+    //   }
+    //   globals2[bpName][varName] = responsiveValue
+    // })
+    // console.log(globals, globals2)
+    return [globals, (_c = globals["@initial"]) === null || _c === void 0 ? void 0 : _c[varName]];
 }
+exports.getResponsiveObjectStyles = getResponsiveObjectStyles;
 // parseResponsiveTokens({'@initial': blah, '@desktop': blah}, breakpoints, )
 function parseResponsiveTokens(theme, breakpoints) {
     var globalResponsive = {
@@ -204,7 +344,8 @@ function parseResponsiveTokens(theme, breakpoints) {
         for (var key in theme[scale]) {
             var val = theme[scale][key];
             if (val && typeof val === "object") {
-                var _a = parseResponsiveObject(theme, breakpoints, val, "--" + scale + "-" + key, scale), tokenGlobals = _a[0], initial = _a[1];
+                var _a = getResponsiveObjectStyles(theme, breakpoints, val, "--" + scale + "-" + key, scale), tokenGlobals = _a[0], initial = _a[1];
+                console.log("TOKEN", tokenGlobals, initial);
                 for (var bp in tokenGlobals) {
                     globalResponsive[bp] = __assign(__assign({}, globalResponsive[bp]), tokenGlobals[bp]);
                 }
@@ -218,7 +359,8 @@ function parseResponsiveTokens(theme, breakpoints) {
     return { initialResponsive: initialResponsive, globalResponsive: globalResponsive };
 }
 function createStitches(config) {
-    var breakpoints = parseBreakpoints(config.media);
+    var breakpoints = parseBreakpoints(config.breakpoints, config.media);
+    console.log("PARSED BREAKPOINTS", breakpoints);
     var _a = parseTypography(config.theme, breakpoints, config.typography), typeVariants = _a.typeVariants, globalTypography = _a.globalTypography;
     var _b = parseGrid(config.theme, config.media, config.grid), gridVariants = _b.gridVariants, globalGrid = _b.globalGrid;
     var _c = parseResponsiveTokens(config.responsive, breakpoints), initialResponsive = _c.initialResponsive, globalResponsive = _c.globalResponsive;
@@ -309,6 +451,6 @@ function createStitches(config) {
     });
     stitches.globalCss(responsiveGlobals)();
     var responsiveTokens = {};
-    return __assign(__assign({}, stitches), { typeVariants: typeVariants, gridVariants: gridVariants, responsiveTokens: responsiveTokens });
+    return __assign(__assign({}, stitches), { originalConfig: config, breakpoints: breakpoints, typeVariants: typeVariants, gridVariants: gridVariants, responsiveTokens: responsiveTokens, responsiveGlobals: responsiveGlobals });
 }
 exports.createStitches = createStitches;