feat: unify v9 babel preset in all packages (#31088)

microsoft · Apr 19, 2024 · 6c94822 · 6c94822
1 parent 804e223
commit 6c94822
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/change/@fluentui-react-provider-3d9b4f67-b650-4c9b-abbe-e3b734dd0f84.json b/change/@fluentui-react-provider-3d9b4f67-b650-4c9b-abbe-e3b734dd0f84.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "feat: unify v9 babel preset in all packages",
+  "packageName": "@fluentui/react-provider",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-components/react-provider/.babelrc.json b/packages/react-components/react-provider/.babelrc.json
@@ -1,25 +1,4 @@
 {
-  "presets": [
-    [
-      "@griffel",
-      {
-        "babelOptions": {
-          "plugins": [
-            [
-              "babel-plugin-module-resolver",
-              {
-                "root": ["../../../"],
-                "alias": {
-                  "@fluentui/tokens": "packages/tokens/lib/index.js",
-                  "^@fluentui/(?!react-icons)(.+)": "packages/react-components/\\1/lib/index.js"
-                }
-              }
-            ]
-          ]
-        },
-        "modules": [{ "moduleSource": "@griffel/core", "importName": "makeStyles" }]
-      }
-    ]
-  ],
+  "extends": "../../../.babelrc-v9.json",
   "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
 }
diff --git a/scripts/babel/preset-v9.js b/scripts/babel/preset-v9.js
@@ -56,6 +56,20 @@ const preset = (api, options) => {
             ],
           ],
         },
+        /**
+         * https://github.com/microsoft/griffel/tree/main/packages/babel-preset#importing-griffel-from-custom-packages
+         * "By default, preset handles imports from @griffel/react & @fluentui/react-components" - under the hood griffel preset wont merge rather override thus we need to provide the default modules explicitly
+         */
+        modules: [
+          // Why is core needed ?
+          // - https://github.com/microsoft/fluentui/blob/8d4bd6428dc2f52948e668f1f1410972b6c5cf62/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.styles.ts#L1
+          // - https://github.com/microsoft/fluentui/pull/22936
+          { moduleSource: '@griffel/core', importName: 'makeStyles' },
+          // these are defaults provided by griffel preset
+          // https://github.com/microsoft/griffel/blob/7d27e6075f2d0647256fcc489e1e369696347e05/packages/babel-preset/src/transformPlugin.ts#L207-L210
+          { moduleSource: '@griffel/react', importName: 'makeStyles' },
+          { moduleSource: '@fluentui/react-components', importName: 'makeStyles' },
+        ],
       },
     ],
   ];

diff --git a/scripts/babel/preset-v9.spec.ts b/scripts/babel/preset-v9.spec.ts
@@ -25,6 +25,11 @@ describe(`babel preset v9`, () => {
           ],
         ],
       },
+      modules: [
+        { moduleSource: '@griffel/core', importName: 'makeStyles' },
+        { moduleSource: '@griffel/react', importName: 'makeStyles' },
+        { moduleSource: '@fluentui/react-components', importName: 'makeStyles' },
+      ],
     });
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any