@codecademy/variance 0.25.3-alpha.bd18ee.0 → 0.25.3-alpha.c65660.0

package/dist/core.js

@@ -62,13 +62,11 @@ export const variance = {
     const {
       transform = identity,
       property,
-      properties: configProperties,
-      scale,
-      resolveProperty
+      properties = [property],
+      scale
     } = 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,
@@ -95,33 +93,18 @@ 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
-        resolvedProperties.forEach(property => {
-          let resolvedProperty;
-          if (resolveProperty && typeof property === 'object') {
-            const mode = resolveProperty(useLogicalProperties);
-            resolvedProperty = property[mode];
-          } else {
-            resolvedProperty = property;
-          }
+        properties.forEach(property => {
           let styleValue = intermediateValue;
           if (useTransform && !isUndefined(styleValue)) {
-            styleValue = transform(styleValue, resolvedProperty, props);
+            styleValue = transform(styleValue, property, props);
           }
           switch (typeof styleValue) {
             case 'number':
             case 'string':
-              return styles[resolvedProperty] = styleValue;
+              return styles[property] = styleValue;
             case 'object':
               return Object.assign(styles, styleValue);
             default:

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types/config.d.ts

@@ -1,20 +1,18 @@
 import { Theme } from '@emotion/react';
-import { DefaultCSSPropertyValue, DirectionalProperties, DirectionalProperty, PropertyMode, PropertyTypes } from './properties';
+import { DefaultCSSPropertyValue, 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: PropertyValue;
-    properties?: readonly PropertyValue[] | DirectionalProperties;
+    property: keyof PropertyTypes;
+    properties?: readonly (keyof PropertyTypes)[];
 }
 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;
@@ -26,8 +24,7 @@ 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[]>;
-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 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 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<{
@@ -72,4 +69,3 @@ 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,13 +19,4 @@ 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,14 +9,6 @@ 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
@@ -29,19 +21,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 = isShorthand(aProp);
-  const bIsShorthand = isShorthand(bProp);
+  const aIsShorthand = SHORTHAND_PROPERTIES.includes(aProp);
+  const bIsShorthand = SHORTHAND_PROPERTIES.includes(bProp);
   if (aIsShorthand && bIsShorthand) {
-    const aNum = getPropertiesCount(aProperties);
-    const bNum = getPropertiesCount(bProperties);
+    const aNum = aProperties.length;
+    const bNum = bProperties.length;
     if (aProp !== bProp) {
-      return compare(getShorthandIndex(aProp), getShorthandIndex(bProp));
+      return compare(SHORTHAND_PROPERTIES.indexOf(aProp), SHORTHAND_PROPERTIES.indexOf(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.bd18ee.0",
+  "version": "0.25.3-alpha.c65660.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": "2b6be3cc33f13466ff4fecdbb80202d8994e0ae4"
+  "gitHead": "1d8000f8c8f5a6a97d9b74f1e3d92b29cfc91afb"
 }

package/dist/getPropertyMode/getPropertyMode.d.ts

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

package/dist/getPropertyMode/getPropertyMode.js

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

package/dist/getPropertyMode/getPropertyMode.test.js

@@ -1,15 +0,0 @@
-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

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

package/dist/getPropertyMode/index.js

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