fix: support max-* breakpoints in tailwind (#5299)

Ref #2651

Tailwind has max-sm, max-lg etc endpoints which need to adapt to ours as
well

Author: TrySound

apps/builder/app/shared/tailwind/tailwind.test.tsx

@@ -511,6 +511,65 @@ describe("extract breakpoints", () => {
       )
     );
   });
+
+  test("adapt max-* breakpoints", async () => {
+    expect(
+      await generateFragmentFromTailwind(
+        renderTemplate(
+          <ws.element
+            ws:tag="div"
+            class="max-sm:opacity-10 max-md:opacity-20 max-lg:opacity-30 max-xl:opacity-40 max-2xl:opacity-50 opacity-60"
+          ></ws.element>
+        )
+      )
+    ).toEqual(
+      renderTemplate(
+        <ws.element
+          ws:tag="div"
+          ws:style={css`
+            @media (min-width: 1440px) {
+              opacity: 0.6;
+            }
+            @media (min-width: 1280px) {
+              opacity: 0.5;
+            }
+            opacity: 0.4;
+            @media (max-width: 991px) {
+              opacity: 0.3;
+            }
+            @media (max-width: 767px) {
+              opacity: 0.2;
+            }
+            @media (max-width: 479px) {
+              opacity: 0.1;
+            }
+          `}
+        ></ws.element>
+      )
+    );
+  });
+
+  test("ignore composite breakpoints", async () => {
+    expect(
+      await generateFragmentFromTailwind(
+        renderTemplate(
+          <ws.element
+            ws:tag="div"
+            class="opacity-10 md:max-xl:flex"
+          ></ws.element>
+        )
+      )
+    ).toEqual(
+      renderTemplate(
+        <ws.element
+          ws:tag="div"
+          ws:style={css`
+            opacity: 0.1;
+          `}
+        ></ws.element>
+      )
+    );
+  });
 });
 
 test("generate space without display property", async () => {

apps/builder/app/shared/tailwind/tailwind.ts

@@ -27,11 +27,13 @@ const availableBreakpoints = [
 ];
 
 const tailwindToWebstudioMappings: Record<number, undefined | number> = {
-  639: 479,
+  639.9: 479,
   640: 480,
-  1023: 991,
+  767.9: 767,
+  1023.9: 991,
   1024: 992,
-  1535: 1439,
+  1279.9: 1279,
+  1535.9: 1439,
   1536: 1440,
 };
 
@@ -120,8 +122,10 @@ const rangesToBreakpoints = (ranges: Range[]) => {
 const adaptBreakpoints = (
   parsedStyles: Omit<ParsedStyleDecl, "selector">[]
 ) => {
+  const newStyles: typeof parsedStyles = [];
   const breakpointGroups = new Map<string, Breakpoint[]>();
   for (const styleDecl of parsedStyles) {
+    newStyles.push(styleDecl);
     const mediaQuery = styleDecl.breakpoint
       ? parseMediaQuery(styleDecl.breakpoint)
       : undefined;
@@ -155,13 +159,14 @@ const adaptBreakpoints = (
       breakpointsByKey.set(breakpoint.key, breakpoint);
     }
   }
-  for (const styleDecl of parsedStyles) {
+  for (const styleDecl of newStyles) {
     const styleDeclKey = `${styleDecl.breakpoint ?? ""}:${styleDecl.property}:${styleDecl.state ?? ""}`;
     const breakpoint = breakpointsByKey.get(styleDeclKey);
     if (breakpoint) {
       styleDecl.breakpoint = serializeBreakpoint(breakpoint);
     }
   }
+  return newStyles;
 };
 
 const createUnoGenerator = async () => {

packages/css-data/src/parse-css.test.ts

@@ -714,6 +714,30 @@ test("ignore unsupported media queries", () => {
   ]);
 });
 
+test("ignore nested media queries", () => {
+  expect(
+    parseCss(`
+      @media (min-width: 768px)  {
+        a {
+          color: green;
+        }
+        @media (max-width: 1024px) {
+          a {
+            color: red;
+          }
+        }
+      }
+   `)
+  ).toEqual([
+    {
+      breakpoint: "(min-width:768px)",
+      selector: "a",
+      property: "color",
+      value: { type: "keyword", value: "green" },
+    },
+  ]);
+});
+
 test("ignore unsupported at rules", () => {
   expect(
     parseCss(`

packages/css-data/src/parse-css.ts

@@ -103,6 +103,12 @@ export const parseCss = (css: string): ParsedStyleDecl[] => {
   }
 
   csstree.walk(ast, function (node) {
+    // forbid nested at rules
+    if (node.type === "Atrule" && this.atrule) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore https://github.com/csstree/csstree/blob/v2.3.1/docs/traversal.md
+      return this.break;
+    }
     if (node.type !== "Declaration" || this.rule?.prelude.type === undefined) {
       return;
     }