@codecademy/variance 0.19.1-alpha.a809e8.0 → 0.20.1-alpha.447c4d.0

package/dist/utils/getStaticProperties.d.ts

@@ -0,0 +1 @@
+export declare const getStaticCss: (props: Record<string, any>, filteredKeys: string[]) => Pick<Record<string, any>, string>;

package/dist/utils/getStaticProperties.js

@@ -0,0 +1,3 @@
+import { keys, pick } from 'lodash';
+export const getStaticCss = (props, filteredKeys) => pick(props, keys(props).filter((key) => !filteredKeys.includes(key)));
+//# sourceMappingURL=getStaticProperties.js.map

package/dist/utils/getStaticProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStaticProperties.js","sourceRoot":"","sources":["../../src/utils/getStaticProperties.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAA0B,EAC1B,YAAsB,EACtB,EAAE,CACF,IAAI,CACF,KAAK,EACL,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CACzD,CAAC"}

package/dist/utils/propNames.d.ts

@@ -0,0 +1,6 @@
+import { BaseProperty } from '../types/config';
+/**
+ * Orders all properties by the most dependent props
+ * @param config
+ */
+export declare const orderPropNames: (config: Record<string, BaseProperty>) => string[];

package/dist/utils/propNames.js

@@ -0,0 +1,66 @@
+const SHORTHAND_PROPERTIES = [
+    'border',
+    'borderTop',
+    'borderBottom',
+    'borderLeft',
+    'borderRight',
+    'borderWidth',
+    'borderStyle',
+    'borderColor',
+    'background',
+    'flex',
+    'margin',
+    'padding',
+    'transition',
+    'gap',
+    'grid',
+    'gridArea',
+    'gridColumn',
+    'gridRow',
+    'gridTemplate',
+    'overflow',
+    'transition',
+];
+const SORT = {
+    A_BEFORE_B: -1,
+    B_BEFORE_A: 1,
+    EQUAL: 1,
+};
+const compare = (a, b) => {
+    if (a < b)
+        return SORT.A_BEFORE_B;
+    if (b < a)
+        return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
+};
+/**
+ * Orders all properties by the most dependent props
+ * @param config
+ */
+export const orderPropNames = (config) => Object.keys(config).sort((a, b) => {
+    const { [a]: aConf, [b]: bConf } = config;
+    const { property: aProp, properties: aProperties = [] } = aConf;
+    const { property: bProp, properties: bProperties = [] } = bConf;
+    const aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
+    const bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
+    if (aIsShorthand && bIsShorthand) {
+        const aNum = aProperties.length;
+        const bNum = bProperties.length;
+        if (aProp !== bProp) {
+            return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
+        }
+        if (aProp === bProp) {
+            if (aNum === 0)
+                return SORT.A_BEFORE_B;
+            if (bNum === 0)
+                return SORT.B_BEFORE_A;
+        }
+        return compare(bNum, aNum);
+    }
+    if (aIsShorthand)
+        return SORT.A_BEFORE_B;
+    if (bIsShorthand)
+        return SORT.B_BEFORE_A;
+    return SORT.EQUAL;
+});
+//# sourceMappingURL=propNames.js.map

package/dist/utils/propNames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propNames.js","sourceRoot":"","sources":["../../src/utils/propNames.ts"],"names":[],"mappings":"AAEA,MAAM,oBAAoB,GAAG;IAC3B,QAAQ;IACR,WAAW;IACX,cAAc;IACd,YAAY;IACZ,aAAa;IACb,aAAa;IACb,aAAa;IACb,aAAa;IACb,YAAY;IACZ,MAAM;IACN,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,KAAK;IACL,MAAM;IACN,UAAU;IACV,YAAY;IACZ,SAAS;IACT,cAAc;IACd,UAAU;IACV,YAAY;CACb,CAAC;AAEF,MAAM,IAAI,GAAG;IACX,UAAU,EAAE,CAAC,CAAC;IACd,UAAU,EAAE,CAAC;IACb,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;IACvC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC,UAAU,CAAC;IAClC,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC,UAAU,CAAC;IAClC,OAAO,IAAI,CAAC,KAAK,CAAC;AACpB,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAoC,EAAE,EAAE,CACrE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAChC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC;IAE1C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAChE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAEhE,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,IAAI,YAAY,IAAI,YAAY,EAAE;QAChC,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC;QAChC,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC;QAEhC,IAAI,KAAK,KAAK,KAAK,EAAE;YACnB,OAAO,OAAO,CACZ,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,EACnC,oBAAoB,CAAC,OAAO,CAAC,KAAK,CAAC,CACpC,CAAC;SACH;QAED,IAAI,KAAK,KAAK,KAAK,EAAE;YACnB,IAAI,IAAI,KAAK,CAAC;gBAAE,OAAO,IAAI,CAAC,UAAU,CAAC;YACvC,IAAI,IAAI,KAAK,CAAC;gBAAE,OAAO,IAAI,CAAC,UAAU,CAAC;SACxC;QAED,OAAO,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC5B;IAED,IAAI,YAAY;QAAE,OAAO,IAAI,CAAC,UAAU,CAAC;IACzC,IAAI,YAAY;QAAE,OAAO,IAAI,CAAC,UAAU,CAAC;IAEzC,OAAO,IAAI,CAAC,KAAK,CAAC;AACpB,CAAC,CAAC,CAAC"}

