From 7e45352b83480964b3c9e6f9a76e5797eb028e8c Mon Sep 17 00:00:00 2001
From: Amber <yuanboxue@microsoft.com>
Date: Fri, 10 May 2024 12:09:24 +0200
Subject: [PATCH] fix(babel-preset): remove duplicated styles from the
 generated metadata (#554)

* change

* Change files

* add test

---------

Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
---
 ...-b78df94c-317a-4354-9d27-a58f703e2c16.json |  7 ++++
 .../babel-preset/src/transformPlugin.test.ts  | 35 +++++++++++++++++++
 packages/babel-preset/src/transformPlugin.ts  | 21 +++++------
 3 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 change/@griffel-babel-preset-b78df94c-317a-4354-9d27-a58f703e2c16.json

diff --git a/change/@griffel-babel-preset-b78df94c-317a-4354-9d27-a58f703e2c16.json b/change/@griffel-babel-preset-b78df94c-317a-4354-9d27-a58f703e2c16.json
new file mode 100644
index 000000000..d4c7b4086
--- /dev/null
+++ b/change/@griffel-babel-preset-b78df94c-317a-4354-9d27-a58f703e2c16.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove duplicated styles from the generated metadata",
+  "packageName": "@griffel/babel-preset",
+  "email": "yuanboxue@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/babel-preset/src/transformPlugin.test.ts b/packages/babel-preset/src/transformPlugin.test.ts
index ae4d80a75..bcf7c8404 100644
--- a/packages/babel-preset/src/transformPlugin.test.ts
+++ b/packages/babel-preset/src/transformPlugin.test.ts
@@ -373,4 +373,39 @@ describe('babel preset', () => {
       }
     `);
   });
+
+  it('should generate metadata for makeResetStyles when configured', () => {
+    const code = `
+import { makeStyles } from '@griffel/react';
+
+export const useStyles = makeStyles({
+  root: {
+    paddingLeft: '4px',
+    paddingRight: '4px',
+  },
+});
+    `;
+
+    const babelFileResult = Babel.transformSync(code, {
+      babelrc: false,
+      configFile: false,
+      plugins: [[transformPlugin, { generateMetadata: true }]],
+      filename: 'test.js',
+      presets: ['@babel/typescript'],
+    });
+
+    expect(babelFileResult?.metadata).toMatchInlineSnapshot(`
+      Object {
+        cssEntries: Object {
+          useStyles: Object {
+            root: Array [
+              .fycuoez{padding-left:4px;},
+              .f8wuabp{padding-right:4px;},
+            ],
+          },
+        },
+        cssResetEntries: Object {},
+      }
+    `);
+  });
 });
diff --git a/packages/babel-preset/src/transformPlugin.ts b/packages/babel-preset/src/transformPlugin.ts
index 14314c0e3..34cd32ace 100644
--- a/packages/babel-preset/src/transformPlugin.ts
+++ b/packages/babel-preset/src/transformPlugin.ts
@@ -124,18 +124,15 @@ function buildCSSEntriesMetadata(
 ) {
   const classesBySlot: Record<string, string[]> = Object.fromEntries(
     Object.entries(classnamesMapping).map(([slot, cssClassesMap]) => {
-      return [
-        slot,
-        Object.values(cssClassesMap).reduce<string[]>((acc, cssClasses) => {
-          if (typeof cssClasses === 'string') {
-            acc.push(cssClasses);
-          } else if (Array.isArray(cssClasses)) {
-            acc.push(...cssClasses);
-          }
-
-          return acc;
-        }, []),
-      ];
+      const uniqueClasses = new Set<string>();
+      Object.values(cssClassesMap).forEach(cssClasses => {
+        if (typeof cssClasses === 'string') {
+          uniqueClasses.add(cssClasses);
+        } else if (Array.isArray(cssClasses)) {
+          cssClasses.forEach(cssClass => uniqueClasses.add(cssClass));
+        }
+      });
+      return [slot, Array.from(uniqueClasses)];
     }),
   );