feat: box-sizing

Author: marklawlor

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

@@ -188,14 +188,12 @@ describe("Layout - Box Decoration Break", () => {
 describe("Layout - Box Sizing", () => {
   test("box-border", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: {},
-      warnings: { properties: ["box-sizing"] },
+      props: { style: { boxSizing: "border-box" } },
     });
   });
   test("box-content", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
-      props: {},
-      warnings: { properties: ["box-sizing"] },
+      props: { style: { boxSizing: "content-box" } },
     });
   });
 });

src/compiler/declarations.ts

@@ -148,6 +148,7 @@ const parsers: {
   "border-width": parseBorderWidth,
   "bottom": parseSizeDeclaration,
   "box-shadow": parseBoxShadow,
+  "box-sizing": parseBoxSizing,
   "caret-color": parseColorOrAutoDeclaration,
   "color": parseFontColorDeclaration,
   "column-gap": parseGap,
@@ -2360,6 +2361,18 @@ export function parseBoxShadow(
   }
 }
 
+export function parseBoxSizing(
+  declaration: DeclarationType<"box-sizing">,
+  builder: StylesheetBuilder,
+) {
+  if (["border-box", "content-box"].includes(declaration.value)) {
+    return declaration.value;
+  }
+
+  builder.addWarning("value", declaration.value);
+  return undefined;
+}
+
 export function parseDisplay(
   { value }: DeclarationType<"display">,
   builder: StylesheetBuilder,