From 5f14ff580127769b7d6c315eed4e0a090230418a Mon Sep 17 00:00:00 2001
From: Naman Goel <nmn@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:20:30 -0700
Subject: [PATCH] BREAKING CHANGE: Themes set *all* variables in a VarGroup.
 always. (#631)

* feat: add theme override behaviour configuration
* feat: missing vars in themes are set to their default values
* fix: resolve the correct __themeName__ for VarGroups
---
 apps/cli-example/source/app/CardThemes.ts     |  21 +
 .../stylex-import-evaluation-test.js          |  49 ++-
 .../stylex-transform-create-theme-test.js     |  60 ++-
 .../stylex-transform-define-vars-test.js      |  64 +--
 .../babel-plugin/src/utils/evaluate-path.js   |   4 +
 .../__tests__/compile-stylex-folder-test.js   |   6 +-
 .../stylex-transform-create-theme-test.js     |   4 +-
 .../stylex-transform-define-vars-test.js      |  12 +-
 .../__snapshots__/index-test.js.snap          |   2 +-
 .../open-props-compile-test.js.snap           |  44 +--
 .../stylex-create-theme-by-group-test.js      | 287 ++++++++++++++
 .../stylex-create-theme-test.js               |  30 +-
 .../stylex-define-vars-by-group-test.js       | 367 ++++++++++++++++++
 .../stylex-define-vars-test.js                |  48 +--
 packages/shared/src/stylex-create-theme.js    |   4 +-
 packages/shared/src/stylex-define-vars.js     |   4 +-
 packages/shared/src/utils/default-options.js  |  13 -
 17 files changed, 884 insertions(+), 135 deletions(-)
 create mode 100644 apps/cli-example/source/app/CardThemes.ts
 create mode 100644 packages/shared/__tests__/create-theme/stylex-create-theme-by-group-test.js
 rename packages/shared/__tests__/{ => create-theme}/stylex-create-theme-test.js (88%)
 create mode 100644 packages/shared/__tests__/define-vars/stylex-define-vars-by-group-test.js
 rename packages/shared/__tests__/{ => define-vars}/stylex-define-vars-test.js (81%)

diff --git a/apps/cli-example/source/app/CardThemes.ts b/apps/cli-example/source/app/CardThemes.ts
new file mode 100644
index 00000000..77e7662b
--- /dev/null
+++ b/apps/cli-example/source/app/CardThemes.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import { tokens } from './CardTokens.stylex';
+
+export const minorOffset = stylex.createTheme(tokens, {
+  arrowTransform: 'translateX(5px)',
+});
+
+export const majorOffset = stylex.createTheme(tokens, {
+  arrowTransform: 'translateX(10px)',
+});
+
+export const reset = stylex.createTheme(tokens, {});
diff --git a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js
index c780c65b..745bfb40 100644
--- a/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js
+++ b/packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js
@@ -34,7 +34,12 @@ function transform(source, opts = options) {
       jsx,
       [
         stylexPlugin,
-        { treeshakeCompensation: true, runtimeInjection: true, ...opts },
+        {
+          treeshakeCompensation: true,
+          runtimeInjection: true,
+          unstable_moduleResolution: { type: 'haste' },
+          ...opts,
+        },
       ],
     ],
   });
@@ -42,10 +47,6 @@ function transform(source, opts = options) {
 
 describe('Evaluation of imported values works based on configuration', () => {
   describe('Theme name hashing based on fileName alone works', () => {
-    beforeEach(() => {
-      options.unstable_moduleResolution = { type: 'haste' };
-    });
-
     test('Importing file with ".stylex" suffix works', () => {
       const transformation = transform(`
         import stylex from 'stylex';
@@ -87,6 +88,44 @@ describe('Evaluation of imported values works based on configuration', () => {
       `);
     });
 
+    test('Importing file with ".stylex" and reading __themeName__ returns a className', () => {
+      const transformation = transform(`
+        import stylex from 'stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        const styles = stylex.create({
+          red: {
+            color: MyTheme.__themeName__,
+          }
+        });
+        stylex(styles.red);
+      `);
+      const expectedVarName =
+        options.classNamePrefix + hash('otherFile.stylex.js//MyTheme');
+      expect(expectedVarName).toMatchInlineSnapshot(`"__hashed_var__jvfbhb"`);
+      expect(transformation.code).toContain(expectedVarName);
+      expect(transformation.code).toMatchInlineSnapshot(`
+        "import _inject from "@stylexjs/stylex/lib/stylex-inject";
+        var _inject2 = _inject;
+        import stylex from 'stylex';
+        import 'otherFile.stylex';
+        import { MyTheme } from 'otherFile.stylex';
+        _inject2(".__hashed_var__1yh36a2{color:__hashed_var__jvfbhb}", 3000);
+        "__hashed_var__1yh36a2";"
+      `);
+      expect(transformation.metadata.stylex).toMatchInlineSnapshot(`
+        [
+          [
+            "__hashed_var__1yh36a2",
+            {
+              "ltr": ".__hashed_var__1yh36a2{color:__hashed_var__jvfbhb}",
+              "rtl": null,
+            },
+            3000,
+          ],
+        ]
+      `);
+    });
+
     test('Maintains variable names that start with -- from "*.stylex" files', () => {
       const transformation = transform(`
         import stylex from 'stylex';
diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js
index 7a686ae1..d9df9447 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js
@@ -84,6 +84,34 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
       });
     `);
   });
+
+  test('test one output of stylex.defineVars()', () => {
+    expect(
+      transform(
+        `
+          import * as stylex from 'stylex';
+
+          export const buttonTheme = stylex.defineVars({
+            bgColor: 'green',
+            bgColorDisabled: 'antiquewhite',
+            cornerRadius: '6px',
+            fgColor: 'coral',
+          });
+        `,
+        { filename: 'TestTheme.stylex.js' },
+      ),
+    ).toMatchInlineSnapshot(`
+      "import * as stylex from 'stylex';
+      export const buttonTheme = {
+        bgColor: "var(--xgck17p)",
+        bgColorDisabled: "var(--xpegid5)",
+        cornerRadius: "var(--xrqfjmn)",
+        fgColor: "var(--x4y59db)",
+        __themeName__: "x568ih9"
+      };"
+    `);
+  });
+
   test('output of stylex.defineVars()', () => {
     expect(defineVarsOutput).toMatchInlineSnapshot(`
       "import stylex from 'stylex';
@@ -129,7 +157,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
       expect(output1).toEqual(output2);
@@ -152,7 +180,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         };
         const buttonThemePositive = {
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
     });
@@ -183,7 +211,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
     });
@@ -211,7 +239,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         };
         const buttonThemePositive = {
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
     });
@@ -246,7 +274,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
     });
@@ -274,11 +302,11 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         };
         const buttonThemePositive = {
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };
         const buttonThemeNew = {
           $$css: true,
-          x568ih9: "x1qnwd2l"
+          x568ih9: "x1qnwd2l x568ih9"
         };"
       `);
     });
@@ -318,13 +346,13 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };
         _inject2(".x1awrdae, .x1awrdae:root{--xgck17p:white;--xpegid5:black;--xrqfjmn:0px;}", 0.5);
         const buttonThemeMonochromatic = {
           TestTheme__buttonThemeMonochromatic: "TestTheme__buttonThemeMonochromatic",
           $$css: true,
-          x568ih9: "x1awrdae"
+          x568ih9: "x1awrdae x568ih9"
         };"
       `);
     });
@@ -369,7 +397,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xi7kglk"
+          x568ih9: "xi7kglk x568ih9"
         };"
       `);
     });
@@ -414,7 +442,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
     });
@@ -459,7 +487,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "x143z4bu"
+          x568ih9: "x143z4bu x568ih9"
         };"
       `);
     });
@@ -504,7 +532,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "x64jqcx"
+          x568ih9: "x64jqcx x568ih9"
         };"
       `);
     });
@@ -542,7 +570,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           NestedTheme__buttonThemePositive: "NestedTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "xtrlmmh"
+          x568ih9: "xtrlmmh x568ih9"
         };"
       `);
     });
@@ -587,7 +615,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme', () => {
         const buttonThemePositive = {
           TestTheme__buttonThemePositive: "TestTheme__buttonThemePositive",
           $$css: true,
-          x568ih9: "x41sqjo"
+          x568ih9: "x41sqjo x568ih9"
         };"
       `);
     });
