@fluentui-react-native/use-tokens 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log - @fluentui-react-native/use-tokens
 
+## 0.7.1
+
+### Patch Changes
+
+- 0d6e9c1: chore: migrate to `oxfmt`
+- ac6e7af: Ensure packages have a default export that references the typescript entrypoint and clean up build dependency ordering
+- Updated dependencies [0d6e9c1]
+- Updated dependencies [ac6e7af]
+  - @fluentui-react-native/framework-base@0.3.1
+
 ## 0.7.0
 
 ### Minor Changes

package/lib/applyPropsToTokens.d.ts

@@ -1,8 +1,3 @@
 import type { GetTypedMemoValue } from '@fluentui-react-native/framework-base';
-export declare function applyPropsToTokens<TProps, TTokens>(
-  props: TProps,
-  tokens: TTokens,
-  cache: GetTypedMemoValue<TTokens>,
-  keys: (keyof TTokens)[],
-): [TTokens, GetTypedMemoValue<TTokens>];
-//# sourceMappingURL=applyPropsToTokens.d.ts.map
+export declare function applyPropsToTokens<TProps, TTokens>(props: TProps, tokens: TTokens, cache: GetTypedMemoValue<TTokens>, keys: (keyof TTokens)[]): [TTokens, GetTypedMemoValue<TTokens>];
+//# sourceMappingURL=applyPropsToTokens.d.ts.map

package/lib/applyPropsToTokens.js

@@ -1,9 +1,9 @@
 export function applyPropsToTokens(props, tokens, cache, keys) {
-  for (const key of keys) {
-    const sourceValue = props[key];
-    const setValue = sourceValue === tokens[key] ? undefined : sourceValue;
-    [tokens, cache] = cache(() => (setValue === undefined ? tokens : { ...tokens, [key]: setValue }), [setValue]);
-  }
-  return [tokens, cache];
+    for (const key of keys) {
+        const sourceValue = props[key];
+        const setValue = sourceValue === tokens[key] ? undefined : sourceValue;
+        [tokens, cache] = cache(() => (setValue === undefined ? tokens : { ...tokens, [key]: setValue }), [setValue]);
+    }
+    return [tokens, cache];
 }
-//# sourceMappingURL=applyPropsToTokens.js.map
+//# sourceMappingURL=applyPropsToTokens.js.map

package/lib/applyPropsToTokens.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=applyPropsToTokens.test.d.ts.map
+//# sourceMappingURL=applyPropsToTokens.test.d.ts.map

package/lib/applyPropsToTokens.test.js

@@ -2,28 +2,28 @@ import { getTypedMemoCache } from '@fluentui-react-native/framework-base';
 import { applyPropsToTokens } from './applyPropsToTokens';
 const tokenProps = ['dos', 'quatro', 'cinco'];
 const themeTokens = {
-  uno: 'uno',
-  dos: 'dos',
-  tres: 3,
-  quatro: 4,
-  cinco: true,
+    uno: 'uno',
+    dos: 'dos',
+    tres: 3,
+    quatro: 4,
+    cinco: true,
 };
 const props1 = { dos: 'two', quatro: 'four', cinco: false, foo: 'foo', bar: 'bar' };
 // const props2: Props = { dos: 'two' };
 // const props3: Props = { foo: 'foo', bar: 'bar' };
 describe('applyPropsToTokens tests', () => {
-  test('props get copied', () => {
-    const cache = getTypedMemoCache();
-    const [tokens] = applyPropsToTokens(props1, themeTokens, cache, tokenProps);
-    expect(tokens).not.toBe(themeTokens);
-    for (const key of tokenProps) {
-      expect(tokens[key]).toEqual(props1[key]);
-    }
-  });
-  test('no copied props does not change tokens', () => {
-    const cache = getTypedMemoCache();
-    const [tokens] = applyPropsToTokens({}, themeTokens, cache, tokenProps);
-    expect(tokens).toBe(themeTokens);
-  });
+    test('props get copied', () => {
+        const cache = getTypedMemoCache();
+        const [tokens] = applyPropsToTokens(props1, themeTokens, cache, tokenProps);
+        expect(tokens).not.toBe(themeTokens);
+        for (const key of tokenProps) {
+            expect(tokens[key]).toEqual(props1[key]);
+        }
+    });
+    test('no copied props does not change tokens', () => {
+        const cache = getTypedMemoCache();
+        const [tokens] = applyPropsToTokens({}, themeTokens, cache, tokenProps);
+        expect(tokens).toBe(themeTokens);
+    });
 });
