From bf449f567c48a2d4c981eb5e4dd46e2097cfb487 Mon Sep 17 00:00:00 2001
From: Mark Lawlor <mwlawlor@gmail.com>
Date: Thu, 28 Aug 2025 23:14:54 +1000
Subject: [PATCH] feat: backface-visibility

---
 .../vendor/tailwind/transform.test.ts         | 21 +++++++++++++++++++
 src/compiler/declarations.ts                  | 13 ++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/__tests__/vendor/tailwind/transform.test.ts b/src/__tests__/vendor/tailwind/transform.test.ts
index 3071649c..0cb0adcf 100644
--- a/src/__tests__/vendor/tailwind/transform.test.ts
+++ b/src/__tests__/vendor/tailwind/transform.test.ts
@@ -1,5 +1,26 @@
 import { renderCurrentTest, renderSimple } from "./_tailwind";
 
+describe("Transforms - backface-visibility", () => {
+  test("backface-visible", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          backfaceVisibility: "visible",
+        },
+      },
+    });
+  });
+  test("backface-hidden", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          backfaceVisibility: "hidden",
+        },
+      },
+    });
+  });
+});
+
 describe("Transforms - Scale", () => {
   test("scale-0", async () => {
     expect(await renderCurrentTest()).toStrictEqual({
diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts
index 4d952175..bb9d32cb 100644
--- a/src/compiler/declarations.ts
+++ b/src/compiler/declarations.ts
@@ -91,6 +91,7 @@ const parsers: {
   "animation-play-state": addAnimationValue,
   "animation-timing-function": addAnimationValue,
   "aspect-ratio": parseAspectRatio,
+  "backface-visibility": parseBackfaceVisibility,
   "background-color": parseColorDeclaration,
   "background-image": parseBackgroundImage,
   "block-size": parseSizeDeclaration,
@@ -2466,6 +2467,18 @@ export function parseAspectRatio({
   }
 }
 
+export function parseBackfaceVisibility(
+  { value }: DeclarationType<"backface-visibility">,
+  builder: StylesheetBuilder,
+): StyleDescriptor {
+  if (["visible", "hidden"].includes(value)) {
+    return value;
+  } else {
+    builder.addWarning("value", value);
+    return;
+  }
+}
+
 export function parseDimension(
   { unit, value }: Extract<Token, { type: "dimension" }>,
   builder: StylesheetBuilder,