@@ -657,7 +685,7 @@ describe('@stylexjs/babel-plugin stylex.createTheme with literals', () => {
         };
         const buttonThemePositive = {
           $$css: true,
-          x568ih9: "x4znj40"
+          x568ih9: "x4znj40 x568ih9"
         };"
       `);
     });
diff --git a/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js b/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js
index 1cb8c472..c1030804 100644
--- a/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js
+++ b/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js
@@ -102,7 +102,7 @@ describe('@stylexjs/babel-plugin', () => {
           [
             "x568ih9",
             {
-              "ltr": ":root{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10;--fgColor:pink;}",
+              "ltr": ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10;--fgColor:pink;}",
               "rtl": null,
             },
             0,
@@ -110,7 +110,7 @@ describe('@stylexjs/babel-plugin', () => {
           [
             "x568ih9-1lveb7",
             {
-              "ltr": "@media (prefers-color-scheme: dark){:root{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
+              "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
               "rtl": null,
             },
             0.1,
@@ -118,7 +118,7 @@ describe('@stylexjs/babel-plugin', () => {
           [
             "x568ih9-bdddrq",
             {
-              "ltr": "@media print{:root{--bgColor:white;}}",
+              "ltr": "@media print{:root, .x568ih9{--bgColor:white;}}",
               "rtl": null,
             },
             0.1,
@@ -266,9 +266,9 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -348,9 +348,9 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -447,9 +447,9 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -457,8 +457,8 @@ describe('@stylexjs/babel-plugin', () => {
           fgColor: "var(--x4y59db)",
           __themeName__: "x568ih9"
         };
-        _inject2(":root{--xcateir:white;--xmj7ivn:black;--x13gxjix:8;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xmj7ivn:white;}}", 0.1);
+        _inject2(":root, .xb35w82{--xcateir:white;--xmj7ivn:black;--x13gxjix:8;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .xb35w82{--xmj7ivn:white;}}", 0.1);
         export const textInputTheme = {
           bgColor: "var(--xcateir)",
           labelColor: "var(--xmj7ivn)",
@@ -497,9 +497,9 @@ describe('@stylexjs/babel-plugin', () => {
         var _inject2 = _inject;
         import stylex from 'stylex';
         const RADIUS = 10;
-        _inject2(":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -539,9 +539,9 @@ describe('@stylexjs/babel-plugin', () => {
         var _inject2 = _inject;
         import stylex from 'stylex';
         const color = 'blue';
-        _inject2(":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -581,9 +581,9 @@ describe('@stylexjs/babel-plugin', () => {
         var _inject2 = _inject;
         import stylex from 'stylex';
         const name = 'light';
-        _inject2(":root{--xgck17p:lightblue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:lightblue;--xpegid5:grey;--xrqfjmn:10;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -623,9 +623,9 @@ describe('@stylexjs/babel-plugin', () => {
         var _inject2 = _inject;
         import stylex from 'stylex';
         const RADIUS = 2;
-        _inject2(":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:4;--x4y59db:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--xgck17p:white;}}", 0.1);
+        _inject2(":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:4;--x4y59db:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .x568ih9{--xgck17p:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--xgck17p)",
           bgColorDisabled: "var(--xpegid5)",
@@ -670,9 +670,9 @@ describe('@stylexjs/babel-plugin', () => {
         "import _inject from "@stylexjs/stylex/lib/stylex-inject";
         var _inject2 = _inject;
         import stylex from 'stylex';
-        _inject2(":root{--x1sm8rlu:blue;--xxncinc:grey;--x4e1236:10;--xv9uic:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--x1sm8rlu:lightblue;--xxncinc:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--x1sm8rlu:white;}}", 0.1);
+        _inject2(":root, .xmpye33{--x1sm8rlu:blue;--xxncinc:grey;--x4e1236:10;--xv9uic:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .xmpye33{--x1sm8rlu:lightblue;--xxncinc:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .xmpye33{--x1sm8rlu:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--x1sm8rlu)",
           bgColorDisabled: "var(--xxncinc)",
@@ -721,9 +721,9 @@ describe('@stylexjs/babel-plugin', () => {
         _inject2("@property --xxncinc { syntax: \\"<color>\\"; inherits: true; initial-value: grey }", 0);
         _inject2("@property --x4e1236 { syntax: \\"<length>\\"; inherits: true; initial-value: 10px }", 0);
         _inject2("@property --xv9uic { syntax: \\"<color>\\"; inherits: true; initial-value: pink }", 0);
-        _inject2(":root{--x1sm8rlu:blue;--xxncinc:grey;--x4e1236:10px;--xv9uic:pink;}", 0);
-        _inject2("@media (prefers-color-scheme: dark){:root{--x1sm8rlu:lightblue;--xxncinc:rgba(0, 0, 0, 0.8);}}", 0.1);
-        _inject2("@media print{:root{--x1sm8rlu:white;}}", 0.1);
+        _inject2(":root, .xmpye33{--x1sm8rlu:blue;--xxncinc:grey;--x4e1236:10px;--xv9uic:pink;}", 0);
+        _inject2("@media (prefers-color-scheme: dark){:root, .xmpye33{--x1sm8rlu:lightblue;--xxncinc:rgba(0, 0, 0, 0.8);}}", 0.1);
+        _inject2("@media print{:root, .xmpye33{--x1sm8rlu:white;}}", 0.1);
         export const buttonTheme = {
           bgColor: "var(--x1sm8rlu)",
           bgColorDisabled: "var(--xxncinc)",
diff --git a/packages/babel-plugin/src/utils/evaluate-path.js b/packages/babel-plugin/src/utils/evaluate-path.js
index 3b56db3d..64b0c63e 100644
--- a/packages/babel-plugin/src/utils/evaluate-path.js
+++ b/packages/babel-plugin/src/utils/evaluate-path.js
@@ -166,6 +166,10 @@ function evaluateThemeRef(
 
     const varName =
       state.traversalState.options.classNamePrefix + utils.hash(strToHash);
+
+    if (key === '__themeName__') {
+      return varName;
+    }
     return `var(--${varName})`;
   };
 
diff --git a/packages/cli/__tests__/compile-stylex-folder-test.js b/packages/cli/__tests__/compile-stylex-folder-test.js
index 54c4d111..fb6954fa 100644
--- a/packages/cli/__tests__/compile-stylex-folder-test.js
+++ b/packages/cli/__tests__/compile-stylex-folder-test.js
@@ -117,7 +117,7 @@ describe('cli works with -i and -o args', () => {
     };
 
     runCli(`-i ${config.input[0]} -o ${config.output[0]}`, config, onClose);
-  });
+  }, 10000);
 
   test('script runs with absolute input and output paths', (done) => {
     const absConfig: CliConfig = {
@@ -135,7 +135,7 @@ describe('cli works with -i and -o args', () => {
       absConfig,
       onClose,
     );
-  });
+  }, 10000);
 });
 
 describe('cli works with multiple inputs and outputs', () => {
@@ -178,7 +178,7 @@ describe('cli works with multiple inputs and outputs', () => {
     const output = config.output.join(' ');
     const args = `-i ${input} -o ${output}`;
     runCli(args, config, onClose);
-  });
+  }, 10000);
 });
 
 describe('individual testing of util functions', () => {
diff --git a/packages/dev-runtime/__tests__/stylex-transform-create-theme-test.js b/packages/dev-runtime/__tests__/stylex-transform-create-theme-test.js
index 2c399840..48e7094e 100644
--- a/packages/dev-runtime/__tests__/stylex-transform-create-theme-test.js
+++ b/packages/dev-runtime/__tests__/stylex-transform-create-theme-test.js
@@ -55,7 +55,7 @@ describe('Development Plugin Transformation', () => {
       ).toMatchInlineSnapshot(`
         {
           "$$css": true,
-          "TestTheme.stylex.js//buttonTheme": "xtrlmmh",
+          "TestTheme.stylex.js//buttonTheme": "xtrlmmh TestTheme.stylex.js//buttonTheme",
         }
       `);
       expect(metadata).toMatchInlineSnapshot(`
@@ -115,7 +115,7 @@ describe('Development Plugin Transformation', () => {
       ).toMatchInlineSnapshot(`
         {
           "$$css": true,
-          "TestTheme.stylex.js//buttonTheme": "xtrlmmh",
+          "TestTheme.stylex.js//buttonTheme": "xtrlmmh TestTheme.stylex.js//buttonTheme",
         }
       `);
       expect(metadata).toMatchInlineSnapshot(`
diff --git a/packages/dev-runtime/__tests__/stylex-transform-define-vars-test.js b/packages/dev-runtime/__tests__/stylex-transform-define-vars-test.js
index 64ada484..ce83c079 100644
--- a/packages/dev-runtime/__tests__/stylex-transform-define-vars-test.js
+++ b/packages/dev-runtime/__tests__/stylex-transform-define-vars-test.js
@@ -64,7 +64,7 @@ describe('Development Plugin Transformation', () => {
           [
             "x7fqapl",
             {
-              "ltr": ":root{--xiwovr5:blue;--xdg0pry:grey;--x1j3mert:10px;--x1wgda7f:pink;}",
+              "ltr": ":root, .x7fqapl{--xiwovr5:blue;--xdg0pry:grey;--x1j3mert:10px;--x1wgda7f:pink;}",
               "rtl": undefined,
             },
             0,
@@ -72,7 +72,7 @@ describe('Development Plugin Transformation', () => {
           [
             "x7fqapl-1lveb7",
             {
-              "ltr": "@media (prefers-color-scheme: dark){:root{--xiwovr5:lightblue;--xdg0pry:rgba(0, 0, 0, 0.8);}}",
+              "ltr": "@media (prefers-color-scheme: dark){:root, .x7fqapl{--xiwovr5:lightblue;--xdg0pry:rgba(0, 0, 0, 0.8);}}",
               "rtl": undefined,
             },
             0.1,
@@ -80,7 +80,7 @@ describe('Development Plugin Transformation', () => {
           [
             "x7fqapl-bdddrq",
             {
-              "ltr": "@media print{:root{--xiwovr5:white;}}",
+              "ltr": "@media print{:root, .x7fqapl{--xiwovr5:white;}}",
               "rtl": undefined,
             },
             0.1,
@@ -156,7 +156,7 @@ describe('Development Plugin Transformation', () => {
           [
             "x7fqapl",
             {
-              "ltr": ":root{--xiwovr5:blue;--xdg0pry:grey;--x1j3mert:10px;--x1wgda7f:pink;}",
+              "ltr": ":root, .x7fqapl{--xiwovr5:blue;--xdg0pry:grey;--x1j3mert:10px;--x1wgda7f:pink;}",
               "rtl": undefined,
             },
             0,
@@ -164,7 +164,7 @@ describe('Development Plugin Transformation', () => {
           [
             "x7fqapl-1lveb7",
             {
-              "ltr": "@media (prefers-color-scheme: dark){:root{--xiwovr5:lightblue;--xdg0pry:rgba(0, 0, 0, 0.8);}}",
+              "ltr": "@media (prefers-color-scheme: dark){:root, .x7fqapl{--xiwovr5:lightblue;--xdg0pry:rgba(0, 0, 0, 0.8);}}",
               "rtl": undefined,
             },
             0.1,
@@ -172,7 +172,7 @@ describe('Development Plugin Transformation', () => {
           [
             "x7fqapl-bdddrq",
             {
-              "ltr": "@media print{:root{--xiwovr5:white;}}",
+              "ltr": "@media print{:root, .x7fqapl{--xiwovr5:white;}}",
               "rtl": undefined,
             },
             0.1,
diff --git a/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap b/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
index a3715c83..475d9455 100644
--- a/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/esbuild-plugin/__tests__/__snapshots__/index-test.js.snap
@@ -116,7 +116,7 @@ exports[`esbuild-plugin-stylex extracts and bundles CSS without inject calls, bu
 "
 @layer priority1, priority2;
 @layer priority1{
-:root{--xx1oc6k:white;--x14p2zvc:pink;--xdr2u03:green;}
+:root, .x1e8sos5{--xx1oc6k:white;--x14p2zvc:pink;--xdr2u03:green;}
 }
 @layer priority2{
 .xktrvhi{background-color:var(--xx1oc6k)}
diff --git a/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap b/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap
index 7ef1b6aa..5b74dd86 100644
--- a/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap
+++ b/packages/open-props/__tests__/__snapshots__/open-props-compile-test.js.snap
@@ -259,7 +259,7 @@ exports[`commonJS results of exported styles and variables animationNames.stylex
   [
     "x1buy10o",
     {
-      "ltr": ":root{--x1tpojno:x1wv65fh-B;--x196p7n0:x3cospo-B;--x1744v7y:x1mi9bte-B;--x1cjy58y:xd93vs1-B;--x18ipih6:x1gdf4cp-B;--x1o6vkl7:x1uvjygu-B;--xtar0oa:xyz4r9t-B;--x1pl3rtr:xyz4r9t-B;--xygut9p:x1qkfcoh-B;--xo4sz2:x1c1el34-B;--xu86f5p:x5q0om7-B;--x1wje62b:xiaildr-B;--x2nfvv6:x1pzz5b5-B;--x4efuzq:x2i3tye-B;--x1hp58ex:xui5qpo-B;--xyzqrm4:x1oudpiw-B;--x1j60cb5:x1uh2x5g-B;--x1gf74ca:xk6fz2t-B;--xrqruaz:x13kz0yu-B;--x4hq2i0:xtacmzc-B;--x1wfjpbb:xmu8adp-B;--xwo0ei1:x1wtl5zh-B;}",
+      "ltr": ":root, .x1buy10o{--x1tpojno:x1wv65fh-B;--x196p7n0:x3cospo-B;--x1744v7y:x1mi9bte-B;--x1cjy58y:xd93vs1-B;--x18ipih6:x1gdf4cp-B;--x1o6vkl7:x1uvjygu-B;--xtar0oa:xyz4r9t-B;--x1pl3rtr:xyz4r9t-B;--xygut9p:x1qkfcoh-B;--xo4sz2:x1c1el34-B;--xu86f5p:x5q0om7-B;--x1wje62b:xiaildr-B;--x2nfvv6:x1pzz5b5-B;--x4efuzq:x2i3tye-B;--x1hp58ex:xui5qpo-B;--xyzqrm4:x1oudpiw-B;--x1j60cb5:x1uh2x5g-B;--x1gf74ca:xk6fz2t-B;--xrqruaz:x13kz0yu-B;--x4hq2i0:xtacmzc-B;--x1wfjpbb:xmu8adp-B;--xwo0ei1:x1wtl5zh-B;}",
       "rtl": null,
     },
     0,
@@ -267,7 +267,7 @@ exports[`commonJS results of exported styles and variables animationNames.stylex
   [
     "x1buy10o-1lveb7",
     {
-      "ltr": "@media (prefers-color-scheme: dark){:root{--x196p7n0:x1xhkb8m-B;--x1cjy58y:x18q36hy-B;}}",
+      "ltr": "@media (prefers-color-scheme: dark){:root, .x1buy10o{--x196p7n0:x1xhkb8m-B;--x1cjy58y:x18q36hy-B;}}",
       "rtl": null,
     },
     0.1,
@@ -744,7 +744,7 @@ exports[`commonJS results of exported styles and variables aspects.stylex.js 2`]
   [
     "xqhtbyt",
     {
-      "ltr": ":root{--xq324k1:1;--xlx0mzp:4/3;--x1xq7ctp:3/4;--x6limxj:16/9;--xm74kdv:18/5;--x1vxckdw:1.6180/1;}",
+      "ltr": ":root, .xqhtbyt{--xq324k1:1;--xlx0mzp:4/3;--x1xq7ctp:3/4;--x6limxj:16/9;--xm74kdv:18/5;--x1vxckdw:1.6180/1;}",
       "rtl": null,
     },
     0,
@@ -797,7 +797,7 @@ exports[`commonJS results of exported styles and variables borders.stylex.js 2`]
   [
     "xsvni4y",
     {
-      "ltr": ":root{--xbjj58a:1px;--x14o6iis:2px;--x1e9i0iw:5px;--x176lscn:10px;--x1p1l79a:25px;--x1ofeuqf:2px;--x1kpevz7:5px;--xy5lhyd:1rem;--x1jhm85w:2rem;--xemaozq:4rem;--x1r3jsdr:8rem;--x13okayq:1e5px;--xsn075m:clamp(0px, calc(100vw - 100%) * 1e5, 2px);--x99wm3n:clamp(0px, calc(100vw - 100%) * 1e5, 5px);--x13j5zal:clamp(0px, calc(100vw - 100%) * 1e5, 1rem);--xpvamk3:clamp(0px, calc(100vw - 100%) * 1e5, 2rem);--xz5h7m6:clamp(0px, calc(100vw - 100%) * 1e5, 4rem);--xwsfbci:clamp(0px, calc(100vw - 100%) * 1e5, 8rem);}",
+      "ltr": ":root, .xsvni4y{--xbjj58a:1px;--x14o6iis:2px;--x1e9i0iw:5px;--x176lscn:10px;--x1p1l79a:25px;--x1ofeuqf:2px;--x1kpevz7:5px;--xy5lhyd:1rem;--x1jhm85w:2rem;--xemaozq:4rem;--x1r3jsdr:8rem;--x13okayq:1e5px;--xsn075m:clamp(0px, calc(100vw - 100%) * 1e5, 2px);--x99wm3n:clamp(0px, calc(100vw - 100%) * 1e5, 5px);--x13j5zal:clamp(0px, calc(100vw - 100%) * 1e5, 1rem);--xpvamk3:clamp(0px, calc(100vw - 100%) * 1e5, 2rem);--xz5h7m6:clamp(0px, calc(100vw - 100%) * 1e5, 4rem);--xwsfbci:clamp(0px, calc(100vw - 100%) * 1e5, 8rem);}",
       "rtl": null,
     },
     0,
@@ -1073,7 +1073,7 @@ exports[`commonJS results of exported styles and variables colors.stylex.js 2`]
   [
     "x162kktg",
     {
-      "ltr": ":root{--x1du1ejt:#f8f9fa;--x6l5fu6:#f1f3f5;--xdtxd5r:#e9ecef;--xgsoah:#dee2e6;--x1x5euof:#ced4da;--xx59qqg:#adb5bd;--x9zl0vm:#868e96;--xgoejoy:#495057;--xx5q273:#343a40;--x6npkq2:#212529;--x132tvzj:#16191d;--x7a06xw:#0d0f12;--xt25yf1:#030507;--xspgq0w:#f8fafb;--xnd7l4w:#f2f4f6;--xxrzpf0:#ebedef;--x17fo9c7:#e0e4e5;--xd221ts:#d1d6d8;--xckbqqc:#b1b6b9;--x1bgzw63:#979b9d;--x1dcbxyc:#7e8282;--x15f0217:#666968;--x1tw3h6p:#50514f;--xv5pykf:#3a3a37;--xlkscd1:#252521;--x1mhj7jz:#121210;--x154xur1:#fff5f5;--x10i12q1:#ffe3e3;--xthycv:#ffc9c9;--x1i2pj8l:#ffa8a8;--x1aqpwr6:#ff8787;--x1yaxlo9:#ff6b6b;--x1qymcsb:#fa5252;--x1ox6e7r:#f03e3e;--x1hsbqx0:#e03131;--xldfda6:#c92a2a;--x713hrr:#b02525;--x1mdcq3j:#962020;--x1dyqf0v:#7d1a1a;--xunvm2g:#fff0f6;--xrrfdwq:#ffdeeb;--x292awk:#fcc2d7;--xjthn19:#faa2c1;--xygz2:#f783ac;--xzo0j5u:#f06595;--x17v35fl:#e64980;--xq00qks:#d6336c;--x15ghqp4:#c2255c;--xiib2n3:#a61e4d;--x15f0m3q:#8c1941;--x1trj7ej:#731536;--xk7lbjx:#59102a;--x1k3l046:#f8f0fc;--x1783ujs:#f3d9fa;--x1un3jw2:#eebefa;--xrzhr89:#e599f7;--x128pbbs:#da77f2;--x1n9g0zx:#cc5de8;--x1a18snk:#be4bdb;--x1n60ep6:#ae3ec9;--x11ofmpx:#9c36b5;--x1szirr7:#862e9c;--x126kwiu:#702682;--x6soue8:#5a1e69;--x33no5d:#44174f;--x1m4daxf:#f3f0ff;--x1cd86dm:#e5dbff;--x16ykv6v:#d0bfff;--xy6v78x:#b197fc;--x1wcz8fz:#9775fa;--x1jlh2l6:#845ef7;--xmxoa4b:#7950f2;--xyjpukp:#7048e8;--xfgbd0i:#6741d9;--xil57hy:#5f3dc4;--xgklyty:#5235ab;--x13m4eca:#462d91;--x1oec7nb:#3a2578;--x1puh6wc:#edf2ff;--x1x1j5mb:#dbe4ff;--x1tedhkn:#bac8ff;--x1ivnq8y:#91a7ff;--x1qpagxt:#748ffc;--xyw471d:#5c7cfa;--x1puzbj8:#4c6ef5;--xr7we1j:#4263eb;--x1luij3n:#3b5bdb;--x1j9ei1u:#364fc7;--x1uxr24x:#2f44ad;--x1s92x7s:#283a94;--xtahwgr:#21307a;--x24zuhp:#e7f5ff;--xojgcvx:#d0ebff;--xg2lnj2:#a5d8ff;--xi8t3zg:#74c0fc;--x1cxo12m:#4dabf7;--x108blat:#339af0;--x1m71bfi:#228be6;--x18thc5e:#1c7ed6;--x1r2ch0g:#1971c2;--xvj1pi2:#1864ab;--x115d7ns:#145591;--x8tlmf6:#114678;--xh88pmo:#0d375e;--xan8hvm:#e3fafc;--x18bhb5z:#c5f6fa;--x8ff4qx:#99e9f2;--xlt4c4z:#66d9e8;--x1mfssx2:#3bc9db;--xq0bacp:#22b8cf;--x55yy6t:#15aabf;--x1q374o9:#1098ad;--x1t0e0yp:#0c8599;--x1ud0v1m:#0b7285;--xib4mga:#095c6b;--x1c2ncfz:#074652;--xb71b1h:#053038;--x1l1olg2:#e6fcf5;--x1fo865r:#c3fae8;--x1nvc1fg:#96f2d7;--xgv6auw:#63e6be;--x1pmst37:#38d9a9;--xkk4tu2:#20c997;--xd7fwrk:#12b886;--x18b04yc:#0ca678;--xj3v5jt:#099268;--x1s1bj4c:#087f5b;--x54ht8j:#066649;--xxe259l:#054d37;--x16fpf85:#033325;--xgmtrsx:#ebfbee;--x425yo9:#d3f9d8;--x1bmyh8s:#b2f2bb;--x18hswmk:#8ce99a;--x1jhgljg:#69db7c;--x1riuw4r:#51cf66;--x8bahf8:#40c057;--x12e2g2o:#37b24d;--x12iv1wp:#2f9e44;--x6bjjnb:#2b8a3e;--xg6ckn6:#237032;--xiugtb2:#1b5727;--xax6nii:#133d1b;--x6jx7d8:#f4fce3;--x178ah5i:#e9fac8;--x2cs2bd:#d8f5a2;--x1u6dil4:#c0eb75;--x8ww2g:#a9e34b;--xiik63j:#94d82d;--xnjfibw:#82c91e;--xmsrhpr:#74b816;--x1je4qph:#66a80f;--x13cqja8:#5c940d;--x1x607hg:#4c7a0b;--xpkgxqi:#3c6109;--x11jcshd:#2c4706;--x1grypkq:#fff9db;--xnswjug:#fff3bf;--x9ofhvc:#ffec99;--x1d0oe9x:#ffe066;--x17dabl9:#ffd43b;--xymg4no:#fcc419;--xdwmfyi:#fab005;--xrmknr6:#f59f00;--x1qomae0:#f08c00;--x1uqlv87:#e67700;--x4n8yqf:#b35c00;--x1l2ywbu:#804200;--x1e7q8c8:#663500;--x14vtr7b:#fff4e6;--x8ugorc:#ffe8cc;--x1ope2ln:#ffd8a8;--xp98umn:#ffc078;--xlv97gw:#ffa94d;--x1xagoox:#ff922b;--xblktig:#fd7e14;--xxt8zue:#f76707;--x1r2hdc1:#e8590c;--xnwt3lr:#d9480f;--x1i2dlub:#bf400d;--xf1iw9h:#99330b;--x1vvoewe:#802b09;--xm61dt9:#fff8dc;--x1k8uhob:#fce1bc;--x1ti0dn2:#f7ca9e;--xi52343:#f1b280;--xuf0ff2:#e99b62;--x1r01pk:#df8545;--xryi63n:#d46e25;--x1e11l0x:#bd5f1b;--xmmgtle:#a45117;--x1hrtu5m:#8a4513;--xyuxrpj:#703a13;--xel46zi:#572f12;--x1oigmu:#3d210d;--x19egssh:#faf4eb;--xt0dsh4:#ede0d1;--x1epulul:#e0cab7;--xdy0a2q:#d3b79e;--xdzpipt:#c5a285;--x188t1ja:#b78f6d;--xb615q4:#a87c56;--xeqhvb8:#956b47;--xe7zt00:#825b3a;--xct3ydx:#6f4b2d;--xuy5q1s:#5e3a21;--xlws4yr:#4e2b15;--x1faujur:#422412;--xtdghm2:#f8fafb;--xozahh3:#e6e4dc;--x1052bky:#d5cfbd;--x1473439:#c2b9a0;--xhnc30k:#aea58c;--x1h6kccj:#9a9178;--x1ykdusk:#867c65;--x1r5bpmv:#736a53;--x9bgr96:#5f5746;--xe04zig:#4b4639;--x1czanuk:#38352d;--x1lbedzd:#252521;--xspwxd9:#121210;--x1q62qvy:#f9fbe7;--xhjzm0h:#e8ed9c;--xciiy3r:#d2df4e;--xl56gpu:#c2ce34;--x14qg1fj:#b5bb2e;--xgy29dp:#a7a827;--xbnjp6a:#999621;--x1h0v8m5:#8c851c;--x13mo2xy:#7e7416;--x1gwvfa6:#6d6414;--x693eh4:#5d5411;--xi99qxk:#4d460e;--xhzutxe:#36300a;--xl2xtxp:#ecfeb0;--xpacl8i:#def39a;--xseko76:#d0e884;--x1bru2sl:#c2dd6e;--x2anca0:#b5d15b;--xg5u3s1:#a8c648;--xqj1s2g:#9bbb36;--xccttox:#8fb024;--x1e1wjso:#84a513;--x1oior8:#7a9908;--xxjjt9z:#658006;--x1vp08an:#516605;--x1y2wm6g:#3d4d04;}",
+      "ltr": ":root, .x162kktg{--x1du1ejt:#f8f9fa;--x6l5fu6:#f1f3f5;--xdtxd5r:#e9ecef;--xgsoah:#dee2e6;--x1x5euof:#ced4da;--xx59qqg:#adb5bd;--x9zl0vm:#868e96;--xgoejoy:#495057;--xx5q273:#343a40;--x6npkq2:#212529;--x132tvzj:#16191d;--x7a06xw:#0d0f12;--xt25yf1:#030507;--xspgq0w:#f8fafb;--xnd7l4w:#f2f4f6;--xxrzpf0:#ebedef;--x17fo9c7:#e0e4e5;--xd221ts:#d1d6d8;--xckbqqc:#b1b6b9;--x1bgzw63:#979b9d;--x1dcbxyc:#7e8282;--x15f0217:#666968;--x1tw3h6p:#50514f;--xv5pykf:#3a3a37;--xlkscd1:#252521;--x1mhj7jz:#121210;--x154xur1:#fff5f5;--x10i12q1:#ffe3e3;--xthycv:#ffc9c9;--x1i2pj8l:#ffa8a8;--x1aqpwr6:#ff8787;--x1yaxlo9:#ff6b6b;--x1qymcsb:#fa5252;--x1ox6e7r:#f03e3e;--x1hsbqx0:#e03131;--xldfda6:#c92a2a;--x713hrr:#b02525;--x1mdcq3j:#962020;--x1dyqf0v:#7d1a1a;--xunvm2g:#fff0f6;--xrrfdwq:#ffdeeb;--x292awk:#fcc2d7;--xjthn19:#faa2c1;--xygz2:#f783ac;--xzo0j5u:#f06595;--x17v35fl:#e64980;--xq00qks:#d6336c;--x15ghqp4:#c2255c;--xiib2n3:#a61e4d;--x15f0m3q:#8c1941;--x1trj7ej:#731536;--xk7lbjx:#59102a;--x1k3l046:#f8f0fc;--x1783ujs:#f3d9fa;--x1un3jw2:#eebefa;--xrzhr89:#e599f7;--x128pbbs:#da77f2;--x1n9g0zx:#cc5de8;--x1a18snk:#be4bdb;--x1n60ep6:#ae3ec9;--x11ofmpx:#9c36b5;--x1szirr7:#862e9c;--x126kwiu:#702682;--x6soue8:#5a1e69;--x33no5d:#44174f;--x1m4daxf:#f3f0ff;--x1cd86dm:#e5dbff;--x16ykv6v:#d0bfff;--xy6v78x:#b197fc;--x1wcz8fz:#9775fa;--x1jlh2l6:#845ef7;--xmxoa4b:#7950f2;--xyjpukp:#7048e8;--xfgbd0i:#6741d9;--xil57hy:#5f3dc4;--xgklyty:#5235ab;--x13m4eca:#462d91;--x1oec7nb:#3a2578;--x1puh6wc:#edf2ff;--x1x1j5mb:#dbe4ff;--x1tedhkn:#bac8ff;--x1ivnq8y:#91a7ff;--x1qpagxt:#748ffc;--xyw471d:#5c7cfa;--x1puzbj8:#4c6ef5;--xr7we1j:#4263eb;--x1luij3n:#3b5bdb;--x1j9ei1u:#364fc7;--x1uxr24x:#2f44ad;--x1s92x7s:#283a94;--xtahwgr:#21307a;--x24zuhp:#e7f5ff;--xojgcvx:#d0ebff;--xg2lnj2:#a5d8ff;--xi8t3zg:#74c0fc;--x1cxo12m:#4dabf7;--x108blat:#339af0;--x1m71bfi:#228be6;--x18thc5e:#1c7ed6;--x1r2ch0g:#1971c2;--xvj1pi2:#1864ab;--x115d7ns:#145591;--x8tlmf6:#114678;--xh88pmo:#0d375e;--xan8hvm:#e3fafc;--x18bhb5z:#c5f6fa;--x8ff4qx:#99e9f2;--xlt4c4z:#66d9e8;--x1mfssx2:#3bc9db;--xq0bacp:#22b8cf;--x55yy6t:#15aabf;--x1q374o9:#1098ad;--x1t0e0yp:#0c8599;--x1ud0v1m:#0b7285;--xib4mga:#095c6b;--x1c2ncfz:#074652;--xb71b1h:#053038;--x1l1olg2:#e6fcf5;--x1fo865r:#c3fae8;--x1nvc1fg:#96f2d7;--xgv6auw:#63e6be;--x1pmst37:#38d9a9;--xkk4tu2:#20c997;--xd7fwrk:#12b886;--x18b04yc:#0ca678;--xj3v5jt:#099268;--x1s1bj4c:#087f5b;--x54ht8j:#066649;--xxe259l:#054d37;--x16fpf85:#033325;--xgmtrsx:#ebfbee;--x425yo9:#d3f9d8;--x1bmyh8s:#b2f2bb;--x18hswmk:#8ce99a;--x1jhgljg:#69db7c;--x1riuw4r:#51cf66;--x8bahf8:#40c057;--x12e2g2o:#37b24d;--x12iv1wp:#2f9e44;--x6bjjnb:#2b8a3e;--xg6ckn6:#237032;--xiugtb2:#1b5727;--xax6nii:#133d1b;--x6jx7d8:#f4fce3;--x178ah5i:#e9fac8;--x2cs2bd:#d8f5a2;--x1u6dil4:#c0eb75;--x8ww2g:#a9e34b;--xiik63j:#94d82d;--xnjfibw:#82c91e;--xmsrhpr:#74b816;--x1je4qph:#66a80f;--x13cqja8:#5c940d;--x1x607hg:#4c7a0b;--xpkgxqi:#3c6109;--x11jcshd:#2c4706;--x1grypkq:#fff9db;--xnswjug:#fff3bf;--x9ofhvc:#ffec99;--x1d0oe9x:#ffe066;--x17dabl9:#ffd43b;--xymg4no:#fcc419;--xdwmfyi:#fab005;--xrmknr6:#f59f00;--x1qomae0:#f08c00;--x1uqlv87:#e67700;--x4n8yqf:#b35c00;--x1l2ywbu:#804200;--x1e7q8c8:#663500;--x14vtr7b:#fff4e6;--x8ugorc:#ffe8cc;--x1ope2ln:#ffd8a8;--xp98umn:#ffc078;--xlv97gw:#ffa94d;--x1xagoox:#ff922b;--xblktig:#fd7e14;--xxt8zue:#f76707;--x1r2hdc1:#e8590c;--xnwt3lr:#d9480f;--x1i2dlub:#bf400d;--xf1iw9h:#99330b;--x1vvoewe:#802b09;--xm61dt9:#fff8dc;--x1k8uhob:#fce1bc;--x1ti0dn2:#f7ca9e;--xi52343:#f1b280;--xuf0ff2:#e99b62;--x1r01pk:#df8545;--xryi63n:#d46e25;--x1e11l0x:#bd5f1b;--xmmgtle:#a45117;--x1hrtu5m:#8a4513;--xyuxrpj:#703a13;--xel46zi:#572f12;--x1oigmu:#3d210d;--x19egssh:#faf4eb;--xt0dsh4:#ede0d1;--x1epulul:#e0cab7;--xdy0a2q:#d3b79e;--xdzpipt:#c5a285;--x188t1ja:#b78f6d;--xb615q4:#a87c56;--xeqhvb8:#956b47;--xe7zt00:#825b3a;--xct3ydx:#6f4b2d;--xuy5q1s:#5e3a21;--xlws4yr:#4e2b15;--x1faujur:#422412;--xtdghm2:#f8fafb;--xozahh3:#e6e4dc;--x1052bky:#d5cfbd;--x1473439:#c2b9a0;--xhnc30k:#aea58c;--x1h6kccj:#9a9178;--x1ykdusk:#867c65;--x1r5bpmv:#736a53;--x9bgr96:#5f5746;--xe04zig:#4b4639;--x1czanuk:#38352d;--x1lbedzd:#252521;--xspwxd9:#121210;--x1q62qvy:#f9fbe7;--xhjzm0h:#e8ed9c;--xciiy3r:#d2df4e;--xl56gpu:#c2ce34;--x14qg1fj:#b5bb2e;--xgy29dp:#a7a827;--xbnjp6a:#999621;--x1h0v8m5:#8c851c;--x13mo2xy:#7e7416;--x1gwvfa6:#6d6414;--x693eh4:#5d5411;--xi99qxk:#4d460e;--xhzutxe:#36300a;--xl2xtxp:#ecfeb0;--xpacl8i:#def39a;--xseko76:#d0e884;--x1bru2sl:#c2dd6e;--x2anca0:#b5d15b;--xg5u3s1:#a8c648;--xqj1s2g:#9bbb36;--xccttox:#8fb024;--x1e1wjso:#84a513;--x1oior8:#7a9908;--xxjjt9z:#658006;--x1vp08an:#516605;--x1y2wm6g:#3d4d04;}",
       "rtl": null,
     },
     0,
@@ -1349,7 +1349,7 @@ exports[`commonJS results of exported styles and variables colorsHSL.stylex.js 2
   [
     "xc0ri92",
     {
-      "ltr": ":root{--x6w7mb3:210 17% 98%;--x1ih1bek:210 17% 95%;--xixsm1q:210 16% 93%;--xehhxjz:210 14% 89%;--x1jd9bxl:210 14% 83%;--xsmpgwg:210 11% 71%;--x1xzikdo:210 7% 56%;--x1qwjrry:210 9% 31%;--x1olwv34:210 10% 23%;--x13m3okq:210 11% 15%;--x18roed0:214 14% 10%;--x17n17tl:216 16% 6%;--x118ecow:210 40% 2%;--x2vb7vv:200 27% 98%;--xh160pk:210 18% 96%;--xymdneo:210 11% 93%;--x11nvr3e:192 9% 89%;--x1sdx6bp:197 8% 83%;--xru1u51:202 5% 71%;--xomtjf5:200 3% 60%;--x1hdq1nh:180 2% 50%;--xhwxa11:160 1% 41%;--x1fqurk1:90 1% 31%;--x1bdz9vs:60 3% 22%;--x1gcm099:60 6% 14%;--x1x1edl5:60 6% 7%;--x1iuemvu:0 100% 98%;--x15ijqa:0 100% 95%;--x102e8l1:0 100% 89%;--xvmjo8g:0 100% 83%;--xxigpro:0 100% 76%;--x1lr085o:0 100% 71%;--xytxotf:0 94% 65%;--x1qd1nj:0 86% 59%;--x1ocdf9f:0 74% 54%;--x5jqv7y:0 65% 48%;--x1lf7xix:0 65% 42%;--x1u2bq02:0 65% 36%;--x1ko49o4:0 66% 30%;--xknlmxn:336 100% 97%;--x1kecqyp:336 100% 94%;--x6z8631:338 91% 87%;--x1ptjy7r:339 90% 81%;--x9bw62t:339 88% 74%;--x1sgapxg:339 82% 67%;--x1y484zm:339 76% 59%;--x1hc4vzt:339 67% 52%;--x1jzr6tr:339 68% 45%;--xmwp5lj:339 69% 38%;--x1nehrvj:339 70% 32%;--xxv5tur:339 69% 27%;--xwo8fxp:339 70% 21%;--xgtkkh7:280 67% 96%;--x16sbb60:287 77% 92%;--x12xm1h6:288 86% 86%;--xhj18ei:289 85% 78%;--x1r68s7o:288 83% 71%;--x13wd9lk:288 75% 64%;--x1zq46f:288 67% 58%;--xd665oj:288 56% 52%;--x1cwcq1q:288 54% 46%;--x1w0fisd:288 54% 40%;--xa64uiz:288 55% 33%;--x1igtwos:288 56% 26%;--xzmvq4i:288 55% 20%;--x5p669s:252 100% 97%;--x1okk00l:257 100% 93%;--x1qwbts7:256 100% 87%;--x11epccb:255 94% 79%;--x1yc71x1:255 93% 72%;--x1xq9q29:255 91% 67%;--x1nm74ce:255 86% 63%;--xfgt7i8:255 78% 60%;--xhala9o:255 67% 55%;--xzcgphm:255 53% 50%;--xkvrifn:255 53% 44%;--x4cm2k4:255 53% 37%;--xg3d7w6:255 53% 31%;--xg52tuh:223 100% 96%;--x1mb9kh5:225 100% 93%;--xxnmm21:228 100% 86%;--xbd1umm:228 100% 78%;--x9hjxz6:228 96% 72%;--x7o2y5a:228 94% 67%;--x7nbb8x:228 89% 63%;--xpcqu2x:228 81% 59%;--xpx0z4g:228 69% 55%;--x1w3i4gw:230 57% 50%;--x1hchauc:230 57% 43%;--xbx05wb:230 57% 37%;--x1dvvi2n:230 57% 30%;--x16ei9z8:205 100% 95%;--x10rfy3o:206 100% 91%;--x1knyb98:206 100% 82%;--xq5i0ow:206 96% 72%;--x1thxrxk:207 91% 64%;--xrogh10:207 86% 57%;--xchx9if:208 80% 52%;--x8kijkw:208 77% 47%;--x1qap5je:209 77% 43%;--x1ds60pk:209 75% 38%;--x1gnqu8z:209 76% 32%;--x18vlpt4:209 75% 27%;--xmg6bzo:209 76% 21%;--x1t3wnj7:185 81% 94%;--x1oalpdo:185 84% 88%;--xsxlw0d:186 77% 77%;--x19q9i6u:187 74% 65%;--x1j3wl9t:187 69% 55%;--x1wf8d0p:188 72% 47%;--xviqjl5:187 80% 42%;--xcqiyy:188 83% 37%;--x5uu0mb:189 85% 32%;--xbw5sku:189 85% 28%;--xsml6q5:189 84% 23%;--x1q8hmy:190 84% 17%;--x2rlfop:189 84% 12%;--x1f6ovgo:161 79% 95%;--x1llezfl:160 85% 87%;--x17jxy36:162 78% 77%;--xb2v82l:162 72% 65%;--x1dfbkad:162 68% 54%;--xmqizi5:162 73% 46%;--x1yyt21d:162 82% 40%;--x1vfohxt:162 87% 35%;--x8733yl:162 88% 30%;--xzvks5j:162 88% 26%;--x1gy6tgw:162 89% 21%;--x8rjmwm:162 88% 16%;--xubhqd8:163 89% 11%;--x17erpej:131 67% 95%;--xhgm50l:128 76% 90%;--x1s4gnm9:128 71% 82%;--x4a8x0:129 68% 73%;--x2qud0:130 61% 64%;--xjx73wb:130 57% 56%;--x1bbuk3z:131 50% 50%;--x1czu1a6:131 53% 46%;--x6wen3m:131 54% 40%;--x1p01cv1:132 52% 35%;--x6o2ox3:132 52% 29%;--x1uto70g:132 53% 22%;--x16tzaxm:131 53% 16%;--x1guqeh6:79 81% 94%;--x1xg5rly:80 83% 88%;--xt528w5:81 81% 80%;--xbtqi33:82 75% 69%;--x102kj8h:83 73% 59%;--x1bnots4:84 69% 51%;--xmk6wf8:85 74% 45%;--x1k7lxoi:85 79% 40%;--x11wea82:86 84% 36%;--x1e270ic:85 84% 32%;--x1e6y9ut:85 83% 26%;--xqsz3yo:85 83% 21%;--x1wllptj:85 84% 15%;--x18rrqpj:50 100% 93%;--x17ns7ny:49 100% 87%;--x14wiqqu:49 100% 80%;--x1g8bwut:48 100% 70%;--x1b7hfdz:47 100% 62%;--x1ackil:45 97% 54%;--x1w7ynse:42 96% 50%;--x1ojv9xa:39 100% 48%;--x1nh1e0h:35 100% 47%;--xg5xsn2:31 100% 45%;--xiv5ced:31 100% 35%;--x1lyfw4e:31 100% 25%;--x8g6c8i:31 100% 20%;--x1glfzdj:34 100% 95%;--x1fnlhn8:33 100% 90%;--x1llzohr:33 100% 83%;--xszyzqu:32 100% 74%;--x148vyi8:31 100% 65%;--x1pu4196:29 100% 58%;--xwgvleb:27 98% 54%;--xqeb787:24 94% 50%;--x1xzpeo9:21 90% 48%;--x1owoglg:17 87% 45%;--x1g83duz:17 87% 40%;--xs7953m:17 87% 32%;--xix6cnn:17 87% 27%;--x13h62yj:48 100% 93%;--x3budp2:35 91% 86%;--x17eve4j:30 85% 79%;--xpmhqbk:27 80% 72%;--x193n8oi:25 75% 65%;--x19url8l:25 71% 57%;--xbakuua:25 70% 49%;--x1hum3tw:25 75% 42%;--xmdx3lo:25 75% 37%;--x3ba194:25 76% 31%;--x1dxu2ey:25 71% 26%;--xcsu7i4:25 66% 21%;--xo5zri9:25 65% 15%;--x17l2h1v:36 60% 95%;--x1ik2n53:32 44% 87%;--x8szzy1:28 40% 80%;--x1v80k07:28 38% 72%;--xuw2zhb:27 36% 65%;--x1gh25gw:28 34% 57%;--x1plivp5:28 32% 50%;--x1slg2e4:28 35% 43%;--xufnyoc:28 38% 37%;--xyjzfyt:27 42% 31%;--xvo7poh:25 48% 25%;--xvzksbq:23 58% 19%;--x17dxb5u:22 57% 16%;--x157769k:200 27% 98%;--xdi41ea:48 17% 88%;--x1mgy9b6:45 22% 79%;--x1ig7l4g:44 22% 69%;--x1ogfm5c:44 17% 62%;--x1pmp6kb:44 14% 54%;--xurejiy:42 14% 46%;--xct15tp:43 16% 39%;--xubhl9f:41 15% 32%;--xfz5zb5:43 14% 26%;--xn9a8u3:44 11% 20%;--x1g61c0q:60 6% 14%;--xl25y25:60 6% 7%;--xb58dxj:66 71% 95%;--x1gkekrb:64 69% 77%;--x1gpz67u:65 69% 59%;--xaeh432:65 61% 51%;--xb125di:63 61% 46%;--xk11ka9:60 62% 41%;--x19iez70:59 65% 36%;--x1gphoyw:56 67% 33%;--x1det66j:54 70% 29%;--x15cmkjj:54 69% 25%;--xn7kx5t:53 69% 22%;--x1rro31u:53 69% 18%;--xcm56bv:52 69% 13%;--x18mkh58:74 98% 84%;--x1qhe1sa:74 79% 78%;--xf0i4ga:74 68% 71%;--xl0yg51:75 62% 65%;--x1n3zgr7:74 56% 59%;--xp6ug0o:74 53% 53%;--x1vrdmbh:74 55% 47%;--x12m5sw1:74 66% 42%;--x1lexsze:74 79% 36%;--x15eiztk:73 90% 32%;--xumemws:73 91% 26%;--x179chkn:73 91% 21%;--x1j8jjph:73 90% 16%;}",
+      "ltr": ":root, .xc0ri92{--x6w7mb3:210 17% 98%;--x1ih1bek:210 17% 95%;--xixsm1q:210 16% 93%;--xehhxjz:210 14% 89%;--x1jd9bxl:210 14% 83%;--xsmpgwg:210 11% 71%;--x1xzikdo:210 7% 56%;--x1qwjrry:210 9% 31%;--x1olwv34:210 10% 23%;--x13m3okq:210 11% 15%;--x18roed0:214 14% 10%;--x17n17tl:216 16% 6%;--x118ecow:210 40% 2%;--x2vb7vv:200 27% 98%;--xh160pk:210 18% 96%;--xymdneo:210 11% 93%;--x11nvr3e:192 9% 89%;--x1sdx6bp:197 8% 83%;--xru1u51:202 5% 71%;--xomtjf5:200 3% 60%;--x1hdq1nh:180 2% 50%;--xhwxa11:160 1% 41%;--x1fqurk1:90 1% 31%;--x1bdz9vs:60 3% 22%;--x1gcm099:60 6% 14%;--x1x1edl5:60 6% 7%;--x1iuemvu:0 100% 98%;--x15ijqa:0 100% 95%;--x102e8l1:0 100% 89%;--xvmjo8g:0 100% 83%;--xxigpro:0 100% 76%;--x1lr085o:0 100% 71%;--xytxotf:0 94% 65%;--x1qd1nj:0 86% 59%;--x1ocdf9f:0 74% 54%;--x5jqv7y:0 65% 48%;--x1lf7xix:0 65% 42%;--x1u2bq02:0 65% 36%;--x1ko49o4:0 66% 30%;--xknlmxn:336 100% 97%;--x1kecqyp:336 100% 94%;--x6z8631:338 91% 87%;--x1ptjy7r:339 90% 81%;--x9bw62t:339 88% 74%;--x1sgapxg:339 82% 67%;--x1y484zm:339 76% 59%;--x1hc4vzt:339 67% 52%;--x1jzr6tr:339 68% 45%;--xmwp5lj:339 69% 38%;--x1nehrvj:339 70% 32%;--xxv5tur:339 69% 27%;--xwo8fxp:339 70% 21%;--xgtkkh7:280 67% 96%;--x16sbb60:287 77% 92%;--x12xm1h6:288 86% 86%;--xhj18ei:289 85% 78%;--x1r68s7o:288 83% 71%;--x13wd9lk:288 75% 64%;--x1zq46f:288 67% 58%;--xd665oj:288 56% 52%;--x1cwcq1q:288 54% 46%;--x1w0fisd:288 54% 40%;--xa64uiz:288 55% 33%;--x1igtwos:288 56% 26%;--xzmvq4i:288 55% 20%;--x5p669s:252 100% 97%;--x1okk00l:257 100% 93%;--x1qwbts7:256 100% 87%;--x11epccb:255 94% 79%;--x1yc71x1:255 93% 72%;--x1xq9q29:255 91% 67%;--x1nm74ce:255 86% 63%;--xfgt7i8:255 78% 60%;--xhala9o:255 67% 55%;--xzcgphm:255 53% 50%;--xkvrifn:255 53% 44%;--x4cm2k4:255 53% 37%;--xg3d7w6:255 53% 31%;--xg52tuh:223 100% 96%;--x1mb9kh5:225 100% 93%;--xxnmm21:228 100% 86%;--xbd1umm:228 100% 78%;--x9hjxz6:228 96% 72%;--x7o2y5a:228 94% 67%;--x7nbb8x:228 89% 63%;--xpcqu2x:228 81% 59%;--xpx0z4g:228 69% 55%;--x1w3i4gw:230 57% 50%;--x1hchauc:230 57% 43%;--xbx05wb:230 57% 37%;--x1dvvi2n:230 57% 30%;--x16ei9z8:205 100% 95%;--x10rfy3o:206 100% 91%;--x1knyb98:206 100% 82%;--xq5i0ow:206 96% 72%;--x1thxrxk:207 91% 64%;--xrogh10:207 86% 57%;--xchx9if:208 80% 52%;--x8kijkw:208 77% 47%;--x1qap5je:209 77% 43%;--x1ds60pk:209 75% 38%;--x1gnqu8z:209 76% 32%;--x18vlpt4:209 75% 27%;--xmg6bzo:209 76% 21%;--x1t3wnj7:185 81% 94%;--x1oalpdo:185 84% 88%;--xsxlw0d:186 77% 77%;--x19q9i6u:187 74% 65%;--x1j3wl9t:187 69% 55%;--x1wf8d0p:188 72% 47%;--xviqjl5:187 80% 42%;--xcqiyy:188 83% 37%;--x5uu0mb:189 85% 32%;--xbw5sku:189 85% 28%;--xsml6q5:189 84% 23%;--x1q8hmy:190 84% 17%;--x2rlfop:189 84% 12%;--x1f6ovgo:161 79% 95%;--x1llezfl:160 85% 87%;--x17jxy36:162 78% 77%;--xb2v82l:162 72% 65%;--x1dfbkad:162 68% 54%;--xmqizi5:162 73% 46%;--x1yyt21d:162 82% 40%;--x1vfohxt:162 87% 35%;--x8733yl:162 88% 30%;--xzvks5j:162 88% 26%;--x1gy6tgw:162 89% 21%;--x8rjmwm:162 88% 16%;--xubhqd8:163 89% 11%;--x17erpej:131 67% 95%;--xhgm50l:128 76% 90%;--x1s4gnm9:128 71% 82%;--x4a8x0:129 68% 73%;--x2qud0:130 61% 64%;--xjx73wb:130 57% 56%;--x1bbuk3z:131 50% 50%;--x1czu1a6:131 53% 46%;--x6wen3m:131 54% 40%;--x1p01cv1:132 52% 35%;--x6o2ox3:132 52% 29%;--x1uto70g:132 53% 22%;--x16tzaxm:131 53% 16%;--x1guqeh6:79 81% 94%;--x1xg5rly:80 83% 88%;--xt528w5:81 81% 80%;--xbtqi33:82 75% 69%;--x102kj8h:83 73% 59%;--x1bnots4:84 69% 51%;--xmk6wf8:85 74% 45%;--x1k7lxoi:85 79% 40%;--x11wea82:86 84% 36%;--x1e270ic:85 84% 32%;--x1e6y9ut:85 83% 26%;--xqsz3yo:85 83% 21%;--x1wllptj:85 84% 15%;--x18rrqpj:50 100% 93%;--x17ns7ny:49 100% 87%;--x14wiqqu:49 100% 80%;--x1g8bwut:48 100% 70%;--x1b7hfdz:47 100% 62%;--x1ackil:45 97% 54%;--x1w7ynse:42 96% 50%;--x1ojv9xa:39 100% 48%;--x1nh1e0h:35 100% 47%;--xg5xsn2:31 100% 45%;--xiv5ced:31 100% 35%;--x1lyfw4e:31 100% 25%;--x8g6c8i:31 100% 20%;--x1glfzdj:34 100% 95%;--x1fnlhn8:33 100% 90%;--x1llzohr:33 100% 83%;--xszyzqu:32 100% 74%;--x148vyi8:31 100% 65%;--x1pu4196:29 100% 58%;--xwgvleb:27 98% 54%;--xqeb787:24 94% 50%;--x1xzpeo9:21 90% 48%;--x1owoglg:17 87% 45%;--x1g83duz:17 87% 40%;--xs7953m:17 87% 32%;--xix6cnn:17 87% 27%;--x13h62yj:48 100% 93%;--x3budp2:35 91% 86%;--x17eve4j:30 85% 79%;--xpmhqbk:27 80% 72%;--x193n8oi:25 75% 65%;--x19url8l:25 71% 57%;--xbakuua:25 70% 49%;--x1hum3tw:25 75% 42%;--xmdx3lo:25 75% 37%;--x3ba194:25 76% 31%;--x1dxu2ey:25 71% 26%;--xcsu7i4:25 66% 21%;--xo5zri9:25 65% 15%;--x17l2h1v:36 60% 95%;--x1ik2n53:32 44% 87%;--x8szzy1:28 40% 80%;--x1v80k07:28 38% 72%;--xuw2zhb:27 36% 65%;--x1gh25gw:28 34% 57%;--x1plivp5:28 32% 50%;--x1slg2e4:28 35% 43%;--xufnyoc:28 38% 37%;--xyjzfyt:27 42% 31%;--xvo7poh:25 48% 25%;--xvzksbq:23 58% 19%;--x17dxb5u:22 57% 16%;--x157769k:200 27% 98%;--xdi41ea:48 17% 88%;--x1mgy9b6:45 22% 79%;--x1ig7l4g:44 22% 69%;--x1ogfm5c:44 17% 62%;--x1pmp6kb:44 14% 54%;--xurejiy:42 14% 46%;--xct15tp:43 16% 39%;--xubhl9f:41 15% 32%;--xfz5zb5:43 14% 26%;--xn9a8u3:44 11% 20%;--x1g61c0q:60 6% 14%;--xl25y25:60 6% 7%;--xb58dxj:66 71% 95%;--x1gkekrb:64 69% 77%;--x1gpz67u:65 69% 59%;--xaeh432:65 61% 51%;--xb125di:63 61% 46%;--xk11ka9:60 62% 41%;--x19iez70:59 65% 36%;--x1gphoyw:56 67% 33%;--x1det66j:54 70% 29%;--x15cmkjj:54 69% 25%;--xn7kx5t:53 69% 22%;--x1rro31u:53 69% 18%;--xcm56bv:52 69% 13%;--x18mkh58:74 98% 84%;--x1qhe1sa:74 79% 78%;--xf0i4ga:74 68% 71%;--xl0yg51:75 62% 65%;--x1n3zgr7:74 56% 59%;--xp6ug0o:74 53% 53%;--x1vrdmbh:74 55% 47%;--x12m5sw1:74 66% 42%;--x1lexsze:74 79% 36%;--x15eiztk:73 90% 32%;--xumemws:73 91% 26%;--x179chkn:73 91% 21%;--x1j8jjph:73 90% 16%;}",
       "rtl": null,
     },
     0,
@@ -1395,7 +1395,7 @@ exports[`commonJS results of exported styles and variables colorsOKLCH.stylex.js
   [
     "x1xvrx1y",
     {
-      "ltr": ":root{--x14exnge:99% .03;--x1mtj3tc:95% .06;--x1jy4cp6:88% .12;--x1v3it4q:80% .14;--x12osi74:74% .16;--xt56mcx:68% .19;--xwr729m:63% .20;--x1wizxzv:58% .21;--xzyjf9w:53% .20;--xayx3h4:49% .19;--x2xwirh:42% .17;--x1wibhe8:35% .15;--x1ou64m5:27% .12;--xe8uy3l:20% .09;--x3mszq1:14% .07;--x1cb4rob:11% .05;--xomcwl1:65% .3;}",
+      "ltr": ":root, .x1xvrx1y{--x14exnge:99% .03;--x1mtj3tc:95% .06;--x1jy4cp6:88% .12;--x1v3it4q:80% .14;--x12osi74:74% .16;--xt56mcx:68% .19;--xwr729m:63% .20;--x1wizxzv:58% .21;--xzyjf9w:53% .20;--xayx3h4:49% .19;--x2xwirh:42% .17;--x1wibhe8:35% .15;--x1ou64m5:27% .12;--xe8uy3l:20% .09;--x3mszq1:14% .07;--x1cb4rob:11% .05;--xomcwl1:65% .3;}",
       "rtl": null,
     },
     0,
@@ -1436,7 +1436,7 @@ exports[`commonJS results of exported styles and variables colorsOKLCHHues.style
   [
     "x1shiy44",
     {
-      "ltr": ":root{--x1xpszto:25;--x1q8jelq:350;--xgvgxlr:310;--xbexeya:290;--x1xvxfy3:270;--x28kzlq:240;--x1k13omg:210;--x129ybs8:185;--x138pnpi:145;--xt6kxm6:125;--x1pjav1k:100;--x1nftbv8:75;}",
+      "ltr": ":root, .x1shiy44{--x1xpszto:25;--x1q8jelq:350;--xgvgxlr:310;--xbexeya:290;--x1xvxfy3:270;--x28kzlq:240;--x1k13omg:210;--x129ybs8:185;--x138pnpi:145;--xt6kxm6:125;--x1pjav1k:100;--x1nftbv8:75;}",
       "rtl": null,
     },
     0,
@@ -1525,7 +1525,7 @@ exports[`commonJS results of exported styles and variables easings.stylex.js 2`]
   [
     "xdsoqlr",
     {
-      "ltr": ":root{--x1e14lbr:cubic-bezier(.25, 0, .5, 1);--x1o9kc5h:cubic-bezier(.25, 0, .4, 1);--x1ykp4cl:cubic-bezier(.25, 0, .3, 1);--xq5s7df:cubic-bezier(.25, 0, .2, 1);--xpudtma:cubic-bezier(.25, 0, .1, 1);--xb6ikgw:cubic-bezier(.25, 0, 1, 1);--xbsrsj0:cubic-bezier(.50, 0, 1, 1);--x3udct8:cubic-bezier(.70, 0, 1, 1);--xs50r7o:cubic-bezier(.90, 0, 1, 1);--x1uxalto:cubic-bezier(1, 0, 1, 1);--xk4vstc:cubic-bezier(0, 0, .75, 1);--x3tmsf0:cubic-bezier(0, 0, .50, 1);--xpr1u9v:cubic-bezier(0, 0, .3, 1);--xwkz3iy:cubic-bezier(0, 0, .1, 1);--x1wg5c7p:cubic-bezier(0, 0, 0, 1);--x7k49zx:cubic-bezier(.1, 0, .9, 1);--x1sa1jyc:cubic-bezier(.3, 0, .7, 1);--x6gv0p4:cubic-bezier(.5, 0, .5, 1);--x1rkj6nh:cubic-bezier(.7, 0, .3, 1);--x1vyk24l:cubic-bezier(.9, 0, .1, 1);--xsrmixm:cubic-bezier(.5, .75, .75, 1.25);--x17ag71c:cubic-bezier(.5, 1, .75, 1.25);--x1668mi7:cubic-bezier(.5, 1.25, .75, 1.25);--x1m5usp1:cubic-bezier(.5, 1.5, .75, 1.25);--x1tjawp3:cubic-bezier(.5, 1.75, .75, 1.25);--x1qtd5rm:cubic-bezier(.5, -0.25, .75, 1);--x832zgl:cubic-bezier(.5, -0.50, .75, 1);--x15jl3my:cubic-bezier(.5, -0.75, .75, 1);--x1g90qsa:cubic-bezier(.5, -1.00, .75, 1);--xv5rzqa:cubic-bezier(.5, -1.25, .75, 1);--x6n4o8x:cubic-bezier(.5, -.1, .1, 1.5);--xg36ngc:cubic-bezier(.5, -.3, .1, 1.5);--x1rv6ukv:cubic-bezier(.5, -.5, .1, 1.5);--xxa6apx:cubic-bezier(.5, -.7, .1, 1.5);--x1xeiehs:cubic-bezier(.5, -.9, .1, 1.5);--x10vgurc:steps(2);--x1leqpo7:steps(3);--x1pq1pvb:steps(4);--x19z9hh5:steps(7);--x14yp0s0:steps(10);--x1gnehdi:linear(
+      "ltr": ":root, .xdsoqlr{--x1e14lbr:cubic-bezier(.25, 0, .5, 1);--x1o9kc5h:cubic-bezier(.25, 0, .4, 1);--x1ykp4cl:cubic-bezier(.25, 0, .3, 1);--xq5s7df:cubic-bezier(.25, 0, .2, 1);--xpudtma:cubic-bezier(.25, 0, .1, 1);--xb6ikgw:cubic-bezier(.25, 0, 1, 1);--xbsrsj0:cubic-bezier(.50, 0, 1, 1);--x3udct8:cubic-bezier(.70, 0, 1, 1);--xs50r7o:cubic-bezier(.90, 0, 1, 1);--x1uxalto:cubic-bezier(1, 0, 1, 1);--xk4vstc:cubic-bezier(0, 0, .75, 1);--x3tmsf0:cubic-bezier(0, 0, .50, 1);--xpr1u9v:cubic-bezier(0, 0, .3, 1);--xwkz3iy:cubic-bezier(0, 0, .1, 1);--x1wg5c7p:cubic-bezier(0, 0, 0, 1);--x7k49zx:cubic-bezier(.1, 0, .9, 1);--x1sa1jyc:cubic-bezier(.3, 0, .7, 1);--x6gv0p4:cubic-bezier(.5, 0, .5, 1);--x1rkj6nh:cubic-bezier(.7, 0, .3, 1);--x1vyk24l:cubic-bezier(.9, 0, .1, 1);--xsrmixm:cubic-bezier(.5, .75, .75, 1.25);--x17ag71c:cubic-bezier(.5, 1, .75, 1.25);--x1668mi7:cubic-bezier(.5, 1.25, .75, 1.25);--x1m5usp1:cubic-bezier(.5, 1.5, .75, 1.25);--x1tjawp3:cubic-bezier(.5, 1.75, .75, 1.25);--x1qtd5rm:cubic-bezier(.5, -0.25, .75, 1);--x832zgl:cubic-bezier(.5, -0.50, .75, 1);--x15jl3my:cubic-bezier(.5, -0.75, .75, 1);--x1g90qsa:cubic-bezier(.5, -1.00, .75, 1);--xv5rzqa:cubic-bezier(.5, -1.25, .75, 1);--x6n4o8x:cubic-bezier(.5, -.1, .1, 1.5);--xg36ngc:cubic-bezier(.5, -.3, .1, 1.5);--x1rv6ukv:cubic-bezier(.5, -.5, .1, 1.5);--xxa6apx:cubic-bezier(.5, -.7, .1, 1.5);--x1xeiehs:cubic-bezier(.5, -.9, .1, 1.5);--x10vgurc:steps(2);--x1leqpo7:steps(3);--x1pq1pvb:steps(4);--x19z9hh5:steps(7);--x14yp0s0:steps(10);--x1gnehdi:linear(
       0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
       0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
       1.001
@@ -1644,7 +1644,7 @@ exports[`commonJS results of exported styles and variables fonts.stylex.js 2`] =
   [
     "x2eykj1",
     {
-      "ltr": ":root{--x1q71073:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--xfvs3xa:ui-serif,serif;--xoq7w3g:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--xuhqzaw:100;--x1vpx6q:200;--x1tfinms:300;--xlvgxm8:400;--x1ptb8zq:500;--xtblcaf:600;--x18wmnkn:700;--x1u21cuz:800;--x1friz9z:900;--xl05amt:.95;--x3ta65r:1.1;--xpbmc25:1.25;--xt1fs4w:1.375;--x1tjg5is:1.5;--x18dp253:1.75;--x1gr5rvv:2;--x8wksiv:-.05em;--x11b87zf:.025em;--x1ui74c2:.050em;--xnzqs7t:.075em;--x19sn613:.150em;--xqk1qx4:.500em;--xevygkm:.750em;--x1clekq2:1em;--xkyxx9v:.5rem;--xvc51p2:.75rem;--x1fmjzgv:1rem;--x1tc4mim:1.1rem;--x1y948ji:1.25rem;--x1e96w92:1.5rem;--x1gx7r6k:2rem;--x1mobfil:2.5rem;--x14epznc:3rem;--xjgnr78:3.5rem;--x147pgvz:clamp(.75rem, 2vw, 1rem);--xdcznox:clamp(1rem, 4vw, 1.5rem);--x1jukq44:clamp(1.5rem, 6vw, 2.5rem);--xud2k9:clamp(2rem, 9vw, 3.5rem);}",
+      "ltr": ":root, .x2eykj1{--x1q71073:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--xfvs3xa:ui-serif,serif;--xoq7w3g:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--xuhqzaw:100;--x1vpx6q:200;--x1tfinms:300;--xlvgxm8:400;--x1ptb8zq:500;--xtblcaf:600;--x18wmnkn:700;--x1u21cuz:800;--x1friz9z:900;--xl05amt:.95;--x3ta65r:1.1;--xpbmc25:1.25;--xt1fs4w:1.375;--x1tjg5is:1.5;--x18dp253:1.75;--x1gr5rvv:2;--x8wksiv:-.05em;--x11b87zf:.025em;--x1ui74c2:.050em;--xnzqs7t:.075em;--x19sn613:.150em;--xqk1qx4:.500em;--xevygkm:.750em;--x1clekq2:1em;--xkyxx9v:.5rem;--xvc51p2:.75rem;--x1fmjzgv:1rem;--x1tc4mim:1.1rem;--x1y948ji:1.25rem;--x1e96w92:1.5rem;--x1gx7r6k:2rem;--x1mobfil:2.5rem;--x14epznc:3rem;--xjgnr78:3.5rem;--x147pgvz:clamp(.75rem, 2vw, 1rem);--xdcznox:clamp(1rem, 4vw, 1.5rem);--x1jukq44:clamp(1.5rem, 6vw, 2.5rem);--xud2k9:clamp(2rem, 9vw, 3.5rem);}",
       "rtl": null,
     },
     0,
@@ -1713,7 +1713,7 @@ exports[`commonJS results of exported styles and variables gradients.stylex.js 2
   [
     "x6ecbot",
     {
-      "ltr": ":root{--xp4wc26:linear-gradient(to bottom right,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);--xrh5j6x:linear-gradient(to bottom right,#48005c, #8300e2, #a269ff);--x18nq9xi:
+      "ltr": ":root, .x6ecbot{--xp4wc26:linear-gradient(to bottom right,#1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b);--xrh5j6x:linear-gradient(to bottom right,#48005c, #8300e2, #a269ff);--x18nq9xi:
       radial-gradient(
         circle at top right,
         hsl(180 100% 50%), hsl(180 100% 50% / 0%)
@@ -1788,7 +1788,7 @@ exports[`commonJS results of exported styles and variables grayOKLCH.stylex.js 2
   [
     "x4qq4ro",
     {
-      "ltr": ":root{--x1r8db9y:99%;--x1539giv:95%;--x1wc3b5e:88%;--x1mjp29e:80%;--x1w8nt4b:74%;--xdwh0te:68%;--x1ce41rg:63%;--x6ar2cm:58%;--x13qaqud:53%;--x1lc6icy:49%;--xo11tc2:43%;--x190f7u2:37%;--x1g112n0:31%;--x1juan1k:25%;--x1g07krd:18%;--x1n3igy5:10%;}",
+      "ltr": ":root, .x4qq4ro{--x1r8db9y:99%;--x1539giv:95%;--x1wc3b5e:88%;--x1mjp29e:80%;--x1w8nt4b:74%;--xdwh0te:68%;--x1ce41rg:63%;--x6ar2cm:58%;--x13qaqud:53%;--x1lc6icy:49%;--xo11tc2:43%;--x190f7u2:37%;--x1g112n0:31%;--x1juan1k:25%;--x1g07krd:18%;--x1n3igy5:10%;}",
       "rtl": null,
     },
     0,
@@ -1824,7 +1824,7 @@ exports[`commonJS results of exported styles and variables highlights.stylex.js
   [
     "x916mmj",
     {
-      "ltr": ":root{--xlazqa6:10px;--x1g77vpg:hsl(0 0% 0% / 20%);--x11bt0u6:0 0 0 10px hsl(0 0% 0% / 20%);}",
+      "ltr": ":root, .x916mmj{--xlazqa6:10px;--x1g77vpg:hsl(0 0% 0% / 20%);--x11bt0u6:0 0 0 10px hsl(0 0% 0% / 20%);}",
       "rtl": null,
     },
     0,
@@ -1832,7 +1832,7 @@ exports[`commonJS results of exported styles and variables highlights.stylex.js
   [
     "x916mmj-1lveb7",
     {
-      "ltr": "@media (prefers-color-scheme: dark){:root{--x1g77vpg:hsl(0 0% 100% / 20%);--x11bt0u6:0 0 0 10px hsl(0 0% 100% / 20%);}}",
+      "ltr": "@media (prefers-color-scheme: dark){:root, .x916mmj{--x1g77vpg:hsl(0 0% 100% / 20%);--x11bt0u6:0 0 0 10px hsl(0 0% 100% / 20%);}}",
       "rtl": null,
     },
     0.1,
@@ -1878,7 +1878,7 @@ exports[`commonJS results of exported styles and variables layouts.stylex.js 2`]
   [
     "x1g8f3v0",
     {
-      "ltr": ":root{--x1f7j5v7:[stack] 1fr / [stack] 1fr;--xu7dx3s:stack;--xs0hnus:repeat(auto-fit, minmax(min(0, 100%), 1fr));--xzsprd7:auto 1fr auto / auto 1fr auto;--xplbd01:100vw;--xfgzfod:100%;--xut1aks:100vw;--x13vqd9u:1024px;--x1q3dbq9:5;--xpm3c7f:480px;--xqurbyj:2;--xw9w9r6:repeat(auto-fill,
+      "ltr": ":root, .x1g8f3v0{--x1f7j5v7:[stack] 1fr / [stack] 1fr;--xu7dx3s:stack;--xs0hnus:repeat(auto-fit, minmax(min(0, 100%), 1fr));--xzsprd7:auto 1fr auto / auto 1fr auto;--xplbd01:100vw;--xfgzfod:100%;--xut1aks:100vw;--x13vqd9u:1024px;--x1q3dbq9:5;--xpm3c7f:480px;--xqurbyj:2;--xw9w9r6:repeat(auto-fill,
         minmax(
           clamp(
             clamp(
@@ -1928,7 +1928,7 @@ exports[`commonJS results of exported styles and variables masksCornerCuts.style
   [
     "xi3n4kz",
     {
-      "ltr": ":root{--x1kvfogc:radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem;--xdba12c:radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem;--xozyv2b:radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem;--x1ppcnoa:conic-gradient(at calc(2 * 1rem) calc(2 * 1rem), #000 75%, #0000 0) -1rem -1rem;--xsfaykt:conic-gradient(at calc(2 * 2rem) calc(2 * 2rem), #000 75%, #0000 0) -2rem -2rem;--x1rfdwb4:conic-gradient(at calc(2 * 4rem) calc(2 * 4rem), #000 75%, #0000 0) -4rem -4rem;--x1sde5ez:
+      "ltr": ":root, .xi3n4kz{--x1kvfogc:radial-gradient(1rem at 1rem 1rem,#0000 99%,#000) -1rem -1rem;--xdba12c:radial-gradient(2rem at 2rem 2rem,#0000 99%,#000) -2rem -2rem;--xozyv2b:radial-gradient(4rem at 4rem 4rem,#0000 99%,#000) -4rem -4rem;--x1ppcnoa:conic-gradient(at calc(2 * 1rem) calc(2 * 1rem), #000 75%, #0000 0) -1rem -1rem;--xsfaykt:conic-gradient(at calc(2 * 2rem) calc(2 * 2rem), #000 75%, #0000 0) -2rem -2rem;--x1rfdwb4:conic-gradient(at calc(2 * 4rem) calc(2 * 4rem), #000 75%, #0000 0) -4rem -4rem;--x1sde5ez:
       conic-gradient(from -45deg at 1rem 1rem, #0000 25%, #000 0)
       -1rem 0 / 100% 51% repeat-x,
       conic-gradient(from 135deg at 1rem calc(100% - 1rem), #0000 25%, #000 0)
@@ -1997,7 +1997,7 @@ exports[`commonJS results of exported styles and variables masksEdges.stylex.js
   [
     "x1v1u9bc",
     {
-      "ltr": ":root{--x1pdpr22:radial-gradient(20px at 50% 100%,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%;--x1tjf7n0:radial-gradient(20px at 50% 0,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%;--x3icuq1:radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% -20px/ calc(1.9 * 20px) 100%;--x1lms7mn:radial-gradient(20px at 0 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px);--x1464ow1:radial-gradient(20px at 100% 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px);--x12eo0ay:radial-gradient(20px at 20px 50%,#0000 97%,#000) -20px/ 100% calc(1.9 * 20px);--x15w39cc:
+      "ltr": ":root, .x1v1u9bc{--x1pdpr22:radial-gradient(20px at 50% 100%,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%;--x1tjf7n0:radial-gradient(20px at 50% 0,#0000 97%,#000) 50% / calc(1.9 * 20px) 100%;--x3icuq1:radial-gradient(20px at 50% 20px,#0000 97%,#000) 50% -20px/ calc(1.9 * 20px) 100%;--x1lms7mn:radial-gradient(20px at 0 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px);--x1464ow1:radial-gradient(20px at 100% 50%,#0000 97%,#000) 50%/ 100% calc(1.9 * 20px);--x12eo0ay:radial-gradient(20px at 20px 50%,#0000 97%,#000) -20px/ 100% calc(1.9 * 20px);--x15w39cc:
     radial-gradient(farthest-side,#000 97%,#0000) 0 0 / 20px 20px round,
     linear-gradient(#000 0 0) 50%/calc(100% - 20px) calc(100% - 20px) no-repeat
   ;--x12nuj25:
@@ -2092,7 +2092,7 @@ exports[`commonJS results of exported styles and variables shadows.stylex.js 2`]
   [
     "xnkilpb",
     {
-      "ltr": ":root{--x1e1erjl:0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%));--x16af1ne:
+      "ltr": ":root, .xnkilpb{--x1e1erjl:0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%));--x16af1ne:
     0 3px 5px -2px hsl(220 3% 15% / calc(1% + 3%)),
     0 7px 14px -5px hsl(220 3% 15% / calc(1% + 5%));--xn7i8uw:
       0 -1px 3px 0 hsl(220 3% 15% / calc(1% + 2%)),
@@ -2126,7 +2126,7 @@ exports[`commonJS results of exported styles and variables shadows.stylex.js 2`]
   [
     "xnkilpb-1lveb7",
     {
-      "ltr": "@media (prefers-color-scheme: dark){:root{--x1e1erjl:0 1px 2px -1px hsl(220 40% 2% / calc(25% + 9%));--x16af1ne:
+      "ltr": "@media (prefers-color-scheme: dark){:root, .xnkilpb{--x1e1erjl:0 1px 2px -1px hsl(220 40% 2% / calc(25% + 9%));--x16af1ne:
     0 3px 5px -2px hsl(220 40% 2% / calc(25% + 3%)),
     0 7px 14px -5px hsl(220 40% 2% / calc(25% + 5%));--xn7i8uw:
     0 -1px 3px 0 hsl(220 40% 2% / calc(25% + 2%)),
@@ -2238,7 +2238,7 @@ exports[`commonJS results of exported styles and variables sizes.stylex.js 2`] =
   [
     "x1fwfsl1",
     {
-      "ltr": ":root{--x10c2mb0:-.5rem;--x1rigic1:-.25rem;--xf5dhsg:.25rem;--xei8mgy:.5rem;--xnnz86x:1rem;--xxyc3p4:1.25rem;--x5jweno:1.5rem;--x7eyatk:1.75rem;--xccvhc4:2rem;--x1wku7qf:3rem;--x1wacyrj:4rem;--x1nv1xt7:5rem;--xe4mdns:7.5rem;--x4h7nxk:10rem;--x1rekwlc:15rem;--xdplmc:20rem;--x1cejz3h:30rem;--xkc5xg9:clamp(.5rem, 1vw, 1rem);--xweq03e:clamp(1rem, 2vw, 1.5rem);--xd967u6:clamp(1.5rem, 3vw, 2rem);--xfiwhl0:clamp(2rem, 4vw, 3rem);--xunc2kr:clamp(4rem, 5vw, 5rem);--xy30rbg:clamp(5rem, 7vw, 7.5rem);--x83h2ny:clamp(7.5rem, 10vw, 10rem);--x1ghjfbc:clamp(10rem, 20vw, 15rem);--xywjja0:clamp(15rem, 30vw, 20rem);--x1xsg4hw:clamp(20rem, 40vw, 30rem);--x1024npx:20ch;--xb0he92:45ch;--x8yvubs:60ch;--x3ciwww:20ch;--x1tb70fj:25ch;--xmfgt3w:35ch;--x18sc4l3:240px;--x8tqzst:360px;--xhrh6dk:480px;--xmcuqcs:768px;--xbfrxss:1024px;--xwqk27:1440px;--x1c2s3yf:1920px;--xbg94ra:-.5ch;--x65nl7c:-.25ch;--xfmqfi3:.25ch;--x1454zi4:.5ch;--x19o0ad0:1ch;--xuqcu4i:1.25ch;--xhoyn7d:1.5ch;--xyyv8g1:1.75ch;--x1ytxoxw:2ch;--xntq519:3ch;--x1is3opf:4ch;--xmpf0z3:5ch;--xcslx1p:7.5ch;--x1n3aqit:10ch;--x1sjgdge:15ch;--x1opc873:20ch;--x9felbm:30ch;}",
+      "ltr": ":root, .x1fwfsl1{--x10c2mb0:-.5rem;--x1rigic1:-.25rem;--xf5dhsg:.25rem;--xei8mgy:.5rem;--xnnz86x:1rem;--xxyc3p4:1.25rem;--x5jweno:1.5rem;--x7eyatk:1.75rem;--xccvhc4:2rem;--x1wku7qf:3rem;--x1wacyrj:4rem;--x1nv1xt7:5rem;--xe4mdns:7.5rem;--x4h7nxk:10rem;--x1rekwlc:15rem;--xdplmc:20rem;--x1cejz3h:30rem;--xkc5xg9:clamp(.5rem, 1vw, 1rem);--xweq03e:clamp(1rem, 2vw, 1.5rem);--xd967u6:clamp(1.5rem, 3vw, 2rem);--xfiwhl0:clamp(2rem, 4vw, 3rem);--xunc2kr:clamp(4rem, 5vw, 5rem);--xy30rbg:clamp(5rem, 7vw, 7.5rem);--x83h2ny:clamp(7.5rem, 10vw, 10rem);--x1ghjfbc:clamp(10rem, 20vw, 15rem);--xywjja0:clamp(15rem, 30vw, 20rem);--x1xsg4hw:clamp(20rem, 40vw, 30rem);--x1024npx:20ch;--xb0he92:45ch;--x8yvubs:60ch;--x3ciwww:20ch;--x1tb70fj:25ch;--xmfgt3w:35ch;--x18sc4l3:240px;--x8tqzst:360px;--xhrh6dk:480px;--xmcuqcs:768px;--xbfrxss:1024px;--xwqk27:1440px;--x1c2s3yf:1920px;--xbg94ra:-.5ch;--x65nl7c:-.25ch;--xfmqfi3:.25ch;--x1454zi4:.5ch;--x19o0ad0:1ch;--xuqcu4i:1.25ch;--xhoyn7d:1.5ch;--xyyv8g1:1.75ch;--x1ytxoxw:2ch;--xntq519:3ch;--x1is3opf:4ch;--xmpf0z3:5ch;--xcslx1p:7.5ch;--x1n3aqit:10ch;--x1sjgdge:15ch;--x1opc873:20ch;--x9felbm:30ch;}",
       "rtl": null,
     },
     0,
@@ -2270,7 +2270,7 @@ exports[`commonJS results of exported styles and variables svg.stylex.js 2`] = `
   [
     "x1eym2pk",
     {
-      "ltr": ":root{--x13zn0ov:url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 18.75 18.75, 0 75, 0 S 150, 18.75 150, 75 131.25, 150 75, 150 0, 131.25 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E");--xajwcke:url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 13.500000000000004 13.500000000000004, 0 75, 0 S 150, 13.500000000000004 150, 75 136.5, 150 75, 150 0, 136.5 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E");--x1crdnjy:url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 5.999999999999997 5.999999999999997, 0 75, 0 S 150, 5.999999999999997 150, 75 144, 150 75, 150 0, 144 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E");}",
+      "ltr": ":root, .x1eym2pk{--x13zn0ov:url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 18.75 18.75, 0 75, 0 S 150, 18.75 150, 75 131.25, 150 75, 150 0, 131.25 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E");--xajwcke:url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 13.500000000000004 13.500000000000004, 0 75, 0 S 150, 13.500000000000004 150, 75 136.5, 150 75, 150 0, 136.5 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E");--x1crdnjy:url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 5.999999999999997 5.999999999999997, 0 75, 0 S 150, 5.999999999999997 150, 75 144, 150 75, 150 0, 144 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E");}",
       "rtl": null,
     },
     0,
@@ -2305,7 +2305,7 @@ exports[`commonJS results of exported styles and variables zIndex.stylex.js 2`]
   [
     "x13e19nd",
     {
-      "ltr": ":root{--x14pxyhg:1;--x10r6eil:2;--x33targ:3;--xat9xnd:4;--xik18wj:5;--xxhdrl2:2147483647;}",
+      "ltr": ":root, .x13e19nd{--x14pxyhg:1;--x10r6eil:2;--x33targ:3;--xat9xnd:4;--xik18wj:5;--xxhdrl2:2147483647;}",
       "rtl": null,
     },
     0,
diff --git a/packages/shared/__tests__/create-theme/stylex-create-theme-by-group-test.js b/packages/shared/__tests__/create-theme/stylex-create-theme-by-group-test.js
new file mode 100644
index 00000000..01c03fe8
--- /dev/null
+++ b/packages/shared/__tests__/create-theme/stylex-create-theme-by-group-test.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import stylexCreateTheme from '../../src/stylex-create-theme';
+import * as t from '../../src/types';
+
+describe('stylex-create-theme test', () => {
+  test('overrides set of vars with CSS class', () => {
+    const defaultVars = {
+      __themeName__: 'TestTheme_stylex_js__buttonTheme_hash',
+      bgColor: 'var(--xgck17p)',
+      bgColorDisabled: 'var(--xpegid5)',
+      cornerRadius: 'var(--xrqfjmn)',
+      fgColor: 'var(--x4y59db)',
+    };
+
+    const createTheme = {
+      bgColor: {
+        default: 'green',
+        '@media (prefers-color-scheme: dark)': 'lightgreen',
+        '@media print': 'transparent',
+      },
+      bgColorDisabled: {
+        default: 'antiquewhite',
+        '@media (prefers-color-scheme: dark)': 'floralwhite',
+      },
+      cornerRadius: { default: '6px' },
+      fgColor: 'coral',
+    };
+
+    const [classNameOutput, cssOutput] = stylexCreateTheme(
+      defaultVars,
+      createTheme,
+    );
+
+    expect(defaultVars.__themeName__).toMatchInlineSnapshot(
+      '"TestTheme_stylex_js__buttonTheme_hash"',
+    );
+
+    expect(classNameOutput).toMatchInlineSnapshot(`
+      {
+        "$$css": true,
+        "TestTheme_stylex_js__buttonTheme_hash": "xtrlmmh TestTheme_stylex_js__buttonTheme_hash",
+      }
+    `);
+
+    expect(cssOutput[classNameOutput[defaultVars.__themeName__].split(' ')[0]])
+      .toMatchInlineSnapshot(`
+      {
+        "ltr": ".xtrlmmh, .xtrlmmh:root{--xgck17p:green;--xpegid5:antiquewhite;--xrqfjmn:6px;--x4y59db:coral;}",
+        "priority": 0.5,
+        "rtl": null,
+      }
+    `);
+  });
+
+  test('overrides set of literal vars with CSS class', () => {
+    const defaultVars = {
+      __themeName__: 'TestTheme_stylex_js__buttonTheme_hash',
+      '--bgColor': 'var(--bgColor)',
+      '--bgColorDisabled': 'var(--bgColorDisabled)',
+      '--cornerRadius': 'var(--cornerRadius)',
+      '--fgColor': 'var(--fgColor)',
+    };
+
+    const createTheme = {
+      '--bgColor': {
+        default: 'green',
+        '@media (prefers-color-scheme: dark)': 'lightgreen',
+        '@media print': 'transparent',
+      },
+      '--bgColorDisabled': {
+        default: 'antiquewhite',
+        '@media (prefers-color-scheme: dark)': 'floralwhite',
+      },
+      '--cornerRadius': { default: '6px' },
+      '--fgColor': 'coral',
+    };
+
+    const [classNameOutput, cssOutput] = stylexCreateTheme(
+      defaultVars,
+      createTheme,
+    );
+
+    expect(defaultVars.__themeName__).toMatchInlineSnapshot(
+      '"TestTheme_stylex_js__buttonTheme_hash"',
+    );
+
+    expect(classNameOutput).toMatchInlineSnapshot(`
+      {
+        "$$css": true,
+        "TestTheme_stylex_js__buttonTheme_hash": "x4znj40 TestTheme_stylex_js__buttonTheme_hash",
+      }
+    `);
+
+    expect(cssOutput[classNameOutput[defaultVars.__themeName__].split(' ')[0]])
+      .toMatchInlineSnapshot(`
+      {
+        "ltr": ".x4znj40, .x4znj40:root{--bgColor:green;--bgColorDisabled:antiquewhite;--cornerRadius:6px;--fgColor:coral;}",
+        "priority": 0.5,
+        "rtl": null,
+      }
+    `);
+  });
+
+  test('variables order does not change the hash', () => {
+    const defaultVars = {
+      __themeName__: 'TestTheme_stylex_js__buttonTheme_hash',
+      bgColor: 'var(--xgck17p)',
+      bgColorDisabled: 'var(--xpegid5)',
+      cornerRadius: 'var(--xrqfjmn)',
+      fgColor: 'var(--x4y59db)',
+    };
+
+    const createTheme1 = {
+      bgColor: {
+        default: 'green',
+        '@media (prefers-color-scheme: dark)': 'lightgreen',
+        '@media print': 'transparent',
+      },
+      bgColorDisabled: {
+        default: 'antiquewhite',
+        '@media (prefers-color-scheme: dark)': 'floralwhite',
+      },
+      cornerRadius: { default: '6px' },
+      fgColor: 'coral',
+    };
+
+    const createTheme2 = {
+      bgColorDisabled: {
+        default: 'antiquewhite',
+        '@media (prefers-color-scheme: dark)': 'floralwhite',
+      },
+      fgColor: { default: 'coral' },
+      bgColor: {
+        default: 'green',
+        '@media print': 'transparent',
+        '@media (prefers-color-scheme: dark)': 'lightgreen',
+      },
+      cornerRadius: '6px',
+    };
+
+    const [classNameOutput1] = stylexCreateTheme(defaultVars, createTheme1);
+
+    const [classNameOutput2] = stylexCreateTheme(defaultVars, createTheme2);
+
+    expect(defaultVars.__themeName__).toMatchInlineSnapshot(
+      '"TestTheme_stylex_js__buttonTheme_hash"',
+    );
+
+    expect(classNameOutput1[defaultVars.__themeName__].split(' ')[0]).toEqual(
+      classNameOutput2[defaultVars.__themeName__].split(' ')[0],
+    );
+  });
+
+  test('Adding an at-rule changes the hash', () => {
+    const defaultVars = {
+      __themeName__: 'TestTheme_stylex_js__buttonTheme_hash',
+      bgColor: 'var(--xgck17p)',
+    };
+
+    const createTheme1 = {
+      bgColor: 'green',
+    };
+
+    const createTheme2 = {
+      bgColor: {
+        default: 'green',
+        '@media (prefers-color-scheme: dark)': 'lightgreen',
+      },
+    };
+
+    const [classNameOutput1] = stylexCreateTheme(defaultVars, createTheme1);
+
+    const [classNameOutput2] = stylexCreateTheme(defaultVars, createTheme2);
+
+    expect(
+      classNameOutput1[defaultVars.__themeName__].split(' ')[0],
+    ).not.toEqual(classNameOutput2[defaultVars.__themeName__].split(' ')[0]);
+  });
+
+  test('Generates styles for nested at-rules', () => {
+    const defaultVars = {
+      __themeName__: 'TestTheme_stylex_js__buttonTheme_hash',
+      bgColor: 'var(--xgck17p)',
+    };
+
+    const createTheme = {
+      bgColor: {
+        default: {
+          default: 'green',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media (prefers-color-scheme: dark)': {
+          default: 'lightgreen',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.2 -0.4)',
+        },
+      },
+    };
+
+    const [_classNameOutput, cssOutput] = stylexCreateTheme(
+      defaultVars,
+      createTheme as $FlowFixMe,
+    );
+
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "x2y918k": {
+          "ltr": ".x2y918k, .x2y918k:root{--xgck17p:green;}",
+          "priority": 0.5,
+          "rtl": null,
+        },
+        "x2y918k-1e6ryz3": {
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){.x2y918k, .x2y918k:root{--xgck17p:oklab(0.7 -0.2 -0.4);}}}",
+          "priority": 0.7,
+          "rtl": null,
+        },
+        "x2y918k-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){.x2y918k, .x2y918k:root{--xgck17p:lightgreen;}}",
+          "priority": 0.6,
+          "rtl": null,
+        },
+        "x2y918k-kpd015": {
+          "ltr": "@supports (color: oklab(0 0 0)){.x2y918k, .x2y918k:root{--xgck17p:oklab(0.7 -0.3 -0.4);}}",
+          "priority": 0.6,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+
+  test('Generates styles for typed nested at-rules', () => {
+    const defaultVars = {
+      __themeName__: 'TestTheme_stylex_js__buttonTheme_hash',
+      bgColor: 'var(--xgck17p)',
+    };
+
+    const createTheme = {
+      bgColor: t.color({
+        default: {
+          default: 'green',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media (prefers-color-scheme: dark)': {
+          default: 'lightgreen',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.2 -0.4)',
+        },
+      }),
+    };
+
+    const [_classNameOutput, cssOutput] = stylexCreateTheme(
+      defaultVars,
+      createTheme as $FlowFixMe,
+    );
+
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "x2y918k": {
+          "ltr": ".x2y918k, .x2y918k:root{--xgck17p:green;}",
+          "priority": 0.5,
+          "rtl": null,
+        },
+        "x2y918k-1e6ryz3": {
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){.x2y918k, .x2y918k:root{--xgck17p:oklab(0.7 -0.2 -0.4);}}}",
+          "priority": 0.7,
+          "rtl": null,
+        },
+        "x2y918k-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){.x2y918k, .x2y918k:root{--xgck17p:lightgreen;}}",
+          "priority": 0.6,
+          "rtl": null,
+        },
+        "x2y918k-kpd015": {
+          "ltr": "@supports (color: oklab(0 0 0)){.x2y918k, .x2y918k:root{--xgck17p:oklab(0.7 -0.3 -0.4);}}",
+          "priority": 0.6,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+});
diff --git a/packages/shared/__tests__/stylex-create-theme-test.js b/packages/shared/__tests__/create-theme/stylex-create-theme-test.js
similarity index 88%
rename from packages/shared/__tests__/stylex-create-theme-test.js
rename to packages/shared/__tests__/create-theme/stylex-create-theme-test.js
index b9e7b1e7..cfcdc661 100644
--- a/packages/shared/__tests__/stylex-create-theme-test.js
+++ b/packages/shared/__tests__/create-theme/stylex-create-theme-test.js
@@ -7,8 +7,8 @@
  * @flow strict
  */
 
-import stylexCreateTheme from '../src/stylex-create-theme';
-import * as t from '../src/types';
+import stylexCreateTheme from '../../src/stylex-create-theme';
+import * as t from '../../src/types';
 
 describe('stylex-create-theme test', () => {
   test('overrides set of vars with CSS class', () => {
@@ -39,7 +39,11 @@ describe('stylex-create-theme test', () => {
       createTheme,
     );
 
-    expect(cssOutput[classNameOutput[defaultVars.__themeName__]])
+    expect(defaultVars.__themeName__).toMatchInlineSnapshot(
+      '"TestTheme.stylex.js//buttonTheme"',
+    );
+
+    expect(cssOutput[classNameOutput[defaultVars.__themeName__].split(' ')[0]])
       .toMatchInlineSnapshot(`
       {
         "ltr": ".xtrlmmh, .xtrlmmh:root{--xgck17p:green;--xpegid5:antiquewhite;--xrqfjmn:6px;--x4y59db:coral;}",
@@ -77,7 +81,11 @@ describe('stylex-create-theme test', () => {
       createTheme,
     );
 
-    expect(cssOutput[classNameOutput[defaultVars.__themeName__]])
+    expect(defaultVars.__themeName__).toMatchInlineSnapshot(
+      '"TestTheme.stylex.js//buttonTheme"',
+    );
+
+    expect(cssOutput[classNameOutput[defaultVars.__themeName__].split(' ')[0]])
       .toMatchInlineSnapshot(`
       {
         "ltr": ".x4znj40, .x4znj40:root{--bgColor:green;--bgColorDisabled:antiquewhite;--cornerRadius:6px;--fgColor:coral;}",
@@ -128,8 +136,12 @@ describe('stylex-create-theme test', () => {
 
     const [classNameOutput2] = stylexCreateTheme(defaultVars, createTheme2);
 
-    expect(classNameOutput1[defaultVars.__themeName__]).toEqual(
-      classNameOutput2[defaultVars.__themeName__],
+    expect(defaultVars.__themeName__).toMatchInlineSnapshot(
+      '"TestTheme.stylex.js//buttonTheme"',
+    );
+
+    expect(classNameOutput1[defaultVars.__themeName__].split(' ')[0]).toEqual(
+      classNameOutput2[defaultVars.__themeName__].split(' ')[0],
     );
   });
 
@@ -154,9 +166,9 @@ describe('stylex-create-theme test', () => {
 
     const [classNameOutput2] = stylexCreateTheme(defaultVars, createTheme2);
 
-    expect(classNameOutput1[defaultVars.__themeName__]).not.toEqual(
-      classNameOutput2[defaultVars.__themeName__],
-    );
+    expect(
+      classNameOutput1[defaultVars.__themeName__].split(' ')[0],
+    ).not.toEqual(classNameOutput2[defaultVars.__themeName__].split(' ')[0]);
   });
 
   test('Generates styles for nested at-rules', () => {
diff --git a/packages/shared/__tests__/define-vars/stylex-define-vars-by-group-test.js b/packages/shared/__tests__/define-vars/stylex-define-vars-by-group-test.js
new file mode 100644
index 00000000..8dd27e09
--- /dev/null
+++ b/packages/shared/__tests__/define-vars/stylex-define-vars-by-group-test.js
@@ -0,0 +1,367 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import styleXDefineVars from '../../src/stylex-define-vars';
+import * as t from '../../src/types';
+import createHash from '../../src/hash';
+
+describe('stylex-define-vars test', () => {
+  test('converts set of vars to CSS', () => {
+    const themeName = 'TestTheme.stylex.js//buttonTheme';
+    const classNamePrefix = 'x';
+    const defaultVars = {
+      bgColor: {
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': 'lightblue',
+        '@media print': 'white',
+      },
+      bgColorDisabled: {
+        default: 'grey',
+        '@media (prefers-color-scheme: dark)': 'rgba(0, 0, 0, 0.8)',
+      },
+      cornerRadius: '10px',
+      fgColor: {
+        default: 'pink',
+      },
+    };
+    const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, { themeName });
+
+    expect(jsOutput).toEqual({
+      __themeName__: classNamePrefix + createHash(themeName),
+      bgColor: `var(--${classNamePrefix + createHash(`${themeName}.bgColor`)})`,
+      bgColorDisabled: `var(--${
+        classNamePrefix + createHash(`${themeName}.bgColorDisabled`)
+      })`,
+      cornerRadius: `var(--${
+        classNamePrefix + createHash(`${themeName}.cornerRadius`)
+      })`,
+      fgColor: `var(--${classNamePrefix + createHash(`${themeName}.fgColor`)})`,
+    });
+
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "x568ih9": {
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-bdddrq": {
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+
+  test('maintains literal var names in CSS', () => {
+    const themeName = 'TestTheme.stylex.js//buttonTheme';
+    const classNamePrefix = 'x';
+    const defaultVars = {
+      '--bgColor': {
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': 'lightblue',
+        '@media print': 'white',
+      },
+      '--bgColorDisabled': {
+        default: 'grey',
+        '@media (prefers-color-scheme: dark)': 'rgba(0, 0, 0, 0.8)',
+      },
+      '--cornerRadius': '10px',
+      '--fgColor': {
+        default: 'pink',
+      },
+    };
+    const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, { themeName });
+
+    expect(jsOutput).toEqual({
+      __themeName__: classNamePrefix + createHash(themeName),
+      '--bgColor': 'var(--bgColor)',
+      '--bgColorDisabled': 'var(--bgColorDisabled)',
+      '--cornerRadius': 'var(--cornerRadius)',
+      '--fgColor': 'var(--fgColor)',
+    });
+
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "x568ih9": {
+          "ltr": ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-bdddrq": {
+          "ltr": "@media print{:root, .x568ih9{--bgColor:white;}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+
+  test('converts set of vars with nested at rules to CSS', () => {
+    const themeName = 'TestTheme.stylex.js//buttonTheme';
+    const classNamePrefix = 'x';
+    const defaultVars = {
+      bgColor: {
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': {
+          default: 'lightblue',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media print': 'white',
+      },
+      bgColorDisabled: {
+        default: {
+          default: 'grey',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media (prefers-color-scheme: dark)': {
+          default: 'rgba(0, 0, 0, 0.8)',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+      },
+      cornerRadius: '10px',
+      fgColor: {
+        default: 'pink',
+      },
+    };
+    const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, { themeName });
+
+    expect(jsOutput).toEqual({
+      __themeName__: classNamePrefix + createHash(themeName),
+      bgColor: `var(--${classNamePrefix + createHash(`${themeName}.bgColor`)})`,
+      bgColorDisabled: `var(--${
+        classNamePrefix + createHash(`${themeName}.bgColorDisabled`)
+      })`,
+      cornerRadius: `var(--${
+        classNamePrefix + createHash(`${themeName}.cornerRadius`)
+      })`,
+      fgColor: `var(--${classNamePrefix + createHash(`${themeName}.fgColor`)})`,
+    });
+
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "x568ih9": {
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9-1e6ryz3": {
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
+          "priority": 0.2,
+          "rtl": null,
+        },
+        "x568ih9-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-bdddrq": {
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-kpd015": {
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+
+  test('converts set of typed vars with nested at rules to CSS', () => {
+    const themeName = 'TestTheme.stylex.js//buttonTheme';
+    const classNamePrefix = 'x';
+    const defaultVars = {
+      bgColor: t.color({
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': {
+          default: 'lightblue',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media print': 'white',
+      }),
+      bgColorDisabled: t.color({
+        default: {
+          default: 'grey',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media (prefers-color-scheme: dark)': {
+          default: 'rgba(0, 0, 0, 0.8)',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+      }),
+      cornerRadius: t.length('10px'),
+      fgColor: t.color({
+        default: 'pink',
+      }),
+    };
+    const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, { themeName });
+
+    expect(jsOutput).toEqual({
+      __themeName__: classNamePrefix + createHash(themeName),
+      bgColor: `var(--${classNamePrefix + createHash(`${themeName}.bgColor`)})`,
+      bgColorDisabled: `var(--${
+        classNamePrefix + createHash(`${themeName}.bgColorDisabled`)
+      })`,
+      cornerRadius: `var(--${
+        classNamePrefix + createHash(`${themeName}.cornerRadius`)
+      })`,
+      fgColor: `var(--${classNamePrefix + createHash(`${themeName}.fgColor`)})`,
+    });
+
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "x4y59db": {
+          "ltr": "@property --x4y59db { syntax: "<color>"; inherits: true; initial-value: pink }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9": {
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9-1e6ryz3": {
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
+          "priority": 0.2,
+          "rtl": null,
+        },
+        "x568ih9-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-bdddrq": {
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-kpd015": {
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "xgck17p": {
+          "ltr": "@property --xgck17p { syntax: "<color>"; inherits: true; initial-value: blue }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "xpegid5": {
+          "ltr": "@property --xpegid5 { syntax: "<color>"; inherits: true; initial-value: grey }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "xrqfjmn": {
+          "ltr": "@property --xrqfjmn { syntax: "<length>"; inherits: true; initial-value: 10px }",
+          "priority": 0,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+
+  test('preserves names of literals with -- prefix', () => {
+    const themeName = 'TestTheme.stylex.js//buttonTheme';
+    const classNamePrefix = 'x';
+    const defaultVars = {
+      '--bgColor': t.color({
+        default: 'blue',
+        '@media (prefers-color-scheme: dark)': {
+          default: 'lightblue',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media print': 'white',
+      }),
+      '--bgColorDisabled': t.color({
+        default: {
+          default: 'grey',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+        '@media (prefers-color-scheme: dark)': {
+          default: 'rgba(0, 0, 0, 0.8)',
+          '@supports (color: oklab(0 0 0))': 'oklab(0.7 -0.3 -0.4)',
+        },
+      }),
+      '--cornerRadius': t.length('10px'),
+      '--fgColor': t.color({
+        default: 'pink',
+      }),
+    };
+    const [jsOutput, cssOutput] = styleXDefineVars(defaultVars, { themeName });
+
+    expect(jsOutput).toEqual({
+      __themeName__: classNamePrefix + createHash(themeName),
+      '--bgColor': 'var(--bgColor)',
+      '--bgColorDisabled': 'var(--bgColorDisabled)',
+      '--cornerRadius': 'var(--cornerRadius)',
+      '--fgColor': 'var(--fgColor)',
+    });
+    expect(cssOutput).toMatchInlineSnapshot(`
+      {
+        "bgColor": {
+          "ltr": "@property --bgColor { syntax: "<color>"; inherits: true; initial-value: blue }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "bgColorDisabled": {
+          "ltr": "@property --bgColorDisabled { syntax: "<color>"; inherits: true; initial-value: grey }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "cornerRadius": {
+          "ltr": "@property --cornerRadius { syntax: "<length>"; inherits: true; initial-value: 10px }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "fgColor": {
+          "ltr": "@property --fgColor { syntax: "<color>"; inherits: true; initial-value: pink }",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9": {
+          "ltr": ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
+          "priority": 0,
+          "rtl": null,
+        },
+        "x568ih9-1e6ryz3": {
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:oklab(0.7 -0.3 -0.4);--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}}",
+          "priority": 0.2,
+          "rtl": null,
+        },
+        "x568ih9-1lveb7": {
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-bdddrq": {
+          "ltr": "@media print{:root, .x568ih9{--bgColor:white;}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+        "x568ih9-kpd015": {
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}",
+          "priority": 0.1,
+          "rtl": null,
+        },
+      }
+    `);
+  });
+});
diff --git a/packages/shared/__tests__/stylex-define-vars-test.js b/packages/shared/__tests__/define-vars/stylex-define-vars-test.js
similarity index 81%
rename from packages/shared/__tests__/stylex-define-vars-test.js
rename to packages/shared/__tests__/define-vars/stylex-define-vars-test.js
index 853b5787..8dd27e09 100644
--- a/packages/shared/__tests__/stylex-define-vars-test.js
+++ b/packages/shared/__tests__/define-vars/stylex-define-vars-test.js
@@ -7,9 +7,9 @@
  * @flow strict
  */
 
-import styleXDefineVars from '../src/stylex-define-vars';
-import * as t from '../src/types';
-import createHash from '../src/hash';
+import styleXDefineVars from '../../src/stylex-define-vars';
+import * as t from '../../src/types';
+import createHash from '../../src/hash';
 
 describe('stylex-define-vars test', () => {
   test('converts set of vars to CSS', () => {
@@ -47,17 +47,17 @@ describe('stylex-define-vars test', () => {
     expect(cssOutput).toMatchInlineSnapshot(`
       {
         "x568ih9": {
-          "ltr": ":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
           "priority": 0,
           "rtl": null,
         },
         "x568ih9-1lveb7": {
-          "ltr": "@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-bdddrq": {
-          "ltr": "@media print{:root{--xgck17p:white;}}",
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
           "priority": 0.1,
           "rtl": null,
         },
@@ -96,17 +96,17 @@ describe('stylex-define-vars test', () => {
     expect(cssOutput).toMatchInlineSnapshot(`
       {
         "x568ih9": {
-          "ltr": ":root{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
+          "ltr": ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
           "priority": 0,
           "rtl": null,
         },
         "x568ih9-1lveb7": {
-          "ltr": "@media (prefers-color-scheme: dark){:root{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-bdddrq": {
-          "ltr": "@media print{:root{--bgColor:white;}}",
+          "ltr": "@media print{:root, .x568ih9{--bgColor:white;}}",
           "priority": 0.1,
           "rtl": null,
         },
@@ -158,27 +158,27 @@ describe('stylex-define-vars test', () => {
     expect(cssOutput).toMatchInlineSnapshot(`
       {
         "x568ih9": {
-          "ltr": ":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
           "priority": 0,
           "rtl": null,
         },
         "x568ih9-1e6ryz3": {
-          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
           "priority": 0.2,
           "rtl": null,
         },
         "x568ih9-1lveb7": {
-          "ltr": "@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-bdddrq": {
-          "ltr": "@media print{:root{--xgck17p:white;}}",
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-kpd015": {
-          "ltr": "@supports (color: oklab(0 0 0)){:root{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
           "priority": 0.1,
           "rtl": null,
         },
@@ -235,27 +235,27 @@ describe('stylex-define-vars test', () => {
           "rtl": null,
         },
         "x568ih9": {
-          "ltr": ":root{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
+          "ltr": ":root, .x568ih9{--xgck17p:blue;--xpegid5:grey;--xrqfjmn:10px;--x4y59db:pink;}",
           "priority": 0,
           "rtl": null,
         },
         "x568ih9-1e6ryz3": {
-          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:oklab(0.7 -0.3 -0.4);--xpegid5:oklab(0.7 -0.3 -0.4);}}}",
           "priority": 0.2,
           "rtl": null,
         },
         "x568ih9-1lveb7": {
-          "ltr": "@media (prefers-color-scheme: dark){:root{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--xgck17p:lightblue;--xpegid5:rgba(0, 0, 0, 0.8);}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-bdddrq": {
-          "ltr": "@media print{:root{--xgck17p:white;}}",
+          "ltr": "@media print{:root, .x568ih9{--xgck17p:white;}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-kpd015": {
-          "ltr": "@supports (color: oklab(0 0 0)){:root{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--xpegid5:oklab(0.7 -0.3 -0.4);}}",
           "priority": 0.1,
           "rtl": null,
         },
@@ -337,27 +337,27 @@ describe('stylex-define-vars test', () => {
           "rtl": null,
         },
         "x568ih9": {
-          "ltr": ":root{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
+          "ltr": ":root, .x568ih9{--bgColor:blue;--bgColorDisabled:grey;--cornerRadius:10px;--fgColor:pink;}",
           "priority": 0,
           "rtl": null,
         },
         "x568ih9-1e6ryz3": {
-          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root{--bgColor:oklab(0.7 -0.3 -0.4);--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}}",
+          "ltr": "@supports (color: oklab(0 0 0)){@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:oklab(0.7 -0.3 -0.4);--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}}",
           "priority": 0.2,
           "rtl": null,
         },
         "x568ih9-1lveb7": {
-          "ltr": "@media (prefers-color-scheme: dark){:root{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
+          "ltr": "@media (prefers-color-scheme: dark){:root, .x568ih9{--bgColor:lightblue;--bgColorDisabled:rgba(0, 0, 0, 0.8);}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-bdddrq": {
-          "ltr": "@media print{:root{--bgColor:white;}}",
+          "ltr": "@media print{:root, .x568ih9{--bgColor:white;}}",
           "priority": 0.1,
           "rtl": null,
         },
         "x568ih9-kpd015": {
-          "ltr": "@supports (color: oklab(0 0 0)){:root{--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}",
+          "ltr": "@supports (color: oklab(0 0 0)){:root, .x568ih9{--bgColorDisabled:oklab(0.7 -0.3 -0.4);}}",
           "priority": 0.1,
           "rtl": null,
         },
diff --git a/packages/shared/src/stylex-create-theme.js b/packages/shared/src/stylex-create-theme.js
index 0beab12a..8ca93d38 100644
--- a/packages/shared/src/stylex-create-theme.js
+++ b/packages/shared/src/stylex-create-theme.js
@@ -82,8 +82,10 @@ export default function styleXCreateTheme(
     }
   }
 
+  const themeClass = `${overrideClassName} ${themeVars.__themeName__}`;
+
   return [
-    { $$css: true, [themeVars.__themeName__]: overrideClassName },
+    { $$css: true, [themeVars.__themeName__]: themeClass },
     stylesToInject,
   ];
 }
diff --git a/packages/shared/src/stylex-define-vars.js b/packages/shared/src/stylex-define-vars.js
index 61590bdf..76b21676 100644
--- a/packages/shared/src/stylex-define-vars.js
+++ b/packages/shared/src/stylex-define-vars.js
@@ -110,7 +110,9 @@ function constructCssVariablesString(
   for (const [atRule, value] of Object.entries(rulesByAtRule)) {
     const suffix = atRule === 'default' ? '' : `-${createHash(atRule)}`;
 
-    let ltr = `:root{${value.join('')}}`;
+    const selector = `:root, .${themeNameHash}`;
+
+    let ltr = `${selector}{${value.join('')}}`;
     if (atRule !== 'default') {
       ltr = wrapWithAtRules(ltr, atRule);
     }
diff --git a/packages/shared/src/utils/default-options.js b/packages/shared/src/utils/default-options.js
index 76fbeaa1..2dc0d7ac 100644
--- a/packages/shared/src/utils/default-options.js
+++ b/packages/shared/src/utils/default-options.js
@@ -9,19 +9,6 @@
 
 import type { StyleXOptions } from '../common-types';
 
-// {
-//   ...options,
-//   dev: !!(options as any).dev,
-//   test: !!(options as any).test,
-//   stylexSheetName: (options as any).stylexSheetName ?? undefined,
-//   classNamePrefix: (options as any).classNamePrefix ?? 'x',
-//   importSources: (options as any).importSources ?? [name, 'stylex'],
-//   definedStylexCSSVariables:
-//     (options as any).definedStylexCSSVariables ?? {},
-//   genConditionalClasses: !!(options as any).genConditionalClasses,
-//   skipShorthandExpansion: !!(options as any).skipShorthandExpansion,
-// } as StyleXOptions;
-
 export const defaultOptions: StyleXOptions = {
   dev: false,
   debug: false,