fix(babel-preset): remove duplicated styles from the generated metada…

…ta (#554) * change * Change files * add test --------- Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
microsoft · May 10, 2024 · 7e45352 · 7e45352
1 parent 1767ae3
commit 7e45352
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/change/@griffel-babel-preset-b78df94c-317a-4354-9d27-a58f703e2c16.json 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
@@ -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
@@ -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)];
     }),
   );