@react-spectrum/s2 1.3.0 → 1.4.0

package/src/style-utils.ts

@@ -15,22 +15,21 @@ import {fontRelative as internalFontRelative} from '../style/spectrum-theme';
 import {StyleString} from '../style/types';
 
 /**
- * Calculates vertical padding to center a single line of text within a container.
- * Uses the CSS `self()` function and `1lh` unit to compute the padding based on
- * the container's minimum height and border widths.
- * This is useful for precise vertical centering without introducing a flex/grid layout to the container.
- *
- * @param minHeight - A CSS expression for the minimum height to center within. Defaults to `'self(minHeight)'`.
- * @returns A CSS `calc()` expression wrapped as an arbitrary style value.
+ * Calculates vertical padding to center a single line of text within a container. Uses the CSS
+ * `self()` function and `1lh` unit to compute the padding based on the container's minimum height
+ * and border widths. This is useful for precise vertical centering without introducing a flex/grid
+ * layout to the container.
  *
  * @example
- * ```tsx
- * import {centerPadding, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {centerPadding, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *
+ *   const styles = style({
+ *     paddingY: centerPadding()
+ *   });
  *
- * const styles = style({
- *   paddingY: centerPadding()
- * });
- * ```
+ * @param minHeight - A CSS expression for the minimum height to center within. Defaults to
+ *   `'self(minHeight)'`.
+ * @returns A CSS `calc()` expression wrapped as an arbitrary style value.
  */
 export function centerPadding(minHeight: string = 'self(minHeight)'): `[${string}]` {
   return `[calc((${minHeight} - self(borderTopWidth, 0px) - self(borderBottomWidth, 0px) - 1lh) / 2)]`;
@@ -40,130 +39,155 @@ function fontRelative(base: number, baseFontSize = 14): `[${string}]` {
   return `[${internalFontRelative(base, baseFontSize)}]`;
 }
 
-export const field = () => ({
-  display: 'grid',
-  gridColumnStart: {
-    isInForm: 1
-  },
-  gridColumnEnd: {
-    isInForm: {
-      labelPosition: {
-        side: 'span 2'
+export const field = () =>
+  ({
+    display: 'grid',
+    gridColumnStart: {
+      isInForm: 1
+    },
+    gridColumnEnd: {
+      isInForm: {
+        labelPosition: {
+          side: 'span 2'
+        }
       }
-    }
-  },
-  gridTemplateColumns: {
-    default: {
+    },
+    gridTemplateColumns: {
+      default: {
+        labelPosition: {
+          top: ['1fr'],
+          side: ['auto', '1fr']
+        }
+      },
+      isInForm: 'subgrid'
+    },
+    gridTemplateRows: {
       labelPosition: {
-        top: ['1fr'],
+        top: ['auto', '1fr', 'auto'],
         side: ['auto', '1fr']
       }
     },
-    isInForm: 'subgrid'
-  },
-  gridTemplateRows: {
-    labelPosition: {
-      top: ['auto', '1fr', 'auto'],
-      side: ['auto', '1fr']
-    }
-  },
-  gridTemplateAreas: {
-    labelPosition: {
-      top: [
-        'label',
-        'input',
-        'helptext'
-      ],
-      side: [
-        'label input',
-        'label helptext'
-      ]
-    }
-  },
-  fontSize: controlFont(),
-  alignItems: 'baseline',
-  lineHeight: 'ui',
-  '--field-height': {
-    type: 'height',
-    value: controlSize()
-  },
-  // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.
-  // Calculate what the gap should be based on the height and line height.
-  // Use a variable here rather than rowGap since it is applied to the children as padding.
-  // This allows the gap to collapse when the label/help text is not present.
-  // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813
-  '--field-gap': {
-    type: 'rowGap',
-    value: centerPadding('var(--field-height)')
-  },
-  columnGap: 12,
-  disableTapHighlight: true
-} as const);
+    gridTemplateAreas: {
+      labelPosition: {
+        top: ['label', 'input', 'helptext'],
+        side: ['label input', 'label helptext']
+      }
+    },
+    fontSize: controlFont(),
+    alignItems: 'baseline',
+    lineHeight: 'ui',
+    '--field-height': {
+      type: 'height',
+      value: controlSize()
+    },
+    // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.
+    // Calculate what the gap should be based on the height and line height.
+    // Use a variable here rather than rowGap since it is applied to the children as padding.
+    // This allows the gap to collapse when the label/help text is not present.
+    // Eventually this may be possible to do in pure CSS: https://github.com/w3c/csswg-drafts/issues/5813
+    '--field-gap': {
+      type: 'rowGap',
+      value: centerPadding('var(--field-height)')
+    },
+    columnGap: 12,
+    disableTapHighlight: true
+  }) as const;
 
-export const fieldLabel = () => ({
-  font: controlFont(),
-  cursor: 'default',
-  color: {
-    default: 'neutral-subdued',
-    isDisabled: 'disabled',
-    isStaticColor: 'transparent-overlay-1000',
-    forcedColors: 'ButtonText'
-  }
-} as const);
+export const fieldLabel = () =>
+  ({
+    font: controlFont(),
+    cursor: 'default',
+    color: {
+      default: 'neutral-subdued',
+      isDisabled: 'disabled',
+      isStaticColor: 'transparent-overlay-1000',
+      forcedColors: 'ButtonText'
+    }
+  }) as const;
 
-export const fieldInput = () => ({
-  gridArea: 'input',
-  minWidth: controlSize(),
-  contain: {
-    // Only apply size containment if contain-intrinsic-width is supported.
-    // In older browsers, this will fall back to the default browser intrinsic width.
-    '@supports (contain-intrinsic-width: 1px)': 'inline-size',
-    isQuiet: 'none'
-  },
-  '--defaultWidth': {
-    type: 'width',
-    value: {
-      default: 208,
-      size: {
-        S: 192,
-        L: 224,
-        XL: 240
+export const fieldInput = () =>
+  ({
+    gridArea: 'input',
+    minWidth: controlSize(),
+    contain: {
+      // Only apply size containment if contain-intrinsic-width is supported.
+      // In older browsers, this will fall back to the default browser intrinsic width.
+      '@supports (contain-intrinsic-width: 1px)': 'inline-size',
+      isQuiet: 'none'
+    },
+    '--defaultWidth': {
+      type: 'width',
+      value: {
+        default: 208,
+        size: {
+          S: 192,
+          L: 224,
+          XL: 240
+        }
       }
-    }
-  },
-  // contain-intrinsic-width only includes the width of children, not the padding or borders.
-  containIntrinsicWidth: 'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'
-} as const);
+    },
+    // contain-intrinsic-width only includes the width of children, not the padding or borders.
+    containIntrinsicWidth:
+      'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'
+  }) as const;
 
 /**
- * Returns style properties that set the CSS `color-scheme` for a component.
- * Defaults to the page's color scheme and supports `'light'`, `'dark'`, and `'light dark'` values
- * via the `colorScheme` render prop condition.
- * Intended for root containers (e.g. providers, modals, and popovers), and not needed for individual components.
+ * Returns style properties that set the CSS `color-scheme` for a component. Defaults to the page's
+ * color scheme and supports `'light'`, `'dark'`, and `'light dark'` values via the `colorScheme`
+ * render prop condition. Intended for root containers (e.g. providers, modals, and popovers), and
+ * not needed for individual components.
  *
  * @example
- * ```tsx
- * import {setColorScheme, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import {setColorScheme, style} from '@react-spectrum/s2/style' with {type: 'macro'};
  *
- * const styles = style({
- *   ...setColorScheme(),
- *   backgroundColor: 'layer-1'
- * });
- * ```
+ *   const styles = style({
+ *     ...setColorScheme(),
+ *     backgroundColor: 'layer-1'
+ *   });
  */
-export const setColorScheme = () => ({
-  '--s2-color-scheme': {
-    type: 'colorScheme',
-    value: {
-      colorScheme: {
-        'light dark': 'light dark',
-        light: 'light',
-        dark: 'dark'
+export const setColorScheme = () =>
+  ({
+    '--s2-color-scheme': {
+      type: 'colorScheme',
+      value: {
+        colorScheme: {
+          'light dark': 'light dark',
+          light: 'light',
+          dark: 'dark'
+        }
+      }
+    },
+    colorScheme: '--s2-color-scheme',
+    // For backward compatibility in two cases:
+    // 1. When a component compiled with an earlier version of S2 is embedded in a newer provider.
+    // 2. When S2 CSS is compiled with lightningcss, setting color-scheme via a variable does not work.
+    '--lightningcss-light': {
+      type: 'transform', // arbitrary string
+      value: {
+        colorScheme: {
+          'light dark': {
+            default: 'initial',
+            '@media (prefers-color-scheme: dark)': ' '
+          },
+          light: 'initial',
+          dark: ' '
+        }
+      }
+    },
+    '--lightningcss-dark': {
+      type: 'transform', // arbitrary string
+      value: {
+        colorScheme: {
+          'light dark': {
+            default: ' ',
+            '@media (prefers-color-scheme: dark)': 'initial'
+          },
+          light: ' ',
+          dark: 'initial'
+        }
       }
     }
-  },
-  colorScheme: '--s2-color-scheme'
-} as const);
+  }) as const;
 
 export function staticColor(): Record<string, any> {
   return {
@@ -179,19 +203,19 @@ export function staticColor(): Record<string, any> {
   } as const;
 }
 
-export const controlFont = () => ({
-  default: 'ui',
-  size: {
-    XS: 'ui-xs',
-    S: 'ui-sm',
-    L: 'ui-lg',
-    XL: 'ui-xl'
-  }
-} as const);
+export const controlFont = () =>
+  ({
+    default: 'ui',
+    size: {
+      XS: 'ui-xs',
+      S: 'ui-sm',
+      L: 'ui-lg',
+      XL: 'ui-xl'
+    }
+  }) as const;
 
-export const controlSize = (size: 'sm' | 'md' = 'md'): typeof controlSizeM | typeof controlSizeS => (
-  size === 'sm' ? controlSizeS : controlSizeM
-);
+export const controlSize = (size: 'sm' | 'md' = 'md'): typeof controlSizeM | typeof controlSizeS =>
+  size === 'sm' ? controlSizeS : controlSizeM;
 
 const controlSizeM = {
   default: 32,
@@ -214,44 +238,45 @@ const controlSizeS = {
 
 // This generates the border radius for t-shirt sizes using the
 // Major Second logarithmic scale.
-export const controlBorderRadius = (size: 'default' | 'sm' = 'default') => ({
-  '--size': {
-    type: 'order',
-    value: {
-      default: 1,
-      size: {
-        XS: Math.pow(1.125, -2),
-        S: Math.pow(1.125, -1),
-        L: Math.pow(1.125, 1),
-        XL: Math.pow(1.125, 2)
+export const controlBorderRadius = (size: 'default' | 'sm' = 'default') =>
+  ({
+    '--size': {
+      type: 'order',
+      value: {
+        default: 1,
+        size: {
+          XS: Math.pow(1.125, -2),
+          S: Math.pow(1.125, -1),
+          L: Math.pow(1.125, 1),
+          XL: Math.pow(1.125, 2)
+        }
       }
-    }
-  },
-  '--radius': {
-    type: 'borderTopStartRadius',
-    value: size
-  },
-  borderRadius: 'round(var(--radius) * var(--size), 1px)'
-} as const);
+    },
+    '--radius': {
+      type: 'borderTopStartRadius',
+      value: size
+    },
+    borderRadius: 'round(var(--radius) * var(--size), 1px)'
+  }) as const;
 
 interface ControlOptions {
-  shape?: 'default' | 'pill',
-  wrap?: boolean,
-  icon?: boolean
+  shape?: 'default' | 'pill';
+  wrap?: boolean;
+  icon?: boolean;
 }
 
 interface ControlResult {
-  font: ReturnType<typeof controlFont>,
-  boxSizing?: 'border-box',
-  borderRadius?: 'pill' | `[${string}]`,
-  minWidth?: ReturnType<typeof controlSize>,
-  minHeight?: ReturnType<typeof controlSize>,
-  height?: ReturnType<typeof controlSize>,
-  display?: 'flex',
-  alignItems?: 'center' | {default: 'baseline', [iconOnly]: 'center'},
-  columnGap?: 'text-to-visual',
-  paddingX?: 'pill' | 'edge-to-text' | {default: 'pill' | 'edge-to-text', [iconOnly]: 0},
-  paddingY?: 0 | `[${string}]`
+  font: ReturnType<typeof controlFont>;
+  boxSizing?: 'border-box';
+  borderRadius?: 'pill' | `[${string}]`;
+  minWidth?: ReturnType<typeof controlSize>;
+  minHeight?: ReturnType<typeof controlSize>;
+  height?: ReturnType<typeof controlSize>;
+  display?: 'flex';
+  alignItems?: 'center' | {default: 'baseline'; [iconOnly]: 'center'};
+  columnGap?: 'text-to-visual';
+  paddingX?: 'pill' | 'edge-to-text' | {default: 'pill' | 'edge-to-text'; [iconOnly]: 0};
+  paddingY?: 0 | `[${string}]`;
 }
 
 const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
@@ -261,7 +286,7 @@ const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
  * The text can optionally wrap, aligning the icon with the first line of text.
  */
 export function control(options: ControlOptions): ControlResult {
-  let paddingX = options.shape === 'pill' ? 'pill' as const : 'edge-to-text' as const;
+  let paddingX = options.shape === 'pill' ? ('pill' as const) : ('edge-to-text' as const);
   let result: ControlResult = {
     font: controlFont(),
     display: 'flex',
@@ -346,35 +371,41 @@ const allowedOverrides = [
   'visibility'
 ] as const;
 
-export const widthProperties = [
-  'width',
-  'minWidth',
-  'maxWidth'
-] as const;
+export const widthProperties = ['width', 'minWidth', 'maxWidth'] as const;
 
-export const heightProperties = [
-  'size',
-  'height',
-  'minHeight',
-  'maxHeight'
-] as const;
+export const heightProperties = ['size', 'height', 'minHeight', 'maxHeight'] as const;
 
-export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
-export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
+export type StylesProp = StyleString<
+  (typeof allowedOverrides)[number] | (typeof widthProperties)[number]
+>;
+export type StylesPropWithHeight = StyleString<
+  | (typeof allowedOverrides)[number]
+  | (typeof widthProperties)[number]
+  | (typeof heightProperties)[number]
+>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
 export type UnsafeClassName = string & {properties?: never};
 export interface UnsafeStyles {
-  /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
-  UNSAFE_className?: UnsafeClassName,
-  /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
-  UNSAFE_style?: CSSProperties
+  /**
+   * Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)
+   * for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop
+   * instead.
+   */
+  UNSAFE_className?: UnsafeClassName;
+  /**
+   * Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
+   * element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead.
+   */
+  UNSAFE_style?: CSSProperties;
 }
 
 export interface StyleProps extends UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesProp
+  styles?: StylesProp;
 }
 
 export function getAllowedOverrides({width = true, height = false} = {}): string[] {
-  return (allowedOverrides as unknown as string[]).concat(width ? widthProperties : []).concat(height ? heightProperties : []);
+  return (allowedOverrides as unknown as string[])
+    .concat(width ? widthProperties : [])
+    .concat(height ? heightProperties : []);
 }

package/src/useDOMRef.ts

@@ -10,10 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMRef, DOMRefValue, FocusableElement, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
+import {DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, RefObject} from '@react-types/shared';
 import {useImperativeHandle, useMemo, useRef} from 'react';
 
-export function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>): DOMRefValue<T> {
+export function createDOMRef<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T | null>
+): DOMRefValue<T> {
   return {
     UNSAFE_getDOMNode() {
       return ref.current;
@@ -21,30 +23,41 @@ export function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject
   };
 }
 
-export function createFocusableRef<T extends HTMLElement = HTMLElement>(domRef: RefObject<T | null>, focusableRef: RefObject<FocusableElement | null> = domRef): FocusableRefValue<T> {
+export function createFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(
+  domRef: RefObject<D | null>,
+  focusableRef?: RefObject<T | null>
+): FocusableRefValue<T, D> {
+  let resolvedFocusableRef = focusableRef || domRef;
   return {
     ...createDOMRef(domRef),
     focus() {
-      if (focusableRef.current) {
-        focusableRef.current.focus();
+      if (resolvedFocusableRef.current) {
+        resolvedFocusableRef.current.focus();
       }
     }
   };
 }
 
-export function useDOMRef<T extends HTMLElement = HTMLElement>(ref: DOMRef<T>): RefObject<T | null> {
+export function useDOMRef<T extends HTMLElement = HTMLElement>(
+  ref: DOMRef<T>
+): RefObject<T | null> {
   let domRef = useRef<T>(null);
   useImperativeHandle(ref, () => createDOMRef(domRef));
   return domRef;
 }
 
-export function useFocusableRef<T extends HTMLElement = HTMLElement>(ref: FocusableRef<T>, focusableRef?: RefObject<FocusableElement | null>): RefObject<T | null> {
-  let domRef = useRef<T>(null);
-  useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef));
+export function useFocusableRef<T extends HTMLElement = HTMLElement, D extends HTMLElement = T>(
+  ref: FocusableRef<T, D>,
+  focusableRef?: RefObject<T | null>
+): RefObject<D | null> {
+  let domRef = useRef<D>(null);
+  useImperativeHandle(ref, () => createFocusableRef<T, D>(domRef, focusableRef));
   return domRef;
 }
 
-export function unwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T> | null>): RefObject<T | null> {
+export function unwrapDOMRef<T extends HTMLElement>(
+  ref: RefObject<DOMRefValue<T> | null>
+): RefObject<T | null> {
   return {
     get current() {
       return ref.current && ref.current.UNSAFE_getDOMNode();
@@ -52,6 +65,8 @@ export function unwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T
   };
 }
 
-export function useUnwrapDOMRef<T extends HTMLElement>(ref: RefObject<DOMRefValue<T> | null>) : RefObject<T | null> {
+export function useUnwrapDOMRef<T extends HTMLElement>(
+  ref: RefObject<DOMRefValue<T> | null>
+): RefObject<T | null> {
   return useMemo(() => unwrapDOMRef(ref), [ref]);
 }

package/src/useDragAndDrop.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type {
+  DragAndDrop,
+  DragAndDropOptions as RACDragAndDropOptions
+} from 'react-aria-components/useDragAndDrop';
+import {useDragAndDrop as useRACDragAndDrop} from 'react-aria-components/useDragAndDrop';
+
+export type {DragAndDrop};
+
+export interface DragAndDropOptions<T = object> extends Omit<
+  RACDragAndDropOptions<T>,
+  'renderDropIndicator'
+> {}
+
+/**
+ * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible
+ * collection component.
+ */
+export function useDragAndDrop<T = object>(options: DragAndDropOptions<T>): DragAndDrop<T> {
+  return useRACDragAndDrop(options);
+}

package/src/useMediaQuery.ts

@@ -16,9 +16,7 @@ import {useIsSSR} from 'react-aria/SSRProvider';
 export function useMediaQuery(query: string): boolean {
   let supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
   let [matches, setMatches] = useState(() =>
-    supportsMatchMedia
-      ? window.matchMedia(query).matches
-      : false
+    supportsMatchMedia ? window.matchMedia(query).matches : false
   );
 
   useEffect(() => {
@@ -27,7 +25,7 @@ export function useMediaQuery(query: string): boolean {
     }
 
     let mq = window.matchMedia(query);
-    let onChange = (evt) => {
+    let onChange = evt => {
       setMatches(evt.matches);
     };
 

package/src/useSpectrumContextProps.ts

@@ -18,7 +18,11 @@ import {mergeStyles} from '../style/runtime';
 import {RefObject} from '@react-types/shared';
 import {useObjectRef} from 'react-aria/useObjectRef';
 
-export function useSpectrumContextProps<T, U extends SlotProps, E>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>] {
+export function useSpectrumContextProps<T, U extends SlotProps, E>(
+  props: T & SlotProps,
+  ref: ForwardedRef<E>,
+  context: Context<ContextValue<U, E>>
+): [T, RefObject<E | null>] {
   let ctx = useSlottedContext(context, props.slot) || {};
   let {ref: contextRef, ...contextProps} = ctx as any;
   let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));

package/style/__tests__/mergeStyles.test.ts

@@ -14,7 +14,9 @@ import {mergeStyles} from '../runtime';
 import {style} from '../spectrum-theme';
 
 function stripMacro(css) {
-  return css.replaceAll(/ -macro-static-[0-9a-zA-Z]+/gi, '').replaceAll(/ -macro-dynamic-[0-9a-zA-Z]+/gi, '');
+  return css
+    .replaceAll(/ -macro-static-[0-9a-zA-Z]+/gi, '')
+    .replaceAll(/ -macro-dynamic-[0-9a-zA-Z]+/gi, '');
 }
 
 describe('mergeStyles', () => {
@@ -46,8 +48,14 @@ describe('mergeStyles', () => {
     });
 
     it('should not merge multiple dynamic macro classes', () => {
-      let a = style({backgroundColor: 'red-1000', color: {default: '[hotpink]', isDisabled: 'gray-400'}});
-      let b = style({fontSize: '[15px]', backgroundColor: {default: 'gray-50', isDisabled: 'gray-400'}});
+      let a = style({
+        backgroundColor: 'red-1000',
+        color: {default: '[hotpink]', isDisabled: 'gray-400'}
+      });
+      let b = style({
+        fontSize: '[15px]',
+        backgroundColor: {default: 'gray-50', isDisabled: 'gray-400'}
+      });
       let merged = mergeStyles(a({isDisabled: true}), b({isDisabled: false}));
       let macroClasses = merged.match(/-macro-dynamic-[0-9a-zA-Z]+/g);
       expect(macroClasses).toHaveLength(2);
@@ -55,7 +63,10 @@ describe('mergeStyles', () => {
     });
 
     it('should retain both static and dynamic macro classes', () => {
-      let a = style({backgroundColor: 'red-1000', color: {default: '[hotpink]', isDisabled: 'gray-400'}});
+      let a = style({
+        backgroundColor: 'red-1000',
+        color: {default: '[hotpink]', isDisabled: 'gray-400'}
+      });
       let b = style({fontSize: 'body-xs', backgroundColor: 'gray-50'});
       let merged = mergeStyles(a({isDisabled: true}), b);
       let staticMacroClasses = merged.match(/-macro-static-[0-9a-zA-Z]+/g);