From 02c073c10bedeff28fedf2106d089300efe2fec6 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sun, 6 Oct 2024 22:55:10 +0300
Subject: [PATCH] fix: duplicate local style sources (#4235)

Fixes https://github.com/webstudio-is/webstudio/issues/4233

When added support for merging root styles when import from marketplace
forgot to check only :root styles should be merged and others
duplicated.
---
 .../app/shared/instance-utils.test.tsx        | 37 ++++++++++++++++++-
 apps/builder/app/shared/instance-utils.ts     |  3 +-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/shared/instance-utils.test.tsx b/apps/builder/app/shared/instance-utils.test.tsx
index 301f94ced6e2..cb4611173225 100644
--- a/apps/builder/app/shared/instance-utils.test.tsx
+++ b/apps/builder/app/shared/instance-utils.test.tsx
@@ -3175,7 +3175,7 @@ describe("insert webstudio fragment copy", () => {
   });
 });
 
-describe("support copy paste of :root styles", () => {
+describe("copy paste", () => {
   const css = (strings: TemplateStringsArray, ...values: string[]) => {
     let cssString = "";
     strings.forEach((string, index) => {
@@ -3268,4 +3268,39 @@ describe("support copy paste of :root styles", () => {
       }
     `);
   });
+
+  test("should copy local styles of duplicated instance", () => {
+    const project = getWebstudioDataStub({
+      ...renderJsx(
+        <$.Body ws:id="bodyId">
+          <$.Box ws:id="boxId"></$.Box>
+        </$.Body>
+      ),
+      ...css`
+        boxId__boxlocalid {
+          color: red;
+        }
+      `,
+    });
+    const fragment = extractWebstudioFragment(project, "boxId");
+    insertWebstudioFragmentCopy({
+      data: project,
+      fragment,
+      availableDataSources: new Set(),
+    });
+    const [_bodyId, _boxId, newBoxId] = project.instances.keys();
+    const [_boxLocalId, newBoxLocalId] = project.styleSources.keys();
+    expect({
+      styleSourceSelections: project.styleSourceSelections,
+      styleSources: project.styleSources,
+      styles: project.styles,
+    }).toEqual(css`
+      boxId__boxlocalid {
+        color: red;
+      }
+      ${newBoxId}__${newBoxLocalId} {
+        color: red;
+      }
+    `);
+  });
 });
diff --git a/apps/builder/app/shared/instance-utils.ts b/apps/builder/app/shared/instance-utils.ts
index 76d78c1e5eb2..f1061d3c2727 100644
--- a/apps/builder/app/shared/instance-utils.ts
+++ b/apps/builder/app/shared/instance-utils.ts
@@ -1513,7 +1513,8 @@ export const insertWebstudioFragmentCopy = ({
     for (let styleSourceId of values) {
       const newLocalStyleSource = newLocalStyleSources.get(styleSourceId);
       if (newLocalStyleSource) {
-        if (existingLocalStyleSource) {
+        // merge only :root styles and duplicate others
+        if (instanceId === ROOT_INSTANCE_ID && existingLocalStyleSource) {
           // write local styles into existing local style source
           styleSourceId = existingLocalStyleSource.id;
         } else {