@codecademy/variance 0.20.1-alpha.e38a27.0 → 0.20.1

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.20.1-alpha.e38a27.0](https://github.com/Codecademy/gamut/compare/@codecademy/variance@0.20.0...@codecademy/variance@0.20.1-alpha.e38a27.0) (2022-01-31)
+### [0.20.1](https://github.com/Codecademy/gamut/compare/@codecademy/variance@0.20.0...@codecademy/variance@0.20.1) (2022-07-29)
 
 **Note:** Version bump only for package @codecademy/variance
 

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Ryzac, Inc.
+Copyright (c) 2022 Codecademy LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/core.js

@@ -1,189 +1,251 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 import { get, identity, isArray, isObject, isUndefined, merge } from 'lodash';
 import { createScaleLookup } from './scales/createScaleLookup';
 import { getStaticCss } from './utils/getStaticProperties';
 import { orderPropNames } from './utils/propNames';
-import { arrayParser, isMediaArray, isMediaMap, objectParser, orderBreakpoints, parseBreakpoints, } from './utils/responsive';
-export const variance = {
-    // Parser to handle any set of configured props
-    createParser(config) {
-        const propNames = orderPropNames(config);
-        let breakpoints;
-        const parser = (props) => {
-            const styles = {};
-            const { theme } = props;
-            // Attempt to cache the breakpoints if we have not yet or if theme has become available.
-            if (breakpoints === undefined ||
-                (breakpoints === null && theme?.breakpoints)) {
-                // Save the breakpoints if we can
-                breakpoints = parseBreakpoints(theme?.breakpoints);
-            }
-            // Loops over all prop names on the configured config to check for configured styles
-            propNames.forEach((prop) => {
-                const property = config[prop];
-                const value = get(props, prop);
-                switch (typeof value) {
-                    case 'string':
-                    case 'number':
-                    case 'function':
-                        return Object.assign(styles, property.styleFn(value, prop, props));
-                    // handle any props configured with the responsive notation
-                    case 'object':
-                        if (!breakpoints) {
-                            return;
-                        }
-                        // If it is an array the order of values is smallest to largest: [_, xs, ...]
-                        if (isMediaArray(value)) {
-                            return merge(styles, arrayParser(value, props, property, breakpoints.array));
-                        }
-                        // Check to see if value is an object matching the responsive syntax and generate the styles.
-                        if (isMediaMap(value)) {
-                            return merge(styles, objectParser(value, props, property, breakpoints.map));
-                        }
-                }
-            });
-            return breakpoints ? orderBreakpoints(styles, breakpoints.array) : styles;
-        };
-        // return the parser function with the resulting meta information for further composition
-        return Object.assign(parser, { propNames, config });
-    },
-    // Given a single property configuration enrich the config with a transform function
-    // that traverses the properties the function is responsible for.
-    createTransform(prop, config) {
-        const { transform = identity, property, properties = [property], scale, } = config;
-        const getScaleValue = createScaleLookup(scale);
-        const alwaysTransform = scale === undefined || isArray(scale);
-        return {
-            ...config,
-            prop,
-            styleFn: (value, prop, props) => {
-                const styles = {};
-                if (isUndefined(value)) {
-                    return styles;
-                }
-                let useTransform = false;
-                let intermediateValue;
-                let scaleValue;
-                switch (typeof value) {
-                    case 'number':
-                    case 'string':
-                        scaleValue = getScaleValue(value, props);
-                        useTransform = scaleValue !== undefined || alwaysTransform;
-                        intermediateValue = scaleValue ?? value;
-                        break;
-                    case 'function':
-                        if (props.theme) {
-                            intermediateValue = value(props.theme);
-                        }
-                        break;
-                    default:
-                        return styles;
-                }
-                // for each property look up the scale value from theme if passed and apply any
-                // final transforms to the value
-                properties.forEach((property) => {
-                    let styleValue = intermediateValue;
-                    if (useTransform && !isUndefined(styleValue)) {
-                        styleValue = transform(styleValue, property, props);
-                    }
-                    switch (typeof styleValue) {
-                        case 'number':
-                        case 'string':
-                            return (styles[property] = styleValue);
-                        case 'object':
-                            return Object.assign(styles, styleValue);
-                        default:
-                    }
-                });
-                // return the resulting styles object
-                return styles;
-            },
-        };
-    },
-    compose(...parsers) {
-        return this.createParser(parsers.reduce((carry, parser) => ({ ...carry, ...parser.config }), {}));
-    },
-    createCss(config) {
-        const parser = this.create(config);
-        const filteredProps = parser.propNames;
-        return (cssProps) => {
-            let cache;
-            const allKeys = Object.keys(cssProps);
-            /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
-            const selectors = allKeys.filter((key) => !filteredProps.includes(key) && isObject(cssProps[key]));
-            /** Static CSS Properties get extracted if they match neither syntax */
-            const staticCss = getStaticCss(cssProps, [
-                'theme',
-                ...selectors,
-                ...filteredProps,
-            ]);
-            return ({ theme }) => {
-                if (cache)
-                    return cache;
-                const css = parser({ ...cssProps, theme });
-                selectors.forEach((selector) => {
-                    const selectorConfig = cssProps[selector] ?? {};
-                    css[selector] = {
-                        ...getStaticCss(selectorConfig, filteredProps),
-                        ...parser({ ...selectorConfig, theme }),
-                    };
-                });
-                /** Merge the static and generated css and save it to the cache */
-                cache = {
-                    ...staticCss,
-                    ...css,
-                };
-                return cache;
-            };
-        };
-    },
-    createVariant(config) {
-        const css = this.createCss(config);
-        return ({ prop = 'variant', defaultVariant, base = {}, variants }) => {
-            const baseFn = css(base);
-            const variantFns = {};
-            Object.keys(variants).forEach((key) => {
-                const variantKey = key;
-                const cssProps = variants[variantKey];
-                variantFns[variantKey] = css(cssProps);
-            });
-            return (props) => {
-                const { [prop]: selected = defaultVariant } = props;
-                const styles = {};
-                if (!selected)
-                    return styles;
-                return merge(styles, baseFn(props), variantFns?.[selected]?.(props));
-            };
-        };
-    },
-    createStates(config) {
-        const css = this.createCss(config);
-        return (states) => {
-            const orderedStates = Object.keys(states);
-            const stateFns = {};
-            orderedStates.forEach((key) => {
-                const stateKey = key;
-                const cssProps = states[stateKey];
-                stateFns[stateKey] = css(cssProps);
-            });
-            return (props) => {
-                const styles = {};
-                orderedStates.forEach((state) => {
-                    merge(styles, props[state] && stateFns[state](props));
-                });
-                return styles;
-            };
-        };
-    },
-    create(config) {
-        const transforms = {};
-        // Create a transform function for each of the props
-        for (const prop in config) {
-            if (typeof prop === 'string') {
-                transforms[prop] = this.createTransform(prop, config[prop]);
+import { arrayParser, isMediaArray, isMediaMap, objectParser, orderBreakpoints, parseBreakpoints } from './utils/responsive';
+export var variance = {
+  // Parser to handle any set of configured props
+  createParser: function createParser(config) {
+    var propNames = orderPropNames(config);
+    var breakpoints;
+
+    var parser = function parser(props) {
+      var styles = {};
+      var theme = props.theme; // Attempt to cache the breakpoints if we have not yet or if theme has become available.
+
+      if (breakpoints === undefined || breakpoints === null && theme !== null && theme !== void 0 && theme.breakpoints) {
+        // Save the breakpoints if we can
+        breakpoints = parseBreakpoints(theme === null || theme === void 0 ? void 0 : theme.breakpoints);
+      } // Loops over all prop names on the configured config to check for configured styles
+
+
+      propNames.forEach(function (prop) {
+        var property = config[prop];
+        var value = get(props, prop);
+
+        switch (_typeof(value)) {
+          case 'string':
+          case 'number':
+          case 'function':
+            return Object.assign(styles, property.styleFn(value, prop, props));
+          // handle any props configured with the responsive notation
+
+          case 'object':
+            if (!breakpoints) {
+              return;
+            } // If it is an array the order of values is smallest to largest: [_, xs, ...]
+
+
+            if (isMediaArray(value)) {
+              return merge(styles, arrayParser(value, props, property, breakpoints.array));
+            } // Check to see if value is an object matching the responsive syntax and generate the styles.
+
+
+            if (isMediaMap(value)) {
+              return merge(styles, objectParser(value, props, property, breakpoints.map));
             }
+
+        }
+      });
+      return breakpoints ? orderBreakpoints(styles, breakpoints.array) : styles;
+    }; // return the parser function with the resulting meta information for further composition
+
+
+    return Object.assign(parser, {
+      propNames: propNames,
+      config: config
+    });
+  },
+  // Given a single property configuration enrich the config with a transform function
+  // that traverses the properties the function is responsible for.
+  createTransform: function createTransform(prop, config) {
+    var _config$transform = config.transform,
+        transform = _config$transform === void 0 ? identity : _config$transform,
+        property = config.property,
+        _config$properties = config.properties,
+        properties = _config$properties === void 0 ? [property] : _config$properties,
+        scale = config.scale;
+    var getScaleValue = createScaleLookup(scale);
+    var alwaysTransform = scale === undefined || isArray(scale);
+    return _objectSpread(_objectSpread({}, config), {}, {
+      prop: prop,
+      styleFn: function styleFn(value, prop, props) {
+        var _scaleValue;
+
+        var styles = {};
+
+        if (isUndefined(value)) {
+          return styles;
         }
-        // Create a parser that handles all the props within the config
-        return this.createParser(transforms);
-    },
-};
-//# sourceMappingURL=core.js.map
+
+        var useTransform = false;
+        var intermediateValue;
+        var scaleValue;
+
+        switch (_typeof(value)) {
+          case 'number':
+          case 'string':
+            scaleValue = getScaleValue(value, props);
+            useTransform = scaleValue !== undefined || alwaysTransform;
+            intermediateValue = (_scaleValue = scaleValue) !== null && _scaleValue !== void 0 ? _scaleValue : value;
+            break;
+
+          case 'function':
+            if (props.theme) {
+              intermediateValue = value(props.theme);
+            }
+
+            break;
+
+          default:
+            return styles;
+        } // for each property look up the scale value from theme if passed and apply any
+        // final transforms to the value
+
+
+        properties.forEach(function (property) {
+          var styleValue = intermediateValue;
+
+          if (useTransform && !isUndefined(styleValue)) {
+            styleValue = transform(styleValue, property, props);
+          }
+
+          switch (_typeof(styleValue)) {
+            case 'number':
+            case 'string':
+              return styles[property] = styleValue;
+
+            case 'object':
+              return Object.assign(styles, styleValue);
+
+            default:
+          }
+        }); // return the resulting styles object
+
+        return styles;
+      }
+    });
+  },
+  compose: function compose() {
+    for (var _len = arguments.length, parsers = new Array(_len), _key = 0; _key < _len; _key++) {
+      parsers[_key] = arguments[_key];
+    }
+
+    return this.createParser(parsers.reduce(function (carry, parser) {
+      return _objectSpread(_objectSpread({}, carry), parser.config);
+    }, {}));
+  },
+  createCss: function createCss(config) {
+    var parser = this.create(config);
+    var filteredProps = parser.propNames;
+    return function (cssProps) {
+      var cache;
+      var allKeys = Object.keys(cssProps);
+      /** Any key of the CSSProps that is not a System Prop or a Static CSS Property is treated as a nested selector */
+
+      var selectors = allKeys.filter(function (key) {
+        return !filteredProps.includes(key) && isObject(cssProps[key]);
+      });
+      /** Static CSS Properties get extracted if they match neither syntax */
+
+      var staticCss = getStaticCss(cssProps, ['theme'].concat(_toConsumableArray(selectors), _toConsumableArray(filteredProps)));
+      return function (_ref) {
+        var theme = _ref.theme;
+        if (cache) return cache;
+        var css = parser(_objectSpread(_objectSpread({}, cssProps), {}, {
+          theme: theme
+        }));
+        selectors.forEach(function (selector) {
+          var _cssProps$selector;
+
+          var selectorConfig = (_cssProps$selector = cssProps[selector]) !== null && _cssProps$selector !== void 0 ? _cssProps$selector : {};
+          css[selector] = _objectSpread(_objectSpread({}, getStaticCss(selectorConfig, filteredProps)), parser(_objectSpread(_objectSpread({}, selectorConfig), {}, {
+            theme: theme
+          })));
+        });
+        /** Merge the static and generated css and save it to the cache */
+
+        cache = _objectSpread(_objectSpread({}, staticCss), css);
+        return cache;
+      };
+    };
+  },
+  createVariant: function createVariant(config) {
+    var css = this.createCss(config);
+    return function (_ref2) {
+      var _ref2$prop = _ref2.prop,
+          prop = _ref2$prop === void 0 ? 'variant' : _ref2$prop,
+          defaultVariant = _ref2.defaultVariant,
+          _ref2$base = _ref2.base,
+          base = _ref2$base === void 0 ? {} : _ref2$base,
+          variants = _ref2.variants;
+      var baseFn = css(base);
+      var variantFns = {};
+      Object.keys(variants).forEach(function (key) {
+        var variantKey = key;
+        var cssProps = variants[variantKey];
+        variantFns[variantKey] = css(cssProps);
+      });
+      return function (props) {
+        var _variantFns;
+
+        var _props$prop = props[prop],
+            selected = _props$prop === void 0 ? defaultVariant : _props$prop;
+        var styles = {};
+        if (!selected) return styles;
+        return merge(styles, baseFn(props), variantFns === null || variantFns === void 0 ? void 0 : (_variantFns = variantFns[selected]) === null || _variantFns === void 0 ? void 0 : _variantFns.call(variantFns, props));
+      };
+    };
+  },
+  createStates: function createStates(config) {
+    var css = this.createCss(config);
+    return function (states) {
+      var orderedStates = Object.keys(states);
+      var stateFns = {};
+      orderedStates.forEach(function (key) {
+        var stateKey = key;
+        var cssProps = states[stateKey];
+        stateFns[stateKey] = css(cssProps);
+      });
+      return function (props) {
+        var styles = {};
+        orderedStates.forEach(function (state) {
+          merge(styles, props[state] && stateFns[state](props));
+        });
+        return styles;
+      };
+    };
+  },
+  create: function create(config) {
+    var transforms = {}; // Create a transform function for each of the props
+
+    for (var prop in config) {
+      if (typeof prop === 'string') {
+        transforms[prop] = this.createTransform(prop, config[prop]);
+      }
+    } // Create a parser that handles all the props within the config
+
+
+    return this.createParser(transforms);
+  }
+};