refactor: Generate stable style macro class names between versions (#8118)

* refactor: Generate stable style macro class names between versions

* fix chromatic issues

Author: devongovett

packages/@react-spectrum/s2/src/Card.tsx

@@ -139,7 +139,7 @@ let card = style({
       density: {
         compact: {
           size: {
-            XS: 6,
+            XS: space(6),
             S: 8,
             M: 12,
             L: 16,
@@ -647,7 +647,7 @@ export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMR
                 position: 'relative',
                 marginTop: {
                   default: 0,
-                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'
+                  ':is([slot=preview] + *)': '[calc(var(--size) / -2)]'
                 }
               }),
               isOverBackground: true
@@ -717,7 +717,7 @@ export const ProductCard = forwardRef(function ProductCard(props: ProductCardPro
                     objectFit: 'cover',
                     marginTop: {
                       default: 0,
-                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'
+                      ':is([slot=preview] + *)': '[calc(self(height) / -2)]'
                     },
                     outlineStyle: 'solid',
                     outlineWidth: {

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -17,7 +17,7 @@ import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import {focusRing, lightDark, style} from '../style' with { type: 'macro' };
+import {focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -307,9 +307,9 @@ const panelStyles = style({
     isExpanded: {
       size: {
         S: 8,
-        M: 9,
+        M: space(9),
         L: 12,
-        XL: 15
+        XL: space(15)
       }
     }
   }

packages/@react-spectrum/s2/src/TableView.tsx

@@ -564,10 +564,7 @@ const sortIcon = style({
     default: 8,
     isButton: 'text-to-visual'
   },
-  verticalAlign: {
-    default: 'bottom',
-    isButton: 0
-  },
+  verticalAlign: 'bottom',
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'

packages/@react-spectrum/s2/src/style-utils.ts

@@ -153,10 +153,8 @@ const allowedOverrides = [
   'alignSelf',
   'order',
   'gridArea',
-  'gridRow',
   'gridRowStart',
   'gridRowEnd',
-  'gridColumn',
   'gridColumnStart',
   'gridColumnEnd',
   'position',