feat: support reactive themes up to 4 levels deep

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, {});

packages/babel-plugin/__tests__/evaluation/stylex-import-evaluation-test.js

@@ -34,18 +34,19 @@ function transform(source, opts = options) {
       jsx,
       [
         stylexPlugin,
-        { treeshakeCompensation: true, runtimeInjection: true, ...opts },
+        {
+          treeshakeCompensation: true,
+          runtimeInjection: true,
+          unstable_moduleResolution: { type: 'haste' },
+          ...opts,
+        },
       ],
     ],
   });
 }
 
 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,53 @@ 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';
+        import { DepToken } from 'dependency.stylex';
+
+        export const dark = stylex.createTheme(MyTheme, {
+          primary: DepToken.black,
+        });
+      `);
+
+      const expectedVarName =
+        options.classNamePrefix + hash('otherFile.stylex.js//MyTheme');
+      expect(expectedVarName).toMatchInlineSnapshot(`"__hashed_var__jvfbhb"`);
+      const expectedDepName =
+        options.classNamePrefix + hash('dependency.stylex.js//DepToken');
+      expect(expectedDepName).toMatchInlineSnapshot(`"__hashed_var__1hqhwsz"`);
+
+      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';
+        import 'dependency.stylex';
+        import { DepToken } from 'dependency.stylex';
+        _inject2(".__hashed_var__1jub2fi, .__hashed_var__1jub2fi:root, __hashed_var__1jub2fi .__hashed_var__1hqhwsz, __hashed_var__jvfbhb __hashed_var__1jub2fi .__hashed_var__1hqhwsz, __hashed_var__jvfbhb __hashed_var__jvfbhb __hashed_var__1jub2fi .__hashed_var__1hqhwsz, __hashed_var__jvfbhb __hashed_var__jvfbhb __hashed_var__jvfbhb __hashed_var__1jub2fi .__hashed_var__1hqhwsz{--__hashed_var__pr5b8h:var(--__hashed_var__672cz0);}", 0.5);
+        export const dark = {
+          $$css: true,
+          __hashed_var__jvfbhb: "__hashed_var__1jub2fi __hashed_var__jvfbhb"
+        };"
+      `);
+      expect(transformation.metadata.stylex).toMatchInlineSnapshot(`
+        [
+          [
+            "__hashed_var__1jub2fi",
+            {
+              "ltr": ".__hashed_var__1jub2fi, .__hashed_var__1jub2fi:root, __hashed_var__1jub2fi .__hashed_var__1hqhwsz, __hashed_var__jvfbhb __hashed_var__1jub2fi .__hashed_var__1hqhwsz, __hashed_var__jvfbhb __hashed_var__jvfbhb __hashed_var__1jub2fi .__hashed_var__1hqhwsz, __hashed_var__jvfbhb __hashed_var__jvfbhb __hashed_var__jvfbhb __hashed_var__1jub2fi .__hashed_var__1hqhwsz{--__hashed_var__pr5b8h:var(--__hashed_var__672cz0);}",
+              "rtl": null,
+            },
+            0.5,
+          ],
+        ]
+      `);
+    });
+
     test('Maintains variable names that start with -- from "*.stylex" files', () => {
       const transformation = transform(`
         import stylex from 'stylex';

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"
         };"
       `);
     });