@codecademy/variance 0.25.1-alpha.fb9da9.0 → 0.25.1

package/dist/core.js

@@ -63,8 +63,7 @@ export const variance = {
       transform = identity,
       property,
       properties = [property],
-      scale,
-      resolveProperty
+      scale
     } = config;
     const getScaleValue = createScaleLookup(scale);
     const alwaysTransform = scale === undefined || isArray(scale);
@@ -98,23 +97,14 @@ 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, 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,21 +1,18 @@
 import { Theme } from '@emotion/react';
-import { DefaultCSSPropertyValue, 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[];
+    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;
-    /** Hook to resolve directional properties (physical/logical) based on theme setting */
-    resolveProperty?: (useLogicalProperties: boolean) => PropertyMode;
 }
 export interface AbstractPropTransformer extends Prop {
     prop: string;
@@ -27,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<{
@@ -73,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,9 +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 {};

package/dist/utils/propNames.js

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

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';