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

package/dist/transforms/transformSize.js

@@ -1,47 +1,25 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import { isNumber } from 'lodash';
-export var percentageOrAbsolute = function percentageOrAbsolute(coordinate) {
+import isNumber from 'lodash/isNumber';
+export const percentageOrAbsolute = coordinate => {
   if (coordinate === 0) {
     return coordinate;
   }
-
   if (coordinate <= 1 && coordinate >= -1) {
-    return "".concat(coordinate * 100, "%");
+    return `${coordinate * 100}%`;
   }
-
-  return "".concat(coordinate, "px");
+  return `${coordinate}px`;
 };
-var valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
-export var transformSize = function transformSize(value) {
+const valueWithUnit = /(-?\d*\.?\d+)(%|\w*)/;
+export const transformSize = value => {
   if (isNumber(value)) {
     return percentageOrAbsolute(value);
   }
-
   if (value.includes('calc')) {
     return value;
   }
-
-  var _ref = valueWithUnit.exec(value) || [],
-      _ref2 = _slicedToArray(_ref, 3),
-      match = _ref2[0],
-      number = _ref2[1],
-      unit = _ref2[2];
-
+  const [match, number, unit] = valueWithUnit.exec(value) || [];
   if (match === undefined) {
     return value;
   }
-
-  var numericValue = parseFloat(number);
-  return !unit ? percentageOrAbsolute(numericValue) : "".concat(numericValue).concat(unit);
+  const numericValue = parseFloat(number);
+  return !unit ? percentageOrAbsolute(numericValue) : `${numericValue}${unit}`;
 };

package/dist/types/config.d.ts

@@ -1,18 +1,20 @@
 import { Theme } from '@emotion/react';
-import { DefaultCSSPropertyValue, PropertyTypes } from './properties';
+import { DefaultCSSPropertyValue, DirectionalProperties, DirectionalProperty, PropertyMode, PropertyTypes } from './properties';
 import { AbstractProps, CSSObject, CSSPropMap, CSSProps, ResponsiveProp, ThemeProps } from './props';
 import { AllUnionKeys, Key, KeyFromUnion } from './utils';
-export declare type MapScale = Record<string | number, string | number>;
-export declare type ArrayScale = readonly (string | number)[] & {
+export type MapScale = Record<string | number, string | number>;
+export type ArrayScale = readonly (string | number)[] & {
     length: 0;
 };
+export type PropertyValue = keyof PropertyTypes | DirectionalProperty;
 export interface BaseProperty {
-    property: keyof PropertyTypes;
-    properties?: readonly (keyof PropertyTypes)[];
+    property: PropertyValue;
+    properties?: readonly PropertyValue[] | DirectionalProperties;
 }
 export interface Prop extends BaseProperty {
     scale?: keyof Theme | MapScale | ArrayScale;
     transform?: (val: string | number, prop?: string, props?: AbstractProps) => string | number | CSSObject;
+    resolveProperty?: (useLogicalProperties: boolean) => PropertyMode;
 }
 export interface AbstractPropTransformer extends Prop {
     prop: string;
@@ -23,11 +25,12 @@ export interface AbstractParser {
     propNames: string[];
     config: Record<string, AbstractPropTransformer>;
 }
-export declare type PropertyValues<Property extends keyof PropertyTypes, All extends boolean = false> = Exclude<PropertyTypes<All extends true ? DefaultCSSPropertyValue : never>[Property], All extends true ? never : object | any[]>;
-export declare type ScaleValue<Config extends Prop> = Config['scale'] extends keyof Theme ? keyof Theme[Config['scale']] | PropertyValues<Config['property']> : Config['scale'] extends MapScale ? keyof Config['scale'] | PropertyValues<Config['property']> : Config['scale'] extends ArrayScale ? Config['scale'][number] | PropertyValues<Config['property']> : PropertyValues<Config['property'], true>;
-export declare type Scale<Config extends Prop> = ResponsiveProp<ScaleValue<Config> | ((theme: Theme) => ScaleValue<Config>)>;
+export type PropertyValues<Property extends keyof PropertyTypes, All extends boolean = false> = Exclude<PropertyTypes<All extends true ? DefaultCSSPropertyValue : never>[Property], All extends true ? never : object | any[]>;
+type BasePropertyKey<P> = P extends DirectionalProperty ? P['physical'] : P;
+export type ScaleValue<Config extends Prop> = Config['scale'] extends keyof Theme ? keyof Theme[Config['scale']] | PropertyValues<BasePropertyKey<Config['property']>> : Config['scale'] extends MapScale ? keyof Config['scale'] | PropertyValues<BasePropertyKey<Config['property']>> : Config['scale'] extends ArrayScale ? Config['scale'][number] | PropertyValues<BasePropertyKey<Config['property']>> : PropertyValues<BasePropertyKey<Config['property']>, true>;
+export type Scale<Config extends Prop> = ResponsiveProp<ScaleValue<Config> | ((theme: Theme) => ScaleValue<Config>)>;
 export interface TransformFn<P extends string, Config extends Prop> {
-    (value: Scale<Config> | Scale<Config>, prop: P, props: ThemeProps<{
+    (value: Scale<Config>, prop: P, props: ThemeProps<{
         [K in P]?: Scale<Config>;
     }>): CSSObject;
 }
@@ -35,7 +38,7 @@ export interface PropTransformer<P extends string, C extends Prop> extends Abstr
     prop: P;
     styleFn: TransformFn<P, C>;
 }
-export declare type TransformerMap<Config extends Record<string, Prop>> = {
+export type TransformerMap<Config extends Record<string, Prop>> = {
     [P in Key<keyof Config>]: PropTransformer<Key<P>, Config[P]>;
 };
 export interface Parser<Config extends Record<string, AbstractPropTransformer>> {
@@ -43,7 +46,7 @@ export interface Parser<Config extends Record<string, AbstractPropTransformer>>
     propNames: (keyof Config)[];
     config: Config;
 }
-export declare type Compose<Args extends AbstractParser[]> = {
+export type Compose<Args extends AbstractParser[]> = {
     [K in AllUnionKeys<Args[number]['config']>]: KeyFromUnion<Args[number]['config'], K>;
 };
 export interface Variant<P extends AbstractParser> {
@@ -60,12 +63,13 @@ export interface States<P extends AbstractParser> {
 export interface CSS<P extends AbstractParser> {
     <Props extends AbstractProps>(config: CSSProps<Props, SystemProps<P>>): (props: ThemeProps) => CSSObject;
 }
-export declare type ParserProps<Config extends Record<string, AbstractPropTransformer>> = ThemeProps<{
+export type ParserProps<Config extends Record<string, AbstractPropTransformer>> = ThemeProps<{
     [P in keyof Config]?: Parameters<Config[P]['styleFn']>[2][Config[P]['prop']];
 }>;
-export declare type SystemProps<P extends AbstractParser> = {
+export type SystemProps<P extends AbstractParser> = {
     [K in keyof Omit<Parameters<P>[0], 'theme'>]: Omit<Parameters<P>[0], 'theme'>[K];
 };
-export declare type VariantProps<T extends string, V> = {
+export type VariantProps<T extends string, V> = {
     [Key in T]?: V;
 };
+export {};

package/dist/types/config.js

@@ -0,0 +1 @@
+export {};

package/dist/types/properties.d.ts

@@ -1,10 +1,10 @@
 import { Globals, StandardProperties, VendorProperties } from 'csstype';
-declare type ColorProperties = 'color' | `${string}Color`;
-declare type ColorGlobals = {
+type ColorProperties = 'color' | `${string}Color`;
+type ColorGlobals = {
     [K in Extract<keyof StandardProperties, ColorProperties>]?: Globals | 'currentColor' | 'transparent' | (string & {});
 };
-declare type SizeProperties = 'left' | 'right' | 'top' | 'bottom' | 'inset' | 'width' | 'height' | `${string}${'Width' | 'Height'}`;
-declare type SizeGlobals = {
+type SizeProperties = 'left' | 'right' | 'top' | 'bottom' | 'inset' | 'width' | 'height' | `${string}${'Width' | 'Height'}`;
+type SizeGlobals = {
     [K in Extract<keyof StandardProperties, SizeProperties>]?: StandardProperties[K] | (number & {});
 };
 /** This is a placeholder type for CSS properties that may not have any specific global values (outlineOffset).
@@ -12,11 +12,20 @@ declare type SizeGlobals = {
  *
  * This ensures that autosuggestions will still work for literal types but still allow any string for certain properties.
  */
-export declare type DefaultCSSPropertyValue = (string & {}) | 0;
+export type DefaultCSSPropertyValue = (string & {}) | 0;
 export interface PropertyTypes<Overrides = DefaultCSSPropertyValue> extends Omit<StandardProperties<Overrides>, keyof ColorGlobals | keyof SizeGlobals>, ColorGlobals, SizeGlobals {
 }
 export interface VendorPropertyTypes<Overrides = DefaultCSSPropertyValue> extends VendorProperties<Overrides> {
 }
 export interface CSSPropertyTypes<Overrides = DefaultCSSPropertyValue> extends PropertyTypes<Overrides>, VendorPropertyTypes<Overrides> {
 }
+export type PropertyMode = 'logical' | 'physical';
+export interface DirectionalProperty {
+    physical: keyof PropertyTypes;
+    logical: keyof PropertyTypes;
+}
+export interface DirectionalProperties {
+    physical: readonly (keyof PropertyTypes)[];
+    logical: readonly (keyof PropertyTypes)[];
+}
 export {};

package/dist/types/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/types/props.d.ts

@@ -1,28 +1,38 @@
 import { Theme } from '@emotion/react';
 import { AbstractParser, Scale } from './config';
 import { CSSPropertyTypes } from './properties';
-export declare type AbstractProps = ThemeProps<Record<string, unknown>>;
+export type AbstractProps = ThemeProps<Record<string, unknown>>;
 interface BreakpointKeys<T = string> {
     xs: T;
     sm: T;
     md: T;
     lg: T;
     xl: T;
+    c_xs: T;
+    c_sm: T;
+    c_md: T;
+    c_lg: T;
+    c_xl: T;
 }
 export interface BreakpointCache {
     map: BreakpointKeys;
     array: string[];
 }
-export declare type ThemeProps<Props = {}> = Props & {
+export type ThemeProps<Props = {}> = Props & {
     theme?: Theme;
 };
-export interface MediaQueryArray<T> {
+export interface BreakpointArray<T> {
     0?: T;
     1?: T;
     2?: T;
     3?: T;
     4?: T;
     5?: T;
+    6?: T;
+    7?: T;
+    8?: T;
+    9?: T;
+    10?: T;
 }
 export interface MediaQueryMap<T> {
     _?: T;
@@ -32,16 +42,25 @@ export interface MediaQueryMap<T> {
     lg?: T;
     xl?: T;
 }
-export declare type ResponsiveProp<T> = T | MediaQueryMap<T> | MediaQueryArray<T>;
+export interface ContainerQueryMap<T> {
+    c_base?: T;
+    c_xs?: T;
+    c_sm?: T;
+    c_md?: T;
+    c_lg?: T;
+    c_xl?: T;
+}
+export type BreakpointMap<T> = ContainerQueryMap<T> & MediaQueryMap<T>;
+export type ResponsiveProp<T> = T | BreakpointMap<T> | BreakpointArray<T>;
 export interface CSSObject {
     [key: string]: string | number | CSSObject | undefined;
 }
-export declare type CSSPropMap<Props, System> = {
+export type CSSPropMap<Props, System> = {
     [K in keyof Props]?: CSSProps<Props[K], System>;
 };
-export declare type CSSProps<Props, System> = {
+export type CSSProps<Props, System> = {
     [K in keyof Props]?: K extends keyof System ? System[K] : K extends keyof CSSPropertyTypes ? CSSPropertyTypes[K] : Omit<CSSPropertyTypes, keyof System> & Omit<System, 'theme'>;
 };
-export declare type StyleProps<T extends (args: AbstractProps) => CSSObject> = Parameters<T>[0];
-export declare type ScaleValue<P extends AbstractParser, Prop extends keyof P['config']> = Scale<P['config'][Prop]>;
+export type StyleProps<T extends (args: AbstractProps) => CSSObject> = Parameters<T>[0];
+export type ScaleValue<P extends AbstractParser, Prop extends keyof P['config']> = Scale<P['config'][Prop]>;
 export {};

package/dist/types/props.js

@@ -0,0 +1 @@
+export {};

package/dist/types/theme.d.ts

@@ -4,6 +4,12 @@ export interface Breakpoints<T = string> {
     md: T;
     lg: T;
     xl: T;
+    c_base: T;
+    c_xs: T;
+    c_sm: T;
+    c_md: T;
+    c_lg: T;
+    c_xl: T;
 }
 export interface BaseTheme {
     breakpoints: Breakpoints;

package/dist/types/theme.js

@@ -0,0 +1 @@
+export {};

package/dist/types/utils.d.ts

@@ -1,3 +1,3 @@
-export declare type AllUnionKeys<T> = T extends any ? keyof T : never;
-export declare type KeyFromUnion<T, K> = T extends any ? K extends keyof T ? T[K] : never : never;
-export declare type Key<T> = T extends string ? T : never;
+export type AllUnionKeys<T> = T extends any ? keyof T : never;
+export type KeyFromUnion<T, K> = T extends any ? K extends keyof T ? T[K] : never : never;
+export type Key<T> = T extends string ? T : never;

package/dist/types/utils.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/flattenScale.d.ts

@@ -2,19 +2,19 @@
  * Returns an exhaustive list of all possible paths of an object T for keys K.
  * Possibilities are returned as `k1.k2.k3`.
  */
-export declare type FindPath<T, K extends keyof T, D extends string = '.'> = K extends string | number ? T[K] extends Record<string | number, any> ? T[K] extends ArrayLike<any> ? K | `${K}${D}${FindPath<T[K], Exclude<keyof T[K], keyof any[]>, D>}` : K | `${K}${D}${FindPath<T[K], keyof T[K], D>}` : K : never;
+export type FindPath<T, K extends keyof T, D extends string = '.'> = K extends string | number ? T[K] extends Record<string | number, any> ? T[K] extends ArrayLike<any> ? K | `${K}${D}${FindPath<T[K], Exclude<keyof T[K], keyof any[]>, D>}` : K | `${K}${D}${FindPath<T[K], keyof T[K], D>}` : K : never;
 /** Returns valid paths of object T */
-export declare type Path<T, D extends string = '.'> = FindPath<T, keyof T, D> | keyof T;
+export type Path<T, D extends string = '.'> = FindPath<T, keyof T, D> | keyof T;
 /** Returns the value of a valid path P `k1.k2.k3` in object T */
-export declare type PathValue<T, P extends Path<T, D>, D extends string = '.'> = P extends `${infer K}${D}${infer Rest}` ? K extends keyof T ? Rest extends Path<T[K], D> ? PathValue<T[K], Rest, D> : never : never : P extends keyof T ? T[P] : never;
+export type PathValue<T, P extends Path<T, D>, D extends string = '.'> = P extends `${infer K}${D}${infer Rest}` ? K extends keyof T ? Rest extends Path<T[K], D> ? PathValue<T[K], Rest, D> : never : never : P extends keyof T ? T[P] : never;
 /** Check if path has a primitive end value and return only the union of end paths */
-export declare type PathToLiteral<T, K extends Path<T, D>, D extends string = '.', Base extends string = ''> = PathValue<T, K, D> extends string | number ? K extends string | number ? K extends `${infer BasePath}${D}${Base}` ? BasePath : K : never : never;
+export type PathToLiteral<T, K extends Path<T, D>, D extends string = '.', Base extends string = ''> = PathValue<T, K, D> extends string | number ? K extends string | number ? K extends `${infer BasePath}${D}${Base}` ? BasePath : K : never : never;
 /**
  * Reduce all paths to a single map of paths with primitive values removing all extra non stateful paths
  * { path: { sub: 1 } } => { 'path-sub': 1 }
  *
  */
-export declare type LiteralPaths<T extends Record<string | number, any>, D extends string = '.', Base extends string = ''> = {
+export type LiteralPaths<T extends Record<string | number, any>, D extends string = '.', Base extends string = ''> = {
     [K in Path<T, D> as PathToLiteral<T, K, D, Base>]: PathValue<T, PathToLiteral<T, K, D>, D>;
 };
 export declare function flattenScale<T extends Record<string | number, any>, P extends string>(object: T, path?: P): LiteralPaths<T, '-', '_'>;

package/dist/utils/flattenScale.js

@@ -1,24 +1,35 @@
-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; }
+import isObject from 'lodash/isObject';
 
-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; }
-
-import { isObject } from 'lodash';
 /**
  * Returns an exhaustive list of all possible paths of an object T for keys K.
  * Possibilities are returned as `k1.k2.k3`.
  */
 
-export function flattenScale(object, path) {
-  return Object.keys(object).reduce(function (carry, key) {
-    var nextKey = path ? "".concat(path).concat(key === '_' ? '' : "-".concat(key)) : key;
-    var current = object[key];
+/** Returns valid paths of object T */
+
+/** Returns the value of a valid path P `k1.k2.k3` in object T */
+
+/** Check if path has a primitive end value and return only the union of end paths */
 
+/**
+ * Reduce all paths to a single map of paths with primitive values removing all extra non stateful paths
+ * { path: { sub: 1 } } => { 'path-sub': 1 }
+ *
+ */
+
+export function flattenScale(object, path) {
+  return Object.keys(object).reduce((carry, key) => {
+    const nextKey = path ? `${path}${key === '_' ? '' : `-${key}`}` : key;
+    const current = object[key];
     if (isObject(current)) {
-      return _objectSpread(_objectSpread({}, carry), flattenScale(current, nextKey));
+      return {
+        ...carry,
+        ...flattenScale(current, nextKey)
+      };
     }
-
-    return _objectSpread(_objectSpread({}, carry), {}, _defineProperty({}, nextKey, object[key]));
+    return {
+      ...carry,
+      [nextKey]: object[key]
+    };
   }, {});
 }

package/dist/utils/getStaticProperties.js

@@ -1,6 +1,3 @@
-import { keys, pick } from 'lodash';
-export var getStaticCss = function getStaticCss(props, filteredKeys) {
-  return pick(props, keys(props).filter(function (key) {
-    return !filteredKeys.includes(key);
-  }));
-};
+import keys from 'lodash/keys';
+import pick from 'lodash/pick';
+export const getStaticCss = (props, filteredKeys) => pick(props, keys(props).filter(key => !filteredKeys.includes(key)));

package/dist/utils/propNames.js

@@ -1,52 +1,55 @@
-var SHORTHAND_PROPERTIES = ['border', 'borderTop', 'borderBottom', 'borderLeft', 'borderRight', 'borderWidth', 'borderStyle', 'borderColor', 'background', 'flex', 'margin', 'padding', 'transition', 'gap', 'grid', 'gridArea', 'gridColumn', 'gridRow', 'gridTemplate', 'overflow', 'transition'];
-var SORT = {
+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
 };
-
-var compare = function compare(a, b) {
+const compare = (a, b) => {
   if (a < b) return SORT.A_BEFORE_B;
   if (b < a) return SORT.B_BEFORE_A;
   return SORT.EQUAL;
 };
+const isShorthand = prop => typeof prop === 'string' && SHORTHAND_PROPERTIES.includes(prop);
+const getShorthandIndex = prop => typeof prop === 'string' ? SHORTHAND_PROPERTIES.indexOf(prop) : -1;
+const getPropertiesCount = properties => {
+  if (!properties) return 0;
+  if (Array.isArray(properties)) return properties.length;
+  // DirectionalProperties object - using physical array length as representative, since the length for logical is the same
+  return properties.physical?.length ?? 0;
+};
+
 /**
  * Orders all properties by the most dependent props
  * @param config
  */
-
-
-export var orderPropNames = function orderPropNames(config) {
-  return Object.keys(config).sort(function (a, b) {
-    var aConf = config[a],
-        bConf = config[b];
-    var aProp = aConf.property,
-        _aConf$properties = aConf.properties,
-        aProperties = _aConf$properties === void 0 ? [] : _aConf$properties;
-    var bProp = bConf.property,
-        _bConf$properties = bConf.properties,
-        bProperties = _bConf$properties === void 0 ? [] : _bConf$properties;
-    var aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
-    var bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
-
-    if (aIsShorthand && bIsShorthand) {
-      var aNum = aProperties.length;
-      var 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);
+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 = isShorthand(aProp);
+  const bIsShorthand = isShorthand(bProp);
+  if (aIsShorthand && bIsShorthand) {
+    const aNum = getPropertiesCount(aProperties);
+    const bNum = getPropertiesCount(bProperties);
+    if (aProp !== bProp) {
+      return compare(getShorthandIndex(aProp), getShorthandIndex(bProp));
     }
-
-    if (aIsShorthand) return SORT.A_BEFORE_B;
-    if (bIsShorthand) return SORT.B_BEFORE_A;
-    return SORT.EQUAL;
-  });
-};
+    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;
+});

package/dist/utils/responsive.d.ts

@@ -1,16 +1,16 @@
 import { AbstractPropTransformer } from '../types/config';
-import { BreakpointCache, CSSObject, MediaQueryMap, ThemeProps } from '../types/props';
+import { BreakpointCache, BreakpointMap, CSSObject, 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 parseBreakpoints: (breakpoints?: Breakpoints) => 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)[]> {
+export declare const isMediaMap: (val: object) => val is BreakpointMap<string | number>;
+interface ResponsiveParser<Bp extends BreakpointMap<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 objectParser: ResponsiveParser<BreakpointMap<string | number>>;
 export declare const arrayParser: ResponsiveParser<(string | number)[]>;
 export declare const orderBreakpoints: (styles: CSSObject, breakpoints: string[]) => CSSObject;
 export {};