feat: backface-visibility

Author: marklawlor

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({

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,