fix: convert space-* on breakpoints when paste tailwind (#5308)

Ref #2651

Didn't consider spaces on breakpoints when converted space-* to gap for
example `md:space-x-6` -> `md:gap-x-6`

Author: TrySound

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>
       </>

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";