@codecademy/variance 1.0.0-alpha.f43515.0 → 1.0.0

package/dist/core.d.ts

@@ -1,10 +1,10 @@
 import { AbstractParser, AbstractPropTransformer, Compose, CSS, Parser, Prop, PropTransformer, States, TransformerMap, Variant } from './types/config';
 export declare const variance: {
     createParser<Config extends Record<string, AbstractPropTransformer>>(config: Config): Parser<Config>;
-    createTransform<P extends string, Config_1 extends Prop>(prop: P, config: Config_1): PropTransformer<P, Config_1>;
+    createTransform<P extends string, Config extends Prop>(prop: P, config: Config): PropTransformer<P, Config>;
     compose<Args extends AbstractParser[]>(...parsers: Args): Parser<Compose<Args>>;
-    createCss<Config_2 extends Record<string, Prop>, P_1 extends Parser<TransformerMap<Config_2>>>(config: Config_2): CSS<P_1>;
-    createVariant<Config_3 extends Record<string, Prop>, P_2 extends Parser<TransformerMap<Config_3>>>(config: Config_3): Variant<P_2>;
-    createStates<Config_4 extends Record<string, Prop>, P_3 extends Parser<TransformerMap<Config_4>>>(config: Config_4): States<P_3>;
-    create<Config_5 extends Record<string, Prop>>(config: Config_5): Parser<TransformerMap<Config_5>>;
+    createCss<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): CSS<P>;
+    createVariant<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): Variant<P>;
+    createStates<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): States<P>;
+    create<Config extends Record<string, Prop>>(config: Config): Parser<TransformerMap<Config>>;
 };

package/dist/core.js

@@ -1,251 +1,240 @@
-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 get from 'lodash/get';
+import identity from 'lodash/identity';
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isUndefined from 'lodash/isUndefined';
+import merge from 'lodash/merge';
 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 var variance = {
+export const 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) {
+  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 === 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);
+        breakpoints = parseBreakpoints(theme?.breakpoints);
+      }
 
-        switch (_typeof(value)) {
+      // 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 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.
-
-
+            }
+            // 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 the parser function with the resulting meta information for further composition
     return Object.assign(parser, {
-      propNames: propNames,
-      config: config
+      propNames,
+      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 = {};
-
+  createTransform(prop, config) {
+    const {
+      transform = identity,
+      property,
+      properties: configProperties,
+      scale,
+      resolveProperty
+    } = config;
+    const getScaleValue = createScaleLookup(scale);
+    const alwaysTransform = scale === undefined || isArray(scale);
+    const isDirectionalProperties = props => props !== undefined && !isArray(props) && 'physical' in props && 'logical' in props;
+    return {
+      ...config,
+      prop,
+      styleFn: (value, prop, props) => {
+        const styles = {};
         if (isUndefined(value)) {
           return styles;
         }
-
-        var useTransform = false;
-        var intermediateValue;
-        var scaleValue;
-
-        switch (_typeof(value)) {
+        let useTransform = false;
+        let intermediateValue;
+        let 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;
+            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(function (property) {
-          var styleValue = intermediateValue;
+        }
+        const useLogicalProperties = props.theme?.useLogicalProperties ?? true;
+        let resolvedProperties;
+        if (isDirectionalProperties(configProperties)) {
+          const mode = resolveProperty ? resolveProperty(useLogicalProperties) : useLogicalProperties ? 'logical' : 'physical';
+          resolvedProperties = configProperties[mode];
+        } else {
+          resolvedProperties = configProperties ?? [property];
+        }
 
+        // for each property look up the scale value from theme if passed and apply any
+        // final transforms to the value
+        resolvedProperties.forEach(property => {
+          let resolvedProperty;
+          if (resolveProperty && typeof property === 'object') {
+            const mode = resolveProperty(useLogicalProperties);
+            resolvedProperty = property[mode];
+          } else {
+            resolvedProperty = property;
+          }
+          let styleValue = intermediateValue;
           if (useTransform && !isUndefined(styleValue)) {
-            styleValue = transform(styleValue, property, props);
+            styleValue = transform(styleValue, resolvedProperty, props);
           }
-
-          switch (_typeof(styleValue)) {
+          switch (typeof styleValue) {
             case 'number':
             case 'string':
-              return styles[property] = styleValue;
-
+              return styles[resolvedProperty] = styleValue;
             case 'object':
               return Object.assign(styles, styleValue);
-
             default:
           }
-        }); // return the resulting styles object
-
+        });
+        // 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);
-    }, {}));
+  compose(...parsers) {
+    return this.createParser(parsers.reduce((carry, parser) => ({
+      ...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);
+  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]));
 
-      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;
+      const staticCss = getStaticCss(cssProps, ['theme',
+      // Just in case this gets passed somehow
+      ...selectors, ...filteredProps]);
+      return ({
+        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
-          })));
+        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 = _objectSpread(_objectSpread({}, staticCss), css);
+        /** Merge the static and generated css and save it to the cache */
+        cache = {
+          ...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];
+  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 function (props) {
-        var _variantFns;
-
-        var _props$prop = props[prop],
-            selected = _props$prop === void 0 ? defaultVariant : _props$prop;
-        var styles = {};
+      return props => {
+        const {
+          [prop]: selected = defaultVariant
+        } = props;
+        const 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));
+        return merge(styles, baseFn(props), variantFns?.[selected]?.(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];
+  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 function (props) {
-        var styles = {};
-        orderedStates.forEach(function (state) {
+      return props => {
+        const styles = {};
+        orderedStates.forEach(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
+  create(config) {
+    const transforms = {};
 
-    for (var prop in config) {
+    // 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]);
       }
-    } // Create a parser that handles all the props within the config
-
+    }
 
+    // Create a parser that handles all the props within the config
     return this.createParser(transforms);
   }
 };

package/dist/createTheme/createTheme.d.ts

@@ -46,6 +46,13 @@ declare class ThemeBuilder<T extends AbstractTheme> {
      * @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
      */
     updateScale<Key extends keyof T, Fn extends (tokens: T[Key]) => Record<string | number, unknown>>(key: Key, updateFn: Fn): ThemeBuilder<T & Record<Key, T[Key] & ReturnType<Fn>>>;
+    /**
+     *
+     * @param name Adds a name to the theme
+     * This is used for referencing the theme for replacing default fonts.
+     * @example .addName('core')
+     */
+    addName(name: string): ThemeBuilder<MergeTheme<T & PrivateThemeKeys, Record<'name', string>>>;
     /**
      * This finalizes the theme build and returns the final theme and variables to be provided.
      */