-//# sourceMappingURL=applyPropsToTokens.test.js.map
+//# sourceMappingURL=applyPropsToTokens.test.js.map

package/lib/applyTokenLayers.d.ts

@@ -12,10 +12,5 @@ export type HasLayer = (name: string) => boolean;
  * @param subCache - cache scoped to the root object with no layers applied
  * @param hasLayer - a function which returns whether a given layer should be applied
  */
-export declare function applyTokenLayers<TTokens>(
-  tokens: TTokens,
-  states: string[],
-  subCache: GetTypedMemoValue<TTokens>,
-  hasLayer: HasLayer,
-): [TTokens, GetTypedMemoValue<TTokens>];
-//# sourceMappingURL=applyTokenLayers.d.ts.map
+export declare function applyTokenLayers<TTokens>(tokens: TTokens, states: string[], subCache: GetTypedMemoValue<TTokens>, hasLayer: HasLayer): [TTokens, GetTypedMemoValue<TTokens>];
+//# sourceMappingURL=applyTokenLayers.d.ts.map

package/lib/applyTokenLayers.js

@@ -9,20 +9,17 @@ import { immutableMerge } from '@fluentui-react-native/framework-base';
  * @param hasLayer - a function which returns whether a given layer should be applied
  */
 export function applyTokenLayers(tokens, states, subCache, hasLayer) {
-  let final = { tokens, subCache };
-  if (states && states.length > 0) {
-    // now walk the overrides that are set, merging in props, caching results, and getting a new sub cache
-    final = states
-      .filter((val) => hasLayer(val))
-      .reduce((previous, layerName) => {
-        const layer = previous.tokens[layerName];
-        const [tokens, subCache] = previous.subCache(
-          () => (layer && typeof layer === 'object' ? immutableMerge(previous.tokens, layer) : previous.tokens),
-          [layer],
-        );
-        return { tokens, subCache };
-      }, final);
-  }
-  return [final.tokens, final.subCache];
+    let final = { tokens, subCache };
+    if (states && states.length > 0) {
+        // now walk the overrides that are set, merging in props, caching results, and getting a new sub cache
+        final = states
+            .filter((val) => hasLayer(val))
+            .reduce((previous, layerName) => {
+            const layer = previous.tokens[layerName];
+            const [tokens, subCache] = previous.subCache(() => (layer && typeof layer === 'object' ? immutableMerge(previous.tokens, layer) : previous.tokens), [layer]);
+            return { tokens, subCache };
+        }, final);
+    }
+    return [final.tokens, final.subCache];
 }
-//# sourceMappingURL=applyTokenLayers.js.map
+//# sourceMappingURL=applyTokenLayers.js.map

package/lib/applyTokenLayers.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=applyTokenLayers.test.d.ts.map
+//# sourceMappingURL=applyTokenLayers.test.d.ts.map

package/lib/applyTokenLayers.test.js

