@codecademy/variance 0.25.3-alpha.c2d955.0 → 0.25.3-alpha.d8b528.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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.3-alpha.c2d955.0",
+  "version": "0.25.3-alpha.d8b528.0",
   "author": "codecaaron <aaron@codecademy.com>",
   "dependencies": {
     "csstype": "^3.0.7",
@@ -31,5 +31,6 @@
   "scripts": {
     "build": "nx build @codecademy/variance"
   },
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "gitHead": "fe5dff414ecab26d29ead6252dccd7e4c5c00f64"
 }