From 92167aca42a20c42c2344c2c0c3a7affe9f8c940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Mon, 3 Jun 2024 09:38:44 +0200
Subject: [PATCH] Fix masks in components (#129)

* fix masks in components

* fixes

* fixes
---
 .changeset/friendly-cycles-heal.md                    |  5 +++++
 plugin-src/transformers/partials/transformFigmaIds.ts | 10 ++++++++++
 plugin-src/translators/translateChildren.ts           |  2 ++
 3 files changed, 17 insertions(+)
 create mode 100644 .changeset/friendly-cycles-heal.md

diff --git a/.changeset/friendly-cycles-heal.md b/.changeset/friendly-cycles-heal.md
new file mode 100644
index 00000000..e4aa2332
--- /dev/null
+++ b/.changeset/friendly-cycles-heal.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Fix masks not working in components
diff --git a/plugin-src/transformers/partials/transformFigmaIds.ts b/plugin-src/transformers/partials/transformFigmaIds.ts
index 01034f7f..613aac3a 100644
--- a/plugin-src/transformers/partials/transformFigmaIds.ts
+++ b/plugin-src/transformers/partials/transformFigmaIds.ts
@@ -9,6 +9,16 @@ export const transformFigmaIds = (
   };
 };
 
+export const transformMaskFigmaIds = (
+  node: SceneNode
+): Pick<ShapeBaseAttributes, 'figmaId' | 'figmaRelatedId'> => {
+  const transformedIds = transformFigmaIds(node);
+  return {
+    figmaId: `M${transformedIds.figmaId}`,
+    figmaRelatedId: transformedIds.figmaRelatedId ? `M${transformedIds.figmaRelatedId}` : undefined
+  };
+};
+
 const getRelatedNodeId = (nodeId: string): string | undefined => {
   const ids = nodeId.split(';');
 
diff --git a/plugin-src/translators/translateChildren.ts b/plugin-src/translators/translateChildren.ts
index ed9ad19f..fdf32a04 100644
--- a/plugin-src/translators/translateChildren.ts
+++ b/plugin-src/translators/translateChildren.ts
@@ -1,4 +1,5 @@
 import { transformGroupNodeLike, transformSceneNode } from '@plugin/transformers';
+import { transformMaskFigmaIds } from '@plugin/transformers/partials';
 import { sleep } from '@plugin/utils';
 
 import { PenpotNode } from '@ui/types';
@@ -23,6 +24,7 @@ export const translateMaskChildren = async (
   const maskedChildren = await translateChildren(children.slice(maskIndex), baseX, baseY);
 
   const maskGroup = {
+    ...transformMaskFigmaIds(maskChild),
     ...transformGroupNodeLike(maskChild, baseX, baseY),
     children: maskedChildren,
     maskedGroup: true