@codecademy/variance 0.25.2 → 0.25.3-alpha.4aeb6d.0

package/dist/core.js

@@ -62,11 +62,13 @@ export const variance = {
     const {
       transform = identity,
       property,
-      properties = [property],
-      scale
+      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,
@@ -93,18 +95,33 @@ export const variance = {
           default:
             return styles;
         }
+        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
-        properties.forEach(property => {
+        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) {
             case 'number':
             case 'string':
-              return styles[property] = styleValue;
+              return styles[resolvedProperty] = styleValue;
             case 'object':
               return Object.assign(styles, styleValue);
             default:

package/dist/getPropertyMode/getPropertyMode.d.ts

@@ -0,0 +1,2 @@
+import { PropertyMode } from '../types/properties';
+export declare const getPropertyMode: (useLogicalProperties: boolean) => PropertyMode;

package/dist/getPropertyMode/getPropertyMode.js

@@ -0,0 +1,3 @@
+export const getPropertyMode = useLogicalProperties => {
+  return useLogicalProperties ? 'logical' : 'physical';
+};

package/dist/getPropertyMode/getPropertyMode.test.js

@@ -0,0 +1,15 @@
+import { getPropertyMode } from './getPropertyMode';
+describe('getPropertyMode', () => {
+  it.each([{
+    useLogicalProperties: true,
+    expected: 'logical'
+  }, {
+    useLogicalProperties: false,
+    expected: 'physical'
+  }])('returns "$expected" when useLogicalProperties is $useLogicalProperties', ({
+    useLogicalProperties,
+    expected
+  }) => {
+    expect(getPropertyMode(useLogicalProperties)).toBe(expected);
+  });
+});

package/dist/getPropertyMode/index.d.ts

@@ -0,0 +1 @@
+export * from './getPropertyMode';

package/dist/getPropertyMode/index.js

@@ -0,0 +1 @@
+export * from './getPropertyMode';

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './createTheme';
 export * from './types/props';
 export * from './transforms';
 export * from './scales/createScale';
+export * from './getPropertyMode';

package/dist/index.js

@@ -2,4 +2,5 @@ export { variance } from './core';
 export * from './createTheme';
 export * from './types/props';
 export * from './transforms';
-export * from './scales/createScale';
+export * from './scales/createScale';
+export * from './getPropertyMode';

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 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;
@@ -24,7 +26,8 @@ export interface AbstractParser {
     config: Record<string, AbstractPropTransformer>;
 }
 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[]>;
-export 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>;
+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<{
@@ -69,3 +72,4 @@ export type SystemProps<P extends AbstractParser> = {
 export type VariantProps<T extends string, V> = {
     [Key in T]?: V;
 };
+export {};

package/dist/types/properties.d.ts

@@ -19,4 +19,13 @@ export interface VendorPropertyTypes<Overrides = DefaultCSSPropertyValue> extend
 }
 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/utils/propNames.js

@@ -9,6 +9,14 @@ const compare = (a, 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
@@ -21,19 +29,19 @@ export const orderPropNames = config => Object.keys(config).sort((a, b) => {
   } = config;
   const {
     property: aProp,
-    properties: aProperties = []
+    properties: aProperties
   } = aConf;
   const {
     property: bProp,
-    properties: bProperties = []
+    properties: bProperties
   } = bConf;
-  const aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
-  const bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
+  const aIsShorthand = isShorthand(aProp);
+  const bIsShorthand = isShorthand(bProp);
   if (aIsShorthand && bIsShorthand) {
-    const aNum = aProperties.length;
-    const bNum = bProperties.length;
+    const aNum = getPropertiesCount(aProperties);
+    const bNum = getPropertiesCount(bProperties);
     if (aProp !== bProp) {
-      return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(bProp));
+      return compare(getShorthandIndex(aProp), getShorthandIndex(bProp));
     }
     if (aProp === bProp) {
       if (aNum === 0) return SORT.A_BEFORE_B;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/variance",
   "description": "Constraint based CSS in JS for building scalable design systems",
-  "version": "0.25.2",
+  "version": "0.25.3-alpha.4aeb6d.0",
   "author": "codecaaron <aaron@codecademy.com>",
   "dependencies": {
     "csstype": "^3.0.7",
@@ -32,5 +32,5 @@
     "build": "nx build @codecademy/variance"
   },
   "types": "dist/index.d.ts",
-  "gitHead": "dba147a168af471002f2f97b74eea97204bd843f"
+  "gitHead": "c3bacad29ba252b1df9328296dd76c713cd2df16"
 }