package/dist/utils/responsive.d.ts

@@ -0,0 +1,16 @@
+import { AbstractPropTransformer } from '../types/config';
+import { BreakpointCache, CSSObject, MediaQueryMap, ThemeProps } from '../types/props';
+import { Breakpoints } from '../types/theme';
+/**
+ * Destructures the themes breakpoints into an ordered structure to traverse
+ */
+export declare const parseBreakpoints: (breakpoints?: Breakpoints | undefined) => BreakpointCache | null;
+export declare const isMediaArray: (val: unknown) => val is (string | number)[];
+export declare const isMediaMap: (val: object) => val is MediaQueryMap<string | number>;
+interface ResponsiveParser<Bp extends MediaQueryMap<string | number> | (string | number)[]> {
+    <C extends AbstractPropTransformer>(value: Bp, props: ThemeProps, config: C, breakpoints: Bp): CSSObject;
+}
+export declare const objectParser: ResponsiveParser<MediaQueryMap<string | number>>;
+export declare const arrayParser: ResponsiveParser<(string | number)[]>;
+export declare const orderBreakpoints: (styles: CSSObject, breakpoints: string[]) => CSSObject;
+export {};

package/dist/utils/responsive.js

@@ -0,0 +1,65 @@
+import { intersection, omit } from 'lodash';
+const BREAKPOINT_KEYS = ['_', 'xs', 'sm', 'md', 'lg', 'xl'];
+/**
+ * Destructures the themes breakpoints into an ordered structure to traverse
+ */
+export const parseBreakpoints = (breakpoints) => {
+    if (breakpoints === undefined)
+        return null;
+    const { xs, sm, md, lg, xl } = breakpoints ?? {};
+    // Ensure order for mapping
+    return {
+        map: breakpoints,
+        array: [xs, sm, md, lg, xl],
+    };
+};
+export const isMediaArray = (val) => Array.isArray(val);
+export const isMediaMap = (val) => intersection(Object.keys(val), BREAKPOINT_KEYS).length > 0;
+export const objectParser = (value, props, config, breakpoints) => {
+    const styles = {};
+    const { styleFn, prop } = config;
+    const { _, ...rest } = value;
+    // the keyof 'base' is base styles
+    if (_)
+        Object.assign(styles, styleFn(_, prop, props));
+    // Map over remaining keys and merge the corresponding breakpoint styles
+    // for that property.
+    Object.keys(breakpoints).forEach((breakpointKey) => {
+        const bpStyles = rest[breakpointKey];
+        if (typeof bpStyles === 'undefined')
+            return;
+        Object.assign(styles, {
+            [breakpoints[breakpointKey]]: styleFn(bpStyles, prop, props),
+        });
+    });
+    return styles;
+};
+export const arrayParser = (value, props, config, breakpoints) => {
+    const styles = {};
+    const { styleFn, prop } = config;
+    const [_, ...rest] = value;
+    // the first index is base styles
+    if (_)
+        Object.assign(styles, styleFn(_, prop, props));
+    // Map over each value in the array and merge the corresponding breakpoint styles
+    // for that property.
+    rest.forEach((val, i) => {
+        const breakpointKey = breakpoints[i];
+        if (!breakpointKey || typeof val === 'undefined')
+            return;
+        Object.assign(styles, {
+            [breakpointKey]: styleFn(val, prop, props),
+        });
+    });
+    return styles;
+};
+export const orderBreakpoints = (styles, breakpoints) => {
+    const orderedStyles = omit(styles, breakpoints);
+    breakpoints.forEach((bp) => {
+        if (styles[bp]) {
+            orderedStyles[bp] = styles[bp];
+        }
+    });
+    return orderedStyles;
+};
+//# sourceMappingURL=responsive.js.map

