From 4d57b6e420946d279b7c783546e774554279310d Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 30 Jun 2025 10:23:09 +0300
Subject: [PATCH] fix: convert space-* on breakpoints when paste tailwind

Ref https://github.com/webstudio-is/webstudio/issues/2651

Didn't consider spaces on breakpoints when converted space-* to gap
for example `md:space-x-6` -> `md:gap-x-6`
---
 apps/builder/app/shared/tailwind/tailwind.test.tsx | 14 ++++++++++----
 apps/builder/app/shared/tailwind/tailwind.ts       | 10 ++++------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/builder/app/shared/tailwind/tailwind.test.tsx b/apps/builder/app/shared/tailwind/tailwind.test.tsx
index f552414de1b7..02cb38c962d5 100644
--- a/apps/builder/app/shared/tailwind/tailwind.test.tsx
+++ b/apps/builder/app/shared/tailwind/tailwind.test.tsx
@@ -584,8 +584,8 @@ test("generate space without display property", async () => {
     await generateFragmentFromTailwind(
       renderTemplate(
         <>
-          <ws.element ws:tag="div" class="space-x-4"></ws.element>
-          <ws.element ws:tag="div" class="space-y-4"></ws.element>
+          <ws.element ws:tag="div" class="space-x-4 md:space-x-6"></ws.element>
+          <ws.element ws:tag="div" class="space-y-4 md:space-y-6"></ws.element>
         </>
       )
     )
@@ -596,7 +596,10 @@ test("generate space without display property", async () => {
           ws:tag="div"
           ws:style={css`
             display: flex;
-            column-gap: 1rem;
+            @media (max-width: 767px) {
+              column-gap: 1rem;
+            }
+            column-gap: 1.5rem;
           `}
         ></ws.element>
         <ws.element
@@ -605,7 +608,10 @@ test("generate space without display property", async () => {
             display: flex;
             flex-direction: column;
             align-items: start;
-            row-gap: 1rem;
+            @media (max-width: 767px) {
+              row-gap: 1rem;
+            }
+            row-gap: 1.5rem;
           `}
         ></ws.element>
       </>
diff --git a/apps/builder/app/shared/tailwind/tailwind.ts b/apps/builder/app/shared/tailwind/tailwind.ts
index ded7d3ff3554..5ffa3d9a37c9 100644
--- a/apps/builder/app/shared/tailwind/tailwind.ts
+++ b/apps/builder/app/shared/tailwind/tailwind.ts
@@ -198,15 +198,13 @@ const parseTailwindClasses = async (classes: string) => {
     .map((item) => {
       // styles data cannot express space-x and space-y selectors
       // with lobotomized owl so replace with gaps
-      const spaceX = "space-x-";
-      if (item.startsWith(spaceX)) {
+      if (item.includes("space-x-")) {
         hasColumnGaps = true;
-        return `gap-x-${item.slice(spaceX.length)}`;
+        return item.replace("space-x-", "gap-x-");
       }
-      const spaceY = "space-y-";
-      if (item.startsWith(spaceY)) {
+      if (item.includes("space-y-")) {
         hasRowGaps = true;
-        return `gap-y-${item.slice(spaceY.length)}`;
+        return item.replace("space-y-", "gap-y-");
       }
       hasFlexOrGrid ||= item.endsWith("flex") || item.endsWith("grid");
       hasContainer ||= item === "container";