fix: Babel plugin should no longer require `unstable_moduleResolutio…

…n.rootDir` (#820)
facebook · Dec 21, 2024 · c43e68a · c43e68a
1 parent 7f545cf
commit c43e68a
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 43 deletions.
diff --git a/apps/nextjs-example/app/CardTokens.stylex.ts b/apps/nextjs-example/app/CardTokens.stylex.ts
@@ -10,5 +10,5 @@
 import * as stylex from '@stylexjs/stylex';
 
 export const tokens = stylex.defineVars({
-  arrowTransform: 'translateX(0)',
+  arrow_transform: 'translateX(0)',
 });
diff --git a/apps/nextjs-example/babel.config.js b/apps/nextjs-example/babel.config.js
@@ -24,7 +24,6 @@ module.exports = {
         },
         unstable_moduleResolution: {
           type: 'commonJS',
-          rootDir: path.join(__dirname, '../..'),
         },
       },
     ],

diff --git a/apps/nextjs-example/components/Card.tsx b/apps/nextjs-example/components/Card.tsx
@@ -68,7 +68,7 @@ const styles = stylex.create({
     transitionDuration: '400ms',
     textAlign: 'center',
     textDecoration: 'none',
-    [tokens.arrowTransform]: {
+    [tokens.arrow_transform]: {
       default: 'translateX(0)',
       ':hover': 'translateX(4px)',
     },
@@ -85,7 +85,7 @@ const styles = stylex.create({
   span: {
     display: 'inline-block',
     transitionProperty: 'transform',
-    transform: tokens.arrowTransform,
+    transform: tokens.arrow_transform,
     transitionDuration: {
       default: '200ms',
       [REDUCE_MOTION]: '0s',

diff --git a/packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js b/packages/babel-plugin/__tests__/stylex-transform-create-theme-test.js
@@ -21,6 +21,8 @@ const defaultOpts = {
   classNamePrefix,
 };
 
+// NOTE: While `rootDir` is optional now, It is needed in the
+// test environment still.
 const rootDir = '/stylex/packages/';
 
 function transform(source, opts = defaultOpts) {

diff --git a/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js b/packages/babel-plugin/__tests__/stylex-transform-define-vars-test.js
@@ -21,6 +21,8 @@ const defaultOpts = {
   debug: false,
 };
 
+// NOTE: While `rootDir` is optional now, It is needed in the
+// test environment still.
 const rootDir = '/stylex/packages/';
 
 function transform(source, opts = defaultOpts) {

diff --git a/packages/babel-plugin/src/utils/__tests__/state-manager.test.js b/packages/babel-plugin/src/utils/__tests__/state-manager.test.js
@@ -250,44 +250,13 @@ describe('StateManager config parsing', () => {
 
     expect(warnings).toEqual([]);
   });
-  it('logs errors on commonJS unstable_moduleResolution without rootDir', () => {
+  it('commonJS unstable_moduleResolution works without rootDir', () => {
     const stateManager = makeState({
       unstable_moduleResolution: { type: 'commonJS' },
     });
-    expect(stateManager.options.unstable_moduleResolution).toBeNull();
-    expect(warnings).toMatchInlineSnapshot(`
-      [
-        [
-          "[@stylexjs/babel-plugin]",
-          "Expected (options.unstable_moduleResolution) to be one of
-      	- \`null\` or \`undefined\`
-      	- one of
-      		- an object where:
-      			- Expected "type": to be the literal "commonJS"
-      			- Expected "rootDir": to be a string
-      			- Expected "themeFileExtension": to be 	- 
-      				- one of
-      					- \`null\` or \`undefined\`
-      					- a string
-      			- {"type":"commonJS"}
-      		- an object where:
-      			- Expected "type": to be the literal "haste"
-      			- Expected "themeFileExtension": to be 	- 
-      				- one of
-      					- \`null\` or \`undefined\`
-      					- a string
-      			- {"type":"commonJS"}
-      		- an object where:
-      			- Expected "type": to be the literal "experimental_crossFileParsing"
-      			- Expected "rootDir": to be a string
-      			- Expected "themeFileExtension": to be 	- 
-      				- one of
-      					- \`null\` or \`undefined\`
-      					- a string
-      			- {"type":"commonJS"}
-      But got: {"type":"commonJS"}",
-        ],
-      ]
-    `);
+    expect(stateManager.options.unstable_moduleResolution).not.toBeNull();
+    expect(stateManager.options.unstable_moduleResolution?.type).toBe(
+      'commonJS',
+    );
   });
 });
diff --git a/packages/babel-plugin/src/utils/state-manager.js b/packages/babel-plugin/src/utils/state-manager.js
@@ -36,7 +36,7 @@ export type ImportPathResolution =
 type ModuleResolution =
   | $ReadOnly<{
       type: 'commonJS',
-      rootDir?: string,
+      rootDir?: ?string,
       themeFileExtension?: ?string,
     }>
   | $ReadOnly<{
@@ -53,7 +53,7 @@ type ModuleResolution =
 const CheckModuleResolution: Check<ModuleResolution> = z.unionOf3(
   z.object({
     type: z.literal('commonJS'),
-    rootDir: z.string(),
+    rootDir: z.unionOf(z.nullish(), z.string()),
     themeFileExtension: z.unionOf<null | void, string>(z.nullish(), z.string()),
   }),
   z.object({
@@ -75,7 +75,7 @@ export type StyleXOptions = $ReadOnly<{
   runtimeInjection: boolean | ?string | $ReadOnly<{ from: string, as: string }>,
   treeshakeCompensation?: boolean,
   genConditionalClasses: boolean,
-  unstable_moduleResolution: ?ModuleResolution,
+  unstable_moduleResolution?: ?ModuleResolution,
   aliases?: ?$ReadOnly<{ [string]: string | $ReadOnlyArray<string> }>,
   ...
 }>;
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,6 @@ module.exports = { @@
             },
             unstable_moduleResolution: {
               type: 'commonJS',
-              rootDir: path.join(__dirname, '../..'),
             },
           },
         ],
@@ Expand Down @@