feat: optimize CSS with a pre-pass in lightningcss

Author: marklawlor

src/__tests__/compiler/compiler.test.tsx

@@ -381,3 +381,27 @@ test("warnings", () => {
     },
   });
 });
+
+test("simplifies rem", () => {
+  const compiled = compile(`.test {
+    border-width: calc(10rem + 2px);
+  }`);
+
+  expect(compiled.stylesheet()).toStrictEqual({
+    s: [
+      [
+        "test",
+        [
+          {
+            d: [
+              {
+                borderWidth: 142,
+              },
+            ],
+            s: [1, 1],
+          },
+        ],
+      ],
+    ],
+  });
+});

src/__tests__/native/calc.test.tsx

@@ -201,6 +201,6 @@ test("infinity", () => {
 
   expect(component.type).toBe("View");
   expect(component.props.style).toStrictEqual({
-    borderRadius: 9999,
+    borderRadius: 9007199254740990,
   });
 });

src/__tests__/vendor/tailwind.test.tsx

@@ -330,10 +330,10 @@ test("line-clamp", () => {
         [
           {
             d: [
+              [1, ["numberOfLines"]],
               {
                 overflow: "hidden",
               },
-              [1, ["numberOfLines"]],
             ],
             s: [1, 1],
           },

src/__tests__/vendor/tailwind/backgrounds.test.tsx

@@ -209,11 +209,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to top in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-tr", async () => {
@@ -228,11 +223,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to top right in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-r", async () => {
@@ -247,11 +237,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to right in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-br", async () => {
@@ -266,11 +251,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to bottom right in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-b", async () => {
@@ -285,11 +265,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to bottom in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-bl", async () => {
@@ -304,11 +279,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to bottom left in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-l", async () => {
@@ -323,11 +293,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to left in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("bg-gradient-to-tl", async () => {
@@ -342,11 +307,6 @@ describe("Backgrounds - Background Image", () => {
             "linear-gradient(to top left in oklab, #fb2c36 0%, #2b7fff 100%)",
         },
       },
-      warnings: {
-        values: {
-          "background-image": ["initial", "initial", "initial"],
-        },
-      },
     });
   });
 });

src/__tests__/vendor/tailwind/borders.test.tsx

@@ -20,7 +20,7 @@ describe("Border - Border Radius", () => {
   });
   test("rounded-full", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: { style: { borderRadius: 9999 } },
+      props: { style: { borderRadius: 9007199254740990 } },
     });
   });
 });

src/__tests__/vendor/tailwind/effects.test.tsx

@@ -27,11 +27,6 @@ describe("Effects - Box Shadow", () => {
           ],
         },
       },
-      warnings: {
-        values: {
-          "box-shadow": ["initial", "initial", "initial", "initial", "initial"],
-        },
-      },
     });
   });
 
@@ -57,11 +52,6 @@ describe("Effects - Box Shadow", () => {
           ],
         },
       },
-      warnings: {
-        values: {
-          "box-shadow": ["initial", "initial", "initial", "initial", "initial"],
-        },
-      },
     });
   });
   test("shadow-none", async () => {
@@ -71,11 +61,6 @@ describe("Effects - Box Shadow", () => {
           boxShadow: [],
         },
       },
-      warnings: {
-        values: {
-          "box-shadow": ["initial", "initial", "initial", "initial", "initial"],
-        },
-      },
     });
   });
 });