fix: ensure that S2 style macro produces different class names for di…

…fferent S2 themes

packages/@react-spectrum/s2/style/__tests__/style-macro.test.js

@@ -26,6 +26,30 @@ function testStyle(...args) {
 }
 
 describe('style-macro', () => {
+  it('should prefix rules with the hash of theme version', () => {
+    let {css, js} = testStyle({
+      alignItems: 'center',
+      color: 'red-400'
+    });
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a, _.b;
+
+      @layer _.a {
+        .chc_2c {
+          align-items: center;
+        }
+
+
+        .chcaJ {
+          color: light-dark(rgb(255, 188, 180), rgb(115, 24, 11));
+        }
+      }
+
+      "
+    `);
+    expect(js).toMatchInlineSnapshot('" chc_2c chcaJ"');
+  });
+
   it('should handle nested css conditions', () => {
     let {css, js} = testStyle({
       marginTop: {

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -14,6 +14,7 @@ import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueMap} from './types
 import {autoStaticColor, colorScale, colorToken, fontSizeToken, generateOverlayColorScale, getToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'};
 import {Color, createArbitraryProperty, createColorProperty, createMappedProperty, createRenamedProperty, createSizingProperty, createTheme, parseArbitraryValue} from './style-macro';
 import type * as CSS from 'csstype';
+import {getThemeVersion} from './version';
 
 interface MacroContext {
   addAsset(asset: {type: string, content: string}): void
@@ -453,6 +454,7 @@ const fontSize = {
 } as const;
 
 export const style = createTheme({
+  version: getThemeVersion(),
   properties: {
     // colors
     color: createColorProperty({

packages/@react-spectrum/s2/style/style-macro.ts

@@ -114,11 +114,11 @@ function mapConditionalShorthand<T, C extends string, R extends RenderProps<stri
   }
 }
 
-function createValueLookup(values: Array<CSSValue>, atStart = false) {
+function createValueLookup(values: Array<CSSValue>, atStart = false, prefix = '') {
   let map = new Map<CSSValue, string>();
   for (let value of values) {
     if (!map.has(value)) {
-      map.set(value, generateName(map.size, atStart));
+      map.set(value, prefix + generateName(map.size, atStart));
     }
   }
   return map;
@@ -138,8 +138,9 @@ interface MacroContext {
 }
 
 export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemeProperties<T>, 'default' | Extract<keyof T['conditions'], string>> {
-  let themePropertyMap = createValueLookup(Object.keys(theme.properties), true);
-  let themeConditionMap = createValueLookup(Object.keys(theme.conditions), true);
+  let themePropertyMap = createValueLookup(Object.keys(theme.properties), true, theme.version);
+  let themeConditionMap = createValueLookup(Object.keys(theme.conditions), true, theme.version);
+
   let propertyFunctions = new Map(Object.entries(theme.properties).map(([k, v]) => {
     if (typeof v === 'function') {
       return [k, v];
@@ -425,6 +426,14 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     // 1. Property. For custom properties we use a hash. For theme properties, we use the index within the theme.
     // 2. Conditions. This uses the index within the theme.
     // 3. Value. The index in the theme, or a hash for arbitrary values.
+    // let propertyPrefix = property.startsWith('--') ? generateName(themePropertyMap.get(themeProperty)!.length, true) : themePropertyMap.get(themeProperty)!;
+    // let conditionsString = Array.from(conditions).sort().join(',');
+    // let valueString = typeof value === 'string' ? value : JSON.stringify(value);
+    // let hashInput = `${conditionsString}-${valueString}`;
+    // let hashValue = hash(hashInput).toString(36);
+    // let className = `${propertyPrefix}-${hashValue}`;
+    // let prelude = `.${className}`;
+
     let prelude = '.';
     if (property.startsWith('--')) {
       // Include both custom property name and theme property in case the same var is reused between multiple theme properties.

packages/@react-spectrum/s2/style/types.ts

@@ -30,6 +30,7 @@ export type PropertyFunction<T> = (value: T, property: string) => PropertyValueD
 export type ShorthandProperty<T> = (value: T) => {[name: string]: Value};
 
 export interface Theme {
+  version?: string,
   properties: {
     [name: string]: PropertyValueMap | PropertyFunction<any> | string[]
   },
@@ -53,7 +54,7 @@ type PropertyValue<T> =
 export type ArbitraryValue = CustomProperty | `[${string}]`;
 type PropertyValue2<T> = PropertyValue<T> | ArbitraryValue;
 type Merge<T> = T extends any ? T : never;
-type ShorthandValue<T extends Theme, P> = 
+type ShorthandValue<T extends Theme, P> =
   P extends string[]
     ? PropertyValue2<T['properties'][P[0]]>
     : P extends ShorthandProperty<infer V>

packages/@react-spectrum/s2/style/version.ts

@@ -0,0 +1,32 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export function getThemeVersion() {
+  let s2PkgPath = require.resolve('@react-spectrum/s2');
+  while (s2PkgPath.length > 2) {
+    const filePath = path.join(s2PkgPath, 'package.json');
+    try {
+      const stats = fs.statSync(filePath, {throwIfNoEntry: false});
+      if (stats?.isFile()) {
+        break;
+      }
+    } catch { /* empty */ }
+    s2PkgPath = path.dirname(s2PkgPath);
+  }
+  const s2PkgMetadata = require(path.join(s2PkgPath, 'package.json'));
+  return hashSemVer(s2PkgMetadata.version);
+}
+
+function hashSemVer(version: string) {
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+  const base = alphabet.length;
+  const [major, minor, patch] = version.split('.').map(Number);
+  const combined = (major << 16) | (minor << 8) | patch;
+  let hashStr = '';
+  let num = combined;
+  while (num > 0) {
+    hashStr = alphabet[num % base] + hashStr;
+    num = Math.floor(num / base);
+  }
+  return hashStr;
+}