package/dist/utils/responsive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../src/utils/responsive.ts"],"names":[],"mappings":"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"}

package/dist/utils/serializeTokens.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from '@emotion/react';
+import { CSSObject } from '../types/props';
+/**
+ * Returns an type of any object with { key: 'var(--key) }
+ */
+export declare type KeyAsVariable<T extends Record<string, any>, Prefix extends string> = {
+    [V in keyof T]: `var(--${Prefix}-${Extract<V, string>})`;
+};
+declare type SerializedTokensInput = Record<string, string | number | CSSObject | SerializedTokensInputRecursive>;
+interface SerializedTokensInputRecursive {
+    [i: number]: SerializedTokensInput;
+    [i: string]: SerializedTokensInput;
+}
+export declare const serializeTokens: <T extends SerializedTokensInput, Prefix extends string>(tokens: T, prefix: Prefix, theme: Theme | undefined) => {
+    tokens: KeyAsVariable<T, Prefix>;
+    variables: CSSObject;
+};
+export {};

package/dist/utils/serializeTokens.js

@@ -0,0 +1,33 @@
+import { isObject, merge } from 'lodash';
+const templateBreakpoints = (value, alias, theme) => {
+    if (isObject(value)) {
+        const { _, base, ...rest } = value;
+        const css = {
+            [alias]: _ ?? base,
+        };
+        if (theme) {
+            const { breakpoints } = theme;
+            Object.keys(breakpoints).forEach((key) => {
+                css[breakpoints[key]] = {
+                    [alias]: rest[key],
+                };
+            });
+        }
+        return css;
+    }
+    return { [alias]: value };
+};
+export const serializeTokens = (tokens, prefix, theme) => {
+    const tokenReferences = {};
+    const tokenVariables = {};
+    Object.keys(tokens).forEach((key) => {
+        const varName = `--${prefix}-${key}`;
+        tokenReferences[key] = `var(${varName})`;
+        merge(tokenVariables, templateBreakpoints(tokens[key], varName, theme));
+    });
+    return {
+        tokens: tokenReferences,
+        variables: tokenVariables,
+    };
+};
+//# sourceMappingURL=serializeTokens.js.map

package/dist/utils/serializeTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"serializeTokens.js","sourceRoot":"","sources":["../../src/utils/serializeTokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAczC,MAAM,mBAAmB,GAAG,CAC1B,KAAkC,EAClC,KAAa,EACb,KAAwB,EACxB,EAAE;IACF,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;QACnB,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QACnC,MAAM,GAAG,GAAG;YACV,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI;SACnB,CAAC;QAEF,IAAI,KAAK,EAAE;YACT,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;YAC9B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACvC,GAAG,CAAC,WAAW,CAAC,GAA+B,CAAC,CAAC,GAAG;oBAClD,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC;iBACnB,CAAC;YACJ,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;AAC5B,CAAC,CAAC;AAYF,MAAM,CAAC,MAAM,eAAe,GAAG,CAI7B,MAAS,EACT,MAAc,EACd,KAAwB,EAIxB,EAAE;IACF,MAAM,eAAe,GAAG,EAA4B,CAAC;IACrD,MAAM,cAAc,GAAc,EAAE,CAAC;IAErC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAClC,MAAM,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,EAAE,CAAC;QACrC,eAAe,CAAC,GAAG,CAAC,GAAG,OAAO,OAAO,GAAG,CAAC;QAEzC,KAAK,CAAC,cAAc,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAC1E,CAAC,CAAC,CAAC;IAEH,OAAO;QACL,MAAM,EAAE,eAA2C;QACnD,SAAS,EAAE,cAAc;KAC1B,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.19.1-alpha.a809e8.0",
+  "version": "0.20.1-alpha.447c4d.0",
   "keywords": [
     "emotion",
     "css",
@@ -40,8 +40,8 @@
     "@emotion/jest": "^11.3.0",
     "@emotion/styled": "^11.3.0",
     "@types/react-test-renderer": "^17.0.1",
-    "react": "16.13.1",
-    "react-test-renderer": "16.13.1"
+    "react": "17.0.2",
+    "react-test-renderer": "17.0.2"
   },
-  "gitHead": "7be5114e0f5a72b7d5835c0312490f467646a903"
+  "gitHead": "00814476df1784f2bd65d8fdf6ca191938e82526"
 }