From d6fb336f9cc543986528733d4e979437afe581dc Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Thu, 28 Aug 2025 22:48:58 +1000
Subject: [PATCH] feat: box-sizing

---
 src/__tests__/vendor/tailwind/layout.test.tsx |  6 ++----
 src/compiler/declarations.ts                  | 13 +++++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/__tests__/vendor/tailwind/layout.test.tsx b/src/__tests__/vendor/tailwind/layout.test.tsx
index 9e63f076..d78d2c1a 100644
--- a/src/__tests__/vendor/tailwind/layout.test.tsx
+++ b/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" } },
     });
   });
 });
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 6460a1fd..0eb5ff30 100644
--- a/src/compiler/declarations.ts
+++ b/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,