From 0a84129f133bc549df31ad4be17a2fe6a9bceed4 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 4 May 2026 18:56:27 -1000
Subject: [PATCH] fix: Backward compatibility with lightningcss color-scheme
 vars (#10010)

* fix: Backward compatibility with lightningcss color-scheme vars

* turn on verdaccio

* Revert "turn on verdaccio"

This reverts commit 22b08c834348a0fc36e3170940cc2b5b1f482434.
---
 packages/@react-spectrum/s2/src/page.macro.ts | 26 ++++++++++++++++
 .../@react-spectrum/s2/src/style-utils.ts     | 31 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/page.macro.ts b/packages/@react-spectrum/s2/src/page.macro.ts
index 8b62934501d..6b30414dadf 100644
--- a/packages/@react-spectrum/s2/src/page.macro.ts
+++ b/packages/@react-spectrum/s2/src/page.macro.ts
@@ -33,6 +33,17 @@ export function generatePageStyles(this: MacroContext | void): void {
         --s2-scale: 1;
         --s2-font-size-base: 14;
 
+        /* 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: initial;
+        --lightningcss-dark: ;
+
+        @media (prefers-color-scheme: dark) {
+          --lightningcss-light: ;
+          --lightningcss-dark: initial;
+        }
+
         @media not ((hover: hover) and (pointer: fine)) {
           --s2-scale: 1.25;
           --s2-font-size-base: 17;
@@ -40,10 +51,14 @@ export function generatePageStyles(this: MacroContext | void): void {
 
         &[data-color-scheme=light] {
           --s2-color-scheme: light;
+          --lightningcss-light: initial;
+          --lightningcss-dark: ;
         }
 
         &[data-color-scheme=dark] {
           --s2-color-scheme: dark;
+          --lightningcss-light: ;
+          --lightningcss-dark: initial;
         }
 
         &[data-background=layer-1] {
@@ -74,6 +89,17 @@ export function generateDefaultColorSchemeStyles(this: MacroContext | void): voi
           --s2-scale: 1;
           --s2-font-size-base: 14;
 
+          /* 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: initial;
+          --lightningcss-dark: ;
+
+          @media (prefers-color-scheme: dark) {
+            --lightningcss-light: ;
+            --lightningcss-dark: initial;
+          }
+
           @media not ((hover: hover) and (pointer: fine)) {
             --s2-scale: 1.25;
             --s2-font-size-base: 17;
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index a9c8f3812ea..81003298e32 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -162,7 +162,36 @@ export const setColorScheme = () => ({
       }
     }
   },
-  colorScheme: '--s2-color-scheme'
+  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'
+      }
+    }
+  }
 } as const);
 
 export function staticColor(): Record<string, any> {