refactor: parse complex aspect ratio as unparsed value (#3740)

Fixes the issue with pasting images from webflow.

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

@@ -58,13 +58,6 @@ describe("Parse CSS value", () => {
         type: "invalid",
         value: "10",
       });
-
-      // This will return number unit, as number is valid for aspectRatio.
-      expect(parseCssValue("aspectRatio", "10")).toEqual({
-        type: "unit",
-        unit: "number",
-        value: 10,
-      });
     });
   });
 
@@ -870,3 +863,25 @@ describe("parse filters", () => {
     });
   });
 });
+
+describe("aspect-ratio", () => {
+  test("support single numeric value", () => {
+    expect(parseCssValue("aspectRatio", "10")).toEqual({
+      type: "unit",
+      unit: "number",
+      value: 10,
+    });
+  });
+  test("support keyword", () => {
+    expect(parseCssValue("aspectRatio", "auto")).toEqual({
+      type: "keyword",
+      value: "auto",
+    });
+  });
+  test("support two values", () => {
+    expect(parseCssValue("aspectRatio", "16 / 9")).toEqual({
+      type: "unparsed",
+      value: "16 / 9",
+    });
+  });
+});

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

@@ -402,13 +402,17 @@ export const parseCssValue = (
   // Probably a tuple like background-size or box-shadow
   if (
     ast.type === "Value" &&
-    (ast.children.size > 1 || tupleProps.has(property))
+    (ast.children.size === 2 || tupleProps.has(property))
   ) {
     const tuple: TupleValue = {
       type: "tuple",
       value: [],
     };
     for (const node of ast.children) {
+      // output any values with unhandled operators like slash or comma as unparsed
+      if (node.type === "Operator") {
+        return { type: "unparsed", value: input };
+      }
       const matchedValue = parseLiteral(node, keywordValues[property as never]);
       if (matchedValue) {
         tuple.value.push(matchedValue as never);