@codecademy/variance 0.25.1-alpha.ea0de1.0 → 0.25.1-alpha.ea1cbb.0

package/dist/core.js

@@ -63,7 +63,8 @@ export const variance = {
       transform = identity,
       property,
       properties = [property],
-      scale
+      scale,
+      resolveProperty
     } = config;
     const getScaleValue = createScaleLookup(scale);
     const alwaysTransform = scale === undefined || isArray(scale);
@@ -97,14 +98,23 @@ export const variance = {
         // for each property look up the scale value from theme if passed and apply any
         // final transforms to the value
         properties.forEach(property => {
+          // Resolve directional properties if resolveProperty hook is provided
+          let resolvedProperty;
+          if (resolveProperty && typeof property === 'object') {
+            const useLogicalProperties = props.theme?.useLogicalProperties ?? true;
+            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/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,21 @@
 import { Theme } from '@emotion/react';
-import { DefaultCSSPropertyValue, PropertyTypes } from './properties';
+import { DefaultCSSPropertyValue, 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[];
 }
 export interface Prop extends BaseProperty {
     scale?: keyof Theme | MapScale | ArrayScale;
     transform?: (val: string | number, prop?: string, props?: AbstractProps) => string | number | CSSObject;
+    /** Hook to resolve directional properties (physical/logical) based on theme setting */
+    resolveProperty?: (useLogicalProperties: boolean) => PropertyMode;
 }
 export interface AbstractPropTransformer extends Prop {
     prop: string;
@@ -24,7 +27,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 +73,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,9 @@ 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 {};

package/dist/utils/propNames.js

@@ -9,6 +9,8 @@ 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;
 
 /**
  * Orders all properties by the most dependent props
@@ -27,13 +29,13 @@ export const orderPropNames = config => Object.keys(config).sort((a, b) => {
     property: bProp,
     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;
     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.1-alpha.ea0de1.0",
+  "version": "0.25.1-alpha.ea1cbb.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": "7de0fe0615a8424530043aa5122010579e7c0e3c"
+  "gitHead": "c2969b8bc6d5586862a0c05b228db55a08c1c94a"
 }