@@ -2,52 +2,52 @@ import { getMemoCache } from '@fluentui-react-native/framework-base';
 import { applyTokenLayers } from './applyTokenLayers';
 const stateOrder = ['hover', 'press', 'disabled'];
 const tokens1 = {
-  a: 'a',
-  b: 'b',
-  c: 'c',
-  hover: {
-    a: 'a-hover',
-    b: 'b-hover',
+    a: 'a',
+    b: 'b',
+    c: 'c',
+    hover: {
+        a: 'a-hover',
+        b: 'b-hover',
+        press: {
+            a: 'a-hover-press',
+        },
+    },
     press: {
-      a: 'a-hover-press',
+        a: 'a-press',
+        b: 'b-press',
+    },
+    disabled: {
+        a: 'disabled',
+        b: 'disabled',
+        c: 'disabled',
     },
-  },
-  press: {
-    a: 'a-press',
-    b: 'b-press',
-  },
-  disabled: {
-    a: 'disabled',
-    b: 'disabled',
-    c: 'disabled',
-  },
 };
 function stripLayers(tokens) {
-  const t = { ...tokens };
-  delete t.hover;
-  delete t.press;
-  delete t.disabled;
-  return t;
+    const t = { ...tokens };
+    delete t.hover;
+    delete t.press;
+    delete t.disabled;
+    return t;
 }
 describe('applyLayers tests', () => {
-  test('no layers returns tokens', () => {
-    const cache = getMemoCache();
-    const tokens = applyTokenLayers(tokens1, stateOrder, cache, () => false)[0];
-    expect(tokens).toBe(tokens1);
-  });
-  test('apply hover works', () => {
-    const cache = getMemoCache();
-    const lookup = (layer) => layer === 'hover';
-    const result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
-    expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
-    expect(stripLayers(result1)).toEqual({ a: 'a-hover', b: 'b-hover', c: 'c' });
-  });
-  test('apply hover and press layer correctly', () => {
-    const cache = getMemoCache();
-    const lookup = (layer) => layer === 'hover' || layer === 'press';
-    const result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
-    expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
-    expect(stripLayers(result1)).toEqual({ a: 'a-hover-press', b: 'b-press', c: 'c' });
-  });
+    test('no layers returns tokens', () => {
+        const cache = getMemoCache();
+        const tokens = applyTokenLayers(tokens1, stateOrder, cache, () => false)[0];
+        expect(tokens).toBe(tokens1);
+    });
+    test('apply hover works', () => {
+        const cache = getMemoCache();
+        const lookup = (layer) => layer === 'hover';
+        const result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
+        expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+        expect(stripLayers(result1)).toEqual({ a: 'a-hover', b: 'b-hover', c: 'c' });
+    });
+    test('apply hover and press layer correctly', () => {
+        const cache = getMemoCache();
+        const lookup = (layer) => layer === 'hover' || layer === 'press';
+        const result1 = applyTokenLayers(tokens1, stateOrder, cache, lookup)[0];
+        expect(applyTokenLayers(tokens1, stateOrder, cache, lookup)[0]).toBe(result1);
+        expect(stripLayers(result1)).toEqual({ a: 'a-hover-press', b: 'b-press', c: 'c' });
+    });
 });
-//# sourceMappingURL=applyTokenLayers.test.js.map
+//# sourceMappingURL=applyTokenLayers.test.js.map

package/lib/buildUseTokens.d.ts

@@ -19,7 +19,7 @@ export type UseTokensCore<TTokens, TTheme> = (theme: TTheme) => [TTokens, GetTyp
  * that captures both the previous values, and layers in the new values specified
  */
 export type UseTokens<TTokens, TTheme> = UseTokensCore<TTokens, TTheme> & {
-  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => UseTokens<TTokens, TTheme>;
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => UseTokens<TTokens, TTheme>;
 };
 /**
  * Helper function that knows how to try to look up token information from the theme
@@ -31,8 +31,5 @@ export type GetComponentInfo<TTokens, TTheme> = (theme: TTheme, name: string) =>
  * @param options - options which drive behavior for the generated styling hook
  * @param themeHelper - injected theme functionality
  */
-export declare function buildUseTokens<TTokens, TTheme>(
-  getComponentInfo: GetComponentInfo<TTokens, TTheme> | undefined,
-  ...tokens: TokenSettings<TTokens, TTheme>[]
-): UseTokens<TTokens, TTheme>;
-//# sourceMappingURL=buildUseTokens.d.ts.map
+export declare function buildUseTokens<TTokens, TTheme>(getComponentInfo: GetComponentInfo<TTokens, TTheme> | undefined, ...tokens: TokenSettings<TTokens, TTheme>[]): UseTokens<TTokens, TTheme>;
+//# sourceMappingURL=buildUseTokens.d.ts.map

package/lib/buildUseTokens.js

@@ -14,13 +14,13 @@ import { getMemoCache } from '@fluentui-react-native/framework-base';
  * @param getComponentInfo - helper to use to lookup the component in the theme
  */
 function mapToTokens(tokenEntry, theme, getComponentInfo) {
-  if (typeof tokenEntry === 'string') {
-    tokenEntry = (getComponentInfo && getComponentInfo(theme, tokenEntry)) || {};
-  }
-  if (typeof tokenEntry === 'function') {
-    tokenEntry = tokenEntry(theme);
-  }
-  return tokenEntry;
+    if (typeof tokenEntry === 'string') {
+        tokenEntry = (getComponentInfo && getComponentInfo(theme, tokenEntry)) || {};
+    }
+    if (typeof tokenEntry === 'function') {
+        tokenEntry = tokenEntry(theme);
+    }
+    return tokenEntry;
 }
 /**
  * Construct a useStyling hook which returns styled slot props based on props and tokens defined in options and in the theme
@@ -29,19 +29,19 @@ function mapToTokens(tokenEntry, theme, getComponentInfo) {
  * @param themeHelper - injected theme functionality
  */
 export function buildUseTokens(getComponentInfo, ...tokens) {
-  // create a cache instance for use in this particular call to buildUseTokens
-  const cache = getMemoCache();
-  // the core function simply merges layers together, looking up component definitions in the theme as well as executing any
-  // theme functions. This turns the tokens into an array of token objects that then get merged together
-  const useTokensCore = (theme) => {
-    // get the base styles all merged together, these will only depend on internal tokens and theme
-    return cache(() => immutableMerge(...tokens.map((value) => mapToTokens(value, theme, getComponentInfo))), [theme]);
-  };
-  // attach a customize function to generate a new use
-  useTokensCore.customize = (...newTokens) => {
-    const mergedTokens = [...tokens, ...newTokens];
-    return buildUseTokens(getComponentInfo, ...mergedTokens);
-  };
-  return useTokensCore;
+    // create a cache instance for use in this particular call to buildUseTokens
+    const cache = getMemoCache();
+    // the core function simply merges layers together, looking up component definitions in the theme as well as executing any
+    // theme functions. This turns the tokens into an array of token objects that then get merged together
+    const useTokensCore = (theme) => {
+        // get the base styles all merged together, these will only depend on internal tokens and theme
+        return cache(() => immutableMerge(...tokens.map((value) => mapToTokens(value, theme, getComponentInfo))), [theme]);
+    };
+    // attach a customize function to generate a new use
+    useTokensCore.customize = (...newTokens) => {
+        const mergedTokens = [...tokens, ...newTokens];
+        return buildUseTokens(getComponentInfo, ...mergedTokens);
+    };
+    return useTokensCore;
 }
-//# sourceMappingURL=buildUseTokens.js.map
+//# sourceMappingURL=buildUseTokens.js.map

package/lib/buildUseTokens.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=buildUseTokens.test.d.ts.map
+//# sourceMappingURL=buildUseTokens.test.d.ts.map

package/lib/buildUseTokens.test.js

@@ -1,85 +1,85 @@
 import { buildUseTokens } from './buildUseTokens';
 const baseTokens = {
-  a: 'a-base',
-  b: 'b-base',
-  c: 'c-base',
-  hover: {
-    c: 'c-base-hover',
-  },
-  press: {
-    c: 'c-base-press',
-  },
+    a: 'a-base',
+    b: 'b-base',
+    c: 'c-base',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
 };
 const defaultTheme = {
-  vals: {
-    foo: 'foo',
-    bar: 'bar',
-  },
-  components: {
-    uno: {
-      a: 'uno-a',
-      c: 'uno-c',
+    vals: {
+        foo: 'foo',
+        bar: 'bar',
     },
-    dos: {
-      b: 'dos-b',
-      c: 'dos-c',
+    components: {
+        uno: {
+            a: 'uno-a',
+            c: 'uno-c',
+        },
+        dos: {
+            b: 'dos-b',
+            c: 'dos-c',
+        },
     },
-  },
 };
 const variantTheme = {
-  vals: {
-    foo: 'variant',
-  },
-  components: {},
+    vals: {
+        foo: 'variant',
+    },
+    components: {},
 };
 const getComponentInfo = (theme, name) => theme.components[name];
 const componentTokens = [baseTokens, 'uno', (theme) => ({ b: theme.vals.foo })];
 const resolvedTokens = {
-  a: 'uno-a',
-  b: 'foo',
-  c: 'uno-c',
-  hover: {
-    c: 'c-base-hover',
-  },
-  press: {
-    c: 'c-base-press',
-  },
+    a: 'uno-a',
+    b: 'foo',
+    c: 'uno-c',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
 };
 const variantTokens = {
-  a: 'a-base',
-  b: 'variant',
-  c: 'c-base',
-  hover: {
-    c: 'c-base-hover',
-  },
-  press: {
-    c: 'c-base-press',
-  },
+    a: 'a-base',
+    b: 'variant',
+    c: 'c-base',
+    hover: {
+        c: 'c-base-hover',
+    },
+    press: {
+        c: 'c-base-press',
+    },
 };
 describe('buildUseTokens test suite', () => {
-  test('basic built hook', () => {
-    const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
-    const [tokens] = useTokens(defaultTheme);
-    expect(tokens).toEqual(resolvedTokens);
-  });
-  test('multiple calls return same object', () => {
-    const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
-    const [tokens1] = useTokens(defaultTheme);
-    const [tokens2] = useTokens(defaultTheme);
-    expect(tokens1).toBe(tokens2);
-  });
-  test('variant theme is separate', () => {
-    const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
-    const [tokensDefault] = useTokens(defaultTheme);
-    const [tokensVariant] = useTokens(variantTheme);
-    expect(tokensVariant).not.toBe(tokensDefault);
-    expect(tokensVariant).toEqual(variantTokens);
-  });
-  test('simple customization layers on top', () => {
-    const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
-    const useTokensCustom = useTokens.customize({ a: 'custom' });
-    const [tokens] = useTokensCustom(defaultTheme);
-    expect(tokens).toEqual({ ...resolvedTokens, a: 'custom' });
-  });
+    test('basic built hook', () => {
+        const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
+        const [tokens] = useTokens(defaultTheme);
+        expect(tokens).toEqual(resolvedTokens);
+    });
+    test('multiple calls return same object', () => {
+        const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
+        const [tokens1] = useTokens(defaultTheme);
+        const [tokens2] = useTokens(defaultTheme);
+        expect(tokens1).toBe(tokens2);
+    });
+    test('variant theme is separate', () => {
+        const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
+        const [tokensDefault] = useTokens(defaultTheme);
+        const [tokensVariant] = useTokens(variantTheme);
+        expect(tokensVariant).not.toBe(tokensDefault);
+        expect(tokensVariant).toEqual(variantTokens);
+    });
+    test('simple customization layers on top', () => {
+        const useTokens = buildUseTokens(getComponentInfo, ...componentTokens);
+        const useTokensCustom = useTokens.customize({ a: 'custom' });
+        const [tokens] = useTokensCustom(defaultTheme);
+        expect(tokens).toEqual({ ...resolvedTokens, a: 'custom' });
+    });
 });
-//# sourceMappingURL=buildUseTokens.test.js.map
+//# sourceMappingURL=buildUseTokens.test.js.map

package/lib/customizable.d.ts

@@ -10,7 +10,7 @@ export type InjectableComponent<TProps, TTokens, TTheme> = (props: TProps, useTo
  * A component with an attached customize function, used to create alternatively styled versions of the component
  */
 export type CustomizableComponent<TProps, TTokens, TTheme> = React.FunctionComponent<TProps> & {
-  customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => CustomizableComponent<TProps, TTokens, TTheme>;
+    customize: (...tokens: TokenSettings<TTokens, TTheme>[]) => CustomizableComponent<TProps, TTokens, TTheme>;
 };
 /**
  * Function helper for easily creating a customizable component based on the useTokens hook
@@ -21,8 +21,5 @@ export type CustomizableComponent<TProps, TTokens, TTheme> = React.FunctionCompo
  * @returns - a function component that has a static function called customize attached. Customize will return a
  *            new component (which can also be customized)
  */
-export declare function customizable<TProps, TTokens, TTheme>(
-  injectable: InjectableComponent<TProps, TTokens, TTheme>,
-  useTokens: UseTokens<TTokens, TTheme>,
-): CustomizableComponent<TProps, TTokens, TTheme>;
-//# sourceMappingURL=customizable.d.ts.map
+export declare function customizable<TProps, TTokens, TTheme>(injectable: InjectableComponent<TProps, TTokens, TTheme>, useTokens: UseTokens<TTokens, TTheme>): CustomizableComponent<TProps, TTokens, TTheme>;
+//# sourceMappingURL=customizable.d.ts.map

package/lib/customizable.js

@@ -8,11 +8,11 @@
  *            new component (which can also be customized)
  */
 export function customizable(injectable, useTokens) {
-  const component = (props) => injectable(props, useTokens);
-  component.customize = (...tokens) => {
-    const useTokensNew = useTokens.customize(...tokens);
-    return customizable(injectable, useTokensNew);
-  };
-  return component;
+    const component = (props) => injectable(props, useTokens);
+    component.customize = (...tokens) => {
+        const useTokensNew = useTokens.customize(...tokens);
+        return customizable(injectable, useTokensNew);
+    };
+    return component;
 }
-//# sourceMappingURL=customizable.js.map
+//# sourceMappingURL=customizable.js.map

package/lib/index.d.ts

@@ -6,4 +6,4 @@ export type { GetComponentInfo, TokenSettings, TokensFromTheme, UseTokens, UseTo
 export { customizable } from './customizable';
 export type { CustomizableComponent, InjectableComponent } from './customizable';
 export { patchTokens } from './patchTokens';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -3,4 +3,4 @@ export { applyTokenLayers } from './applyTokenLayers';
 export { buildUseTokens } from './buildUseTokens';
 export { customizable } from './customizable';
 export { patchTokens } from './patchTokens';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib/patchTokens.d.ts

@@ -8,9 +8,5 @@ import type { GetTypedMemoValue } from '@fluentui-react-native/framework-base';
  * @param patchValues - new values to apply, values will be obtained via keys in the object
  * @returns - a tuple consisting of a new tokens object and a new memo-cache
  */
-export declare function patchTokens<TTokens>(
-  tokens: TTokens,
-  cache: GetTypedMemoValue<TTokens>,
-  patchValues: TTokens,
-): [TTokens, GetTypedMemoValue<TTokens>];
-//# sourceMappingURL=patchTokens.d.ts.map
+export declare function patchTokens<TTokens>(tokens: TTokens, cache: GetTypedMemoValue<TTokens>, patchValues: TTokens): [TTokens, GetTypedMemoValue<TTokens>];
+//# sourceMappingURL=patchTokens.d.ts.map

package/lib/patchTokens.js

@@ -8,16 +8,16 @@
  * @returns - a tuple consisting of a new tokens object and a new memo-cache
  */
 export function patchTokens(tokens, cache, patchValues) {
-  // reduce the patch values to the set of keys that are defined, and sort them to ensure consistent ordering
-  const keys = Object.keys(patchValues)
-    .filter((v) => patchValues[v] !== undefined)
-    .sort();
-  // for each key get an updated tokens collection based on key + value. Value alone isn't sufficient as the values
-  // are not necessarily unique. i.e. { a: 'blue' } and { b: 'blue' } would cache to the same without the key
-  for (const key of keys) {
-    [tokens, cache] = cache(() => ({ ...tokens, [key]: patchValues[key] }), [key, patchValues[key]]);
-  }
-  // return the updated tokens and cache (if there were any keys applied)
-  return [tokens, cache];
+    // reduce the patch values to the set of keys that are defined, and sort them to ensure consistent ordering
+    const keys = Object.keys(patchValues)
+        .filter((v) => patchValues[v] !== undefined)
+        .sort();
+    // for each key get an updated tokens collection based on key + value. Value alone isn't sufficient as the values
+    // are not necessarily unique. i.e. { a: 'blue' } and { b: 'blue' } would cache to the same without the key
+    for (const key of keys) {
+        [tokens, cache] = cache(() => ({ ...tokens, [key]: patchValues[key] }), [key, patchValues[key]]);
+    }
+    // return the updated tokens and cache (if there were any keys applied)
+    return [tokens, cache];
 }
-//# sourceMappingURL=patchTokens.js.map
+//# sourceMappingURL=patchTokens.js.map

package/lib/patchTokens.test.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=patchTokens.test.d.ts.map
+//# sourceMappingURL=patchTokens.test.d